Merge pull request #1614 from ONLYOFFICE/feature/InputField-with-Calendar

Feature/input field with calendar

apps/common/main/lib/component/Calendar.js

@@ -456,6 +456,13 @@ define([
             }
         },
 
+        focus: function () {
+            var me = this;
+            me.enableKeyEvents && me.monthPicker && _.delay(function() {
+                me.monthPicker.focus();
+            }, 10);
+        },
+
         textJanuary: 'January',
         textFebruary: 'February',
         textMarch: 'March',

apps/common/main/lib/component/InputField.js

@@ -431,7 +431,7 @@ define([
                 validateOnBlur: true,
                 disabled: false,
                 editable: true,
-                iconCls: 'btn-select-range',
+                iconCls: 'toolbar__icon btn-select-range',
                 btnHint: ''
             },
 
@@ -447,7 +447,6 @@ define([
                     '>',
                     '<span class="input-error"></span>',
                     '<div class="select-button">' +
-                        '<button type="button" class="btn btn-toolbar"><i class="icon toolbar__icon <%= iconCls %>"></i></button>' +
                     '</div>',
                 '</div>'
             ].join('')),
@@ -465,7 +464,6 @@ define([
                         name        : this.name,
                         placeHolder : this.placeHolder,
                         spellcheck  : this.spellcheck,
-                        iconCls     : this.options.iconCls,
                         scope       : me
                     }));
 
@@ -483,10 +481,12 @@ define([
                     var el = this.cmpEl;
 
                     this._button = new Common.UI.Button({
-                        el: this.cmpEl.find('button'),
+                        cls: 'btn-toolbar',
                         iconCls: this.options.iconCls,
-                        hint: this.options.btnHint || ''
+                        hint: this.options.btnHint || '',
+                        menu: this.options.menu
                     });
+                    this._button.render(this.cmpEl.find('.select-button'));
                     this._button.on('click', _.bind(this.onButtonClick, this));
 
                     this._input = this.cmpEl.find('input').addBack().filter('input');
@@ -566,7 +566,7 @@ define([
                 validateOnBlur: true,
                 disabled: false,
                 editable: true,
-                iconCls: 'btn-sheet-view',
+                iconCls: 'toolbar__icon btn-sheet-view',
                 btnHint: '',
                 repeatInput: null,
                 showPwdOnClick: true
@@ -609,7 +609,7 @@ define([
 
             passwordShow: function (e) {
                 if (this.disabled) return;
-                this._button.setIconCls('hide-password');
+                this._button.setIconCls('toolbar__icon hide-password');
                 this.type = 'text';
 
                 this._input.attr('type', this.type);
@@ -628,7 +628,7 @@ define([
             },
 
             passwordHide: function (e) {
-                this._button.setIconCls('btn-sheet-view');
+                this._button.setIconCls('toolbar__icon btn-sheet-view');
                 this.type = 'password';
 
                 (this._input.val() !== '') && this._input.attr('type', this.type);
@@ -649,4 +649,66 @@ define([
             textHintHidePwd: 'Hide password'
         }
     })(), Common.UI.InputFieldBtnPassword || {}));
+
+    Common.UI.InputFieldBtnCalendar = Common.UI.InputFieldBtn.extend((function (){
+        return {
+            options: {
+                id: null,
+                cls: '',
+                style: '',
+                value: '',
+                type: 'date',
+                name: '',
+                validation: null,
+                allowBlank: true,
+                placeHolder: '',
+                blankError: null,
+                spellcheck: false,
+                maskExp: '',
+                validateOnChange: false,
+                validateOnBlur: true,
+                disabled: false,
+                editable: true,
+                iconCls: 'toolbar__icon btn-datetime',
+                btnHint: '',
+                menu: true
+            },
+
+            render: function (parentEl) {
+                var me = this;
+                Common.UI.InputFieldBtn.prototype.render.call(this, parentEl);
+
+                var id = 'id-' + Common.UI.getId() + 'input-field-datetime',
+                    menu = new Common.UI.Menu({
+                        menuAlign: 'tr-br',
+                        style: 'border: none; padding: 0;',
+                        items: [
+                            {template: _.template('<div id="' + id + '" style=""></div>'), stopPropagation: true}
+                        ]
+                    });
+                $('button', this._button.cmpEl).addClass('no-caret');
+                this._button.setMenu(menu);
+                this._button.menu.on('show:after', function(menu) {
+                    if (!me.cmpCalendar) {
+                        me.cmpCalendar = new Common.UI.Calendar({
+                            el: me.cmpEl.find('#' + id),
+                            enableKeyEvents: true,
+                            firstday: 1
+                        });
+                        me.cmpCalendar.on('date:click', function (cmp, date) {
+                            me.trigger('date:click', me, date);
+                            menu.hide();
+                        });
+                        menu.alignPosition();
+                    }
+                    me.cmpCalendar.focus();
+                })
+            },
+
+            setDate: function(date) {
+                if (this.cmpCalendar && date && date instanceof Date && !isNaN(date))
+                    this.cmpCalendar && this.cmpCalendar.setDate(date);
+            }
+        }
+    })());
 });

apps/common/main/resources/less/input.less

@@ -127,7 +127,8 @@ textarea.form-control:focus {
         right: @scaled-one-px-value-ie;
         right: @scaled-one-px-value;
 
-        > .btn-toolbar {
+        .btn-group > .btn-toolbar,
+        & > .btn-toolbar {
             height: 22px;
             padding-top: 1px;
         }

apps/common/main/resources/less/window.less

@@ -320,7 +320,7 @@
         .input-row {
             height: @input-height-base;
 
-            label:not(.checkbox-indeterminate)  {
+            & > label:not(.checkbox-indeterminate)  {
                 line-height: @input-height-base;
             }