Merge pull request #1614 from ONLYOFFICE/feature/InputField-with-Calendar
Feature/input field with calendar
This commit is contained in:
Julia Radzhabova
GitHub
commit
28bd751d82
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
})());
|
||||
});
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@
|
|||
.input-row {
|
||||
height: @input-height-base;
|
||||
|
||||
label:not(.checkbox-indeterminate) {
|
||||
& > label:not(.checkbox-indeterminate) {
|
||||
line-height: @input-height-base;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue