update datetimepicker and correct its position on change viewMode
This commit is contained in:
vitalets
parent
d28fe2a5f4
commit
69ddc142bb
src/inputs/datetime
@ -32,7 +32,7 @@
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.datetimepicker-dropdown:before {
|
||||
[class*=" datetimepicker-dropdown"]:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
@ -40,40 +40,64 @@
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 6px;
|
||||
}
|
||||
.datetimepicker-dropdown:after {
|
||||
[class*=" datetimepicker-dropdown"]:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #ffffff;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
left: 7px;
|
||||
}
|
||||
.datetimepicker-dropdown-left:before {
|
||||
[class*=" datetimepicker-dropdown-top"]:before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 7px solid transparent;
|
||||
border-right: 7px solid transparent;
|
||||
border-bottom: 7px solid #ccc;
|
||||
border-bottom-color: rgba(0, 0, 0, 0.2);
|
||||
position: absolute;
|
||||
border-top: 7px solid #ccc;
|
||||
border-top-color: rgba(0, 0, 0, 0.2);
|
||||
border-bottom: 0;
|
||||
}
|
||||
[class*=" datetimepicker-dropdown-top"]:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-top: 6px solid #ffffff;
|
||||
border-bottom: 0;
|
||||
}
|
||||
.datetimepicker-dropdown-bottom-right:before {
|
||||
top: -7px;
|
||||
right: 6px;
|
||||
}
|
||||
.datetimepicker-dropdown-left:after {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
border-left: 6px solid transparent;
|
||||
border-right: 6px solid transparent;
|
||||
border-bottom: 6px solid #ffffff;
|
||||
position: absolute;
|
||||
.datetimepicker-dropdown-bottom-right:after {
|
||||
top: -6px;
|
||||
right: 7px;
|
||||
}
|
||||
.datetimepicker-dropdown-bottom-left:before {
|
||||
top: -7px;
|
||||
left: 6px;
|
||||
}
|
||||
.datetimepicker-dropdown-bottom-left:after {
|
||||
top: -6px;
|
||||
left: 7px;
|
||||
}
|
||||
.datetimepicker-dropdown-top-right:before {
|
||||
bottom: -7px;
|
||||
right: 6px;
|
||||
}
|
||||
.datetimepicker-dropdown-top-right:after {
|
||||
bottom: -6px;
|
||||
right: 7px;
|
||||
}
|
||||
.datetimepicker-dropdown-top-left:before {
|
||||
bottom: -7px;
|
||||
left: 6px;
|
||||
}
|
||||
.datetimepicker-dropdown-top-left:after {
|
||||
bottom: -6px;
|
||||
left: 7px;
|
||||
}
|
||||
.datetimepicker > div {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -58,6 +58,13 @@
|
||||
|
||||
this._attachEvents();
|
||||
|
||||
this.formatViewType = "datetime";
|
||||
if ('formatViewType' in options) {
|
||||
this.formatViewType = options.formatViewType;
|
||||
} else if ('formatViewType' in this.element.data()) {
|
||||
this.formatViewType = this.element.data('formatViewType');
|
||||
}
|
||||
|
||||
this.minView = 0;
|
||||
if ('minView' in options) {
|
||||
this.minView = options.minView;
|
||||
@ -108,11 +115,7 @@
|
||||
if (this.isInline) {
|
||||
this.picker.addClass('datetimepicker-inline');
|
||||
} else {
|
||||
if (this.component && this.pickerPosition == 'bottom-left') {
|
||||
this.picker.addClass('datetimepicker-dropdown-left dropdown-menu');
|
||||
} else {
|
||||
this.picker.addClass('datetimepicker-dropdown dropdown-menu');
|
||||
}
|
||||
this.picker.addClass('datetimepicker-dropdown-' + this.pickerPosition + ' dropdown-menu');
|
||||
}
|
||||
if (this.isRTL){
|
||||
this.picker.addClass('datetimepicker-rtl');
|
||||
@ -301,15 +304,28 @@
|
||||
}
|
||||
},
|
||||
|
||||
setFormat: function(format) {
|
||||
this.format = DPGlobal.parseFormat(format, this.formatType);
|
||||
var element;
|
||||
if (this.isInput) {
|
||||
element = this.element;
|
||||
} else if (this.component){
|
||||
element = this.element.find('input');
|
||||
}
|
||||
if (element && element.val()) {
|
||||
this.setValue();
|
||||
}
|
||||
},
|
||||
|
||||
setValue: function() {
|
||||
var formatted = this.getFormattedDate();
|
||||
if (!this.isInput) {
|
||||
if (this.component){
|
||||
this.element.find('input').prop('value', formatted);
|
||||
this.element.find('input').val(formatted);
|
||||
}
|
||||
this.element.data('date', formatted);
|
||||
} else {
|
||||
this.element.prop('value', formatted);
|
||||
this.element.val(formatted);
|
||||
}
|
||||
if (this.linkField) {
|
||||
$('#' + this.linkField).val(this.getFormattedDate(this.linkFormat));
|
||||
@ -356,19 +372,24 @@
|
||||
var zIndex = parseInt(this.element.parents().filter(function() {
|
||||
return $(this).css('z-index') != 'auto';
|
||||
}).first().css('z-index'))+10;
|
||||
var offset, left;
|
||||
var offset, top, left;
|
||||
if (this.component) {
|
||||
offset = this.component.offset();
|
||||
left = offset.left;
|
||||
if (this.pickerPosition == 'bottom-left') {
|
||||
if (this.pickerPosition == 'bottom-left' || this.pickerPosition == 'top-left') {
|
||||
left += this.component.outerWidth() - this.picker.outerWidth();
|
||||
}
|
||||
} else {
|
||||
offset = this.element.offset();
|
||||
left = offset.left;
|
||||
}
|
||||
if (this.pickerPosition == 'top-left' || this.pickerPosition == 'top-right') {
|
||||
top = offset.top - this.picker.outerHeight();
|
||||
} else {
|
||||
top = offset.top + this.height;
|
||||
}
|
||||
this.picker.css({
|
||||
top: offset.top + this.height,
|
||||
top: top,
|
||||
left: left,
|
||||
zIndex: zIndex
|
||||
});
|
||||
@ -380,7 +401,7 @@
|
||||
date = arguments[0];
|
||||
fromArgs = true;
|
||||
} else {
|
||||
date = this.isInput ? this.element.prop('value') : this.element.data('date') || this.element.find('input').prop('value') || this.initialDate;
|
||||
date = this.element.data('date') || (this.isInput ? this.element.val() : this.element.find('input').val()) || this.initialDate;
|
||||
}
|
||||
|
||||
if (!date) {
|
||||
@ -439,10 +460,21 @@
|
||||
today = new Date();
|
||||
this.picker.find('.datetimepicker-days thead th:eq(1)')
|
||||
.text(dates[this.language].months[month]+' '+year);
|
||||
if (this.formatViewType == "time") {
|
||||
var hourConverted = hours % 12 ? hours % 12 : 12;
|
||||
var hoursDisplay = (hourConverted < 10 ? '0' : '') + hourConverted;
|
||||
var minutesDisplay = (minutes < 10 ? '0' : '') + minutes;
|
||||
var meridianDisplay = dates[this.language].meridiem[hours < 12 ? 0 : 1];
|
||||
this.picker.find('.datetimepicker-hours thead th:eq(1)')
|
||||
.text(hoursDisplay + ':' + minutesDisplay + ' ' + meridianDisplay.toUpperCase());
|
||||
this.picker.find('.datetimepicker-minutes thead th:eq(1)')
|
||||
.text(hoursDisplay + ':' + minutesDisplay + ' ' + meridianDisplay.toUpperCase());
|
||||
} else {
|
||||
this.picker.find('.datetimepicker-hours thead th:eq(1)')
|
||||
.text(dayMonth + ' ' + dates[this.language].months[month] + ' ' + year);
|
||||
this.picker.find('.datetimepicker-minutes thead th:eq(1)')
|
||||
.text(dayMonth + ' ' + dates[this.language].months[month] + ' ' + year);
|
||||
}
|
||||
this.picker.find('tfoot th.today')
|
||||
.text(dates[this.language].today)
|
||||
.toggle(this.todayBtn !== false);
|
||||
@ -588,6 +620,7 @@
|
||||
year += 1;
|
||||
}
|
||||
yearCont.html(html);
|
||||
this.place();
|
||||
},
|
||||
|
||||
updateNavArrows: function() {
|
||||
@ -841,10 +874,6 @@
|
||||
if (!which || which == 'view')
|
||||
this.viewDate = date;
|
||||
this.fill();
|
||||
this.element.trigger({
|
||||
type: 'changeDate',
|
||||
date: this.date
|
||||
});
|
||||
this.setValue();
|
||||
var element;
|
||||
if (this.isInput) {
|
||||
@ -858,6 +887,10 @@
|
||||
//this.hide();
|
||||
}
|
||||
}
|
||||
this.element.trigger({
|
||||
type: 'changeDate',
|
||||
date: this.date
|
||||
});
|
||||
},
|
||||
|
||||
moveMinute: function(date, dir){
|
||||
@ -1042,10 +1075,6 @@
|
||||
break;
|
||||
}
|
||||
if (dateChanged){
|
||||
this.element.trigger({
|
||||
type: 'changeDate',
|
||||
date: this.date
|
||||
});
|
||||
var element;
|
||||
if (this.isInput) {
|
||||
element = this.element;
|
||||
@ -1055,6 +1084,10 @@
|
||||
if (element) {
|
||||
element.change();
|
||||
}
|
||||
this.element.trigger({
|
||||
type: 'changeDate',
|
||||
date: this.date
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
@ -1062,6 +1095,13 @@
|
||||
if (dir) {
|
||||
var newViewMode = Math.max(0, Math.min(DPGlobal.modes.length - 1, this.viewMode + dir));
|
||||
if (newViewMode >= this.minView && newViewMode <= this.maxView) {
|
||||
this.element.trigger({
|
||||
type: 'changeMode',
|
||||
date: this.viewDate,
|
||||
oldViewMode: this.viewMode,
|
||||
newViewMode: newViewMode
|
||||
});
|
||||
|
||||
this.viewMode = newViewMode;
|
||||
}
|
||||
}
|
||||
|
||||
@ -67,6 +67,16 @@ $(function(){
|
||||
render: function () {
|
||||
this.$input.datetimepicker(this.options.datetimepicker);
|
||||
|
||||
//adjust container position when viewMode changes
|
||||
//see https://github.com/smalot/bootstrap-datetimepicker/pull/80
|
||||
this.$input.on('changeMode', function(e) {
|
||||
var f = $(this).closest('form').parent();
|
||||
//timeout here, otherwise container changes position before form has new size
|
||||
setTimeout(function(){
|
||||
f.triggerHandler('resize');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
//"clear" link
|
||||
if(this.options.clear) {
|
||||
this.$clear = $('<a href="#"></a>').html(this.options.clear).click($.proxy(function(e){
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user