#7499 sync EasyForm date field when typing (#7501)

js/notebook/package.json

@@ -71,7 +71,7 @@
     "@phosphor/widgets": "^1.5.0",
     "big.js": "^3.1.3",
     "d3": "^4.9.1",
-    "flatpickr": "^2.6.3",
+    "flatpickr": "^4.5.0",
     "hard-source-webpack-plugin": "^0.5.1",
     "jquery": "^3.3.1",
     "jquery-ui": "^1.12.1",

js/notebook/src/easyForm/datePickerWidget.js → js/notebook/src/easyForm/datePickerWidget.ts

@@ -1,5 +1,5 @@
 /*
- *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *  Copyright 2018 TWO SIGMA OPEN SOURCE, LLC
  *
  *  Licensed under the Apache License, Version 2.0 (the "License");
  *  you may not use this file except in compliance with the License.
@@ -14,33 +14,37 @@
  *  limitations under the License.
  */
 
-var widgets = require('../widgets');
-var _ = require('underscore');
-var moment = require('moment');
+import * as moment from 'moment-timezone/builds/moment-timezone-with-data';
+import flatpickr from "flatpickr";
 
-var Flatpickr = require("flatpickr");
+var widgets = require('../widgets');
 
-var DatePickerModel = widgets.StringModel.extend({
-  defaults: function() {
-    return _.extend({}, widgets.StringModel.prototype.defaults.apply(this), {
+export class DatePickerModel extends widgets.StringModel {
+  defaults() {
+    return {
+      ...super.defaults(),
       _view_name: "DatePickerView",
       _model_name: "DatePickerModel",
       _model_module: 'beakerx',
       _view_module: 'beakerx',
       _model_module_version: BEAKERX_MODULE_VERSION,
       _view_module_version: BEAKERX_MODULE_VERSION
-    });
+    }
   }
-});
+}
 
-var datepickerOpts = {
+const datepickerOpts = {
   dateFormat: 'Ymd',
   dateTimeFormat: 'Ymd H:i'
 };
 
-var DatePickerView = widgets.LabeledDOMWidgetView.extend({
-  render: function() {
-    DatePickerView.__super__.render.apply(this);
+export class DatePickerView extends widgets.LabeledDOMWidgetView {
+  private flatpickr: any;
+  private datepicker: any;
+  private button: any;
+
+  render() {
+    super.render.apply(this);
 
     this.el.classList.add('jupyter-widgets');
     this.el.classList.add('widget-inline-hbox');
@@ -50,32 +54,34 @@ var DatePickerView = widgets.LabeledDOMWidgetView.extend({
 
     this.initDatePicker();
     this.update();
-  },
+  }
 
-  initDatePicker: function() {
-    var that = this;
-    var showTime = this.model.get('showTime');
-    var dateFormat = showTime ? datepickerOpts.dateTimeFormat : datepickerOpts.dateFormat;
+  initDatePicker() {
+    const showTime = this.model.get('showTime');
+    const dateFormat = showTime ? datepickerOpts.dateTimeFormat : datepickerOpts.dateFormat;
 
     this.flatpickr = null;
 
-    this.datepicker = $('<input type="text" placeholder="Select Date.." data-input />')
+    this.datepicker = $('<input type="text" placeholder="Select Date.." data-input >')
       .addClass('form-control');
 
-    this.button = $("<a tabindex='-1' title='Select date' class='date-picker-button ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right' role='button' aria-disabled='false' data-toggle>" +
-                     "<span class='ui-button-icon-primary ui-icon ui-icon-triangle-1-s'></span><span class='ui-button-text'></span>" +
-                     "</a>");
+    this.button = $(`
+      <a tabindex='-1' title='Select date' class='date-picker-button ui-button ui-widget ui-state-default ui-button-icon-only custom-combobox-toggle ui-corner-right' role='button' aria-disabled='false' data-toggle>
+        <span class='ui-button-icon-primary ui-icon ui-icon-triangle-1-s'></span>
+        <span class='ui-button-text'></span>
+      </a>`
+    );
 
-    var onChange = function(selectedDates, dateStr) {
+    const onChange = (selectedDates, dateStr) => {
       if (dateStr) {
-        that.setValueToModel(dateStr);
+        this.setValueToModel(dateStr);
       }
     };
 
     this.datepicker.appendTo(this.$el);
     this.button.appendTo(this.$el);
 
-    that.flatpickr = new Flatpickr(that.el, {
+    this.flatpickr = flatpickr(this.el, {
       enableTime: showTime,
       dateFormat: dateFormat,
       onChange: onChange,
@@ -84,39 +90,39 @@ var DatePickerView = widgets.LabeledDOMWidgetView.extend({
       allowInput: true
     });
 
-    this.displayed.then(function() {
+    this.datepicker[0].addEventListener('keyup', (event) => {
+      event.preventDefault();
+      event.stopPropagation();
 
-    });
-  },
+      const dateStr = this.datepicker[0].value;
+      if (dateStr && dateStr.length >= 8 && moment(dateStr).isValid()) {
+        this.flatpickr.setDate(dateStr, true, this.flatpickr.config.dateFormat);
+      }
+    }, true);
+  }
 
-  update: function(options) {
+  update(options?: any) {
     if (options === undefined || options.updated_view != this) {
-      var newValue = this.model.get('value');
+      const newValue = this.model.get('value');
 
       if (this.flatpickr && this.flatpickr.input.value != newValue) {
         this.flatpickr.setDate(newValue);
       }
 
-      var disabled = this.model.get('disabled');
+      const disabled = this.model.get('disabled');
       this.datepicker.disabled = disabled;
     }
 
-    DatePickerView.__super__.update.apply(this);
-  },
-
-  events: function () {
-    return {
-      "change input": "handleChanging"
-    };
-  },
+    super.update.apply(this);
+  }
 
-  setValueToModel: function(value) {
+  setValueToModel(value) {
     this.model.set('value', value, {updated_view: this});
     this.touch();
   }
-});
+}
 
-module.exports = {
-  DatePickerModel: DatePickerModel,
-  DatePickerView: DatePickerView
+export default {
+  DatePickerModel,
+  DatePickerView
 };

js/notebook/yarn.lock

@@ -1941,9 +1941,9 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-flatpickr@^2.6.3:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-2.6.3.tgz#457357532deb135f3da64b425bf4435737961564"
+flatpickr@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/flatpickr/-/flatpickr-4.5.0.tgz#f72c7164a1c24e3ad419e3b2209d1a2d3604724a"
 
 flatten@^1.0.2:
   version "1.0.2"