4 * DateTimeInputWidgets can be used to input a date, a time, or a date and
5 * time, in either UTC or the user's local timezone.
6 * Please see the [OOjs UI documentation on MediaWiki] [1] for more information and examples.
8 * This widget can be used inside a HTML form, such as a OO.ui.FormLayout.
11 * // Example of a text input widget
12 * var dateTimeInput = new mw.widgets.datetime.DateTimeInputWidget( {} )
13 * $( 'body' ).append( dateTimeInput.$element );
15 * [1]: https://www.mediawiki.org/wiki/OOjs_UI/Widgets/Inputs
18 * @extends OO.ui.InputWidget
19 * @mixins OO.ui.mixin.IconElement
20 * @mixins OO.ui.mixin.IndicatorElement
21 * @mixins OO.ui.mixin.PendingElement
24 * @param {Object} [config] Configuration options
25 * @cfg {string} [type='datetime'] Whether to act like a 'date', 'time', or 'datetime' input.
26 * Affects values stored in the relevant <input> and the formatting and
27 * interpretation of values passed to/from getValue() and setValue(). It's up
28 * to the user to configure the DateTimeFormatter correctly.
29 * @cfg {Object|mw.widgets.datetime.DateTimeFormatter} [formatter={}] Configuration options for
30 * mw.widgets.datetime.ProlepticGregorianDateTimeFormatter (with 'format' defaulting to
31 * '@date', '@time', or '@datetime' depending on 'type'), or an
32 * mw.widgets.datetime.DateTimeFormatter instance to use.
33 * @cfg {Object|null} [calendar={}] Configuration options for
34 * mw.widgets.datetime.CalendarWidget; note certain settings will be forced based on the
35 * settings passed to this widget. Set null to disable the calendar.
36 * @cfg {boolean} [required=false] Whether a value is required.
37 * @cfg {boolean} [clearable=true] Whether to provide for blanking the value.
38 * @cfg {Date|null} [value=null] Default value for the widget
39 * @cfg {Date|string|null} [min=null] Minimum allowed date
40 * @cfg {Date|string|null} [max=null] Maximum allowed date
42 mw.widgets.datetime.DateTimeInputWidget = function MwWidgetsDatetimeDateTimeInputWidget( config ) {
43 // Configuration initialization
54 // See InputWidget#reusePreInfuseDOM about config.$input
55 if ( config.$input ) {
56 config.$input.addClass( 'oo-ui-element-hidden' );
59 if ( $.isPlainObject( config.formatter ) && config.formatter.format === undefined ) {
60 config.formatter.format = '@' + config.type;
64 this.type = config.type;
67 mw.widgets.datetime.DateTimeInputWidget[ 'super' ].call( this, config );
70 OO.ui.mixin.IconElement.call( this, config );
71 OO.ui.mixin.IndicatorElement.call( this, config );
72 OO.ui.mixin.PendingElement.call( this, config );
75 this.$handle = $( '<span>' );
76 this.$fields = $( '<span>' );
78 this.clearable = !!config.clearable;
79 this.required = !!config.required;
81 if ( typeof config.min === 'string' ) {
82 config.min = this.parseDateValue( config.min );
84 if ( config.min instanceof Date && config.min.getTime() >= -62167219200000 ) {
85 this.min = config.min;
87 this.min = new Date( -62167219200000 ); // 0000-01-01T00:00:00.000Z
90 if ( typeof config.max === 'string' ) {
91 config.max = this.parseDateValue( config.max );
93 if ( config.max instanceof Date && config.max.getTime() <= 253402300799999 ) {
94 this.max = config.max;
96 this.max = new Date( 253402300799999 ); // 9999-12-31T12:59:59.999Z
99 switch ( this.type ) {
101 this.min.setUTCHours( 0, 0, 0, 0 );
102 this.max.setUTCHours( 23, 59, 59, 999 );
105 this.min.setUTCFullYear( 1970, 0, 1 );
106 this.max.setUTCFullYear( 1970, 0, 1 );
109 if ( this.min > this.max ) {
111 '"min" (' + this.min.toISOString() + ') must not be greater than ' +
112 '"max" (' + this.max.toISOString() + ')'
116 if ( config.formatter instanceof mw.widgets.datetime.DateTimeFormatter ) {
117 this.formatter = config.formatter;
118 } else if ( $.isPlainObject( config.formatter ) ) {
119 this.formatter = new mw.widgets.datetime.ProlepticGregorianDateTimeFormatter( config.formatter );
121 throw new Error( '"formatter" must be an mw.widgets.datetime.DateTimeFormatter or a plain object' );
124 if ( this.type === 'time' || config.calendar === null ) {
125 this.calendar = null;
127 config.calendar = $.extend( {}, config.calendar, {
128 formatter: this.formatter,
133 this.calendar = new mw.widgets.datetime.CalendarWidget( config.calendar );
138 click: this.onHandleClick.bind( this )
140 this.connect( this, {
143 this.formatter.connect( this, {
146 if ( this.calendar ) {
147 this.calendar.connect( this, {
148 change: 'onCalendarChange'
153 this.setTabIndex( -1 );
155 this.$fields.addClass( 'mw-widgets-datetime-dateTimeInputWidget-fields' );
159 .addClass( 'mw-widgets-datetime-dateTimeInputWidget-handle' )
160 .append( this.$icon, this.$indicator, this.$fields );
163 .addClass( 'mw-widgets-datetime-dateTimeInputWidget' )
164 .append( this.$handle );
166 if ( this.calendar ) {
167 this.$element.append( this.calendar.$element );
173 OO.inheritClass( mw.widgets.datetime.DateTimeInputWidget, OO.ui.InputWidget );
174 OO.mixinClass( mw.widgets.datetime.DateTimeInputWidget, OO.ui.mixin.IconElement );
175 OO.mixinClass( mw.widgets.datetime.DateTimeInputWidget, OO.ui.mixin.IndicatorElement );
176 OO.mixinClass( mw.widgets.datetime.DateTimeInputWidget, OO.ui.mixin.PendingElement );
178 /* Static properties */
180 mw.widgets.datetime.DateTimeInputWidget.static.supportsSimpleLabel = false;
187 * Convert a date string to a Date
190 * @param {string} value
191 * @return {Date|null}
193 mw.widgets.datetime.DateTimeInputWidget.prototype.parseDateValue = function ( value ) {
196 value = String( value );
197 switch ( this.type ) {
199 value = value + 'T00:00:00Z';
202 value = '1970-01-01T' + value + 'Z';
205 m = /^(\d{4,})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,3}))?Z$/.exec( value );
208 while ( m[ 7 ].length < 3 ) {
215 date.setUTCFullYear( m[ 1 ], m[ 2 ] - 1, m[ 3 ] );
216 date.setUTCHours( m[ 4 ], m[ 5 ], m[ 6 ], m[ 7 ] );
217 if ( date.getTime() < -62167219200000 || date.getTime() > 253402300799999 ||
218 date.getUTCFullYear() !== +m[ 1 ] ||
219 date.getUTCMonth() + 1 !== +m[ 2 ] ||
220 date.getUTCDate() !== +m[ 3 ] ||
221 date.getUTCHours() !== +m[ 4 ] ||
222 date.getUTCMinutes() !== +m[ 5 ] ||
223 date.getUTCSeconds() !== +m[ 6 ] ||
224 date.getUTCMilliseconds() !== +m[ 7 ]
238 mw.widgets.datetime.DateTimeInputWidget.prototype.cleanUpValue = function ( value ) {
241 if ( value === '' ) {
245 if ( value instanceof Date ) {
248 date = this.parseDateValue( value );
251 if ( date instanceof Date ) {
252 pad = function ( v, l ) {
254 while ( v.length < l ) {
260 switch ( this.type ) {
262 value = pad( date.getUTCFullYear(), 4 ) +
263 '-' + pad( date.getUTCMonth() + 1, 2 ) +
264 '-' + pad( date.getUTCDate(), 2 );
268 value = pad( date.getUTCHours(), 2 ) +
269 ':' + pad( date.getUTCMinutes(), 2 ) +
270 ':' + pad( date.getUTCSeconds(), 2 ) +
271 '.' + pad( date.getUTCMilliseconds(), 3 );
272 value = value.replace( /\.?0+$/, '' );
276 value = date.toISOString();
287 * Get the value of the input as a Date object
289 * @return {Date|null}
291 mw.widgets.datetime.DateTimeInputWidget.prototype.getValueAsDate = function () {
292 return this.parseDateValue( this.getValue() );
296 * Set up the UI fields
300 mw.widgets.datetime.DateTimeInputWidget.prototype.setupFields = function () {
301 var i, $field, spec, placeholder, sz, maxlength,
302 spanValFunc = function ( v ) {
303 if ( v === undefined ) {
304 return this.data( 'mw-widgets-datetime-dateTimeInputWidget-value' );
307 this.data( 'mw-widgets-datetime-dateTimeInputWidget-value', v );
309 v = this.data( 'mw-widgets-datetime-dateTimeInputWidget-placeholder' );
315 reduceFunc = function ( k, v ) {
316 maxlength = Math.max( maxlength, v );
318 disabled = this.isDisabled(),
319 specs = this.formatter.getFieldSpec();
321 this.$fields.empty();
322 this.clearButton = null;
325 for ( i = 0; i < specs.length; i++ ) {
327 if ( typeof spec === 'string' ) {
329 .addClass( 'mw-widgets-datetime-dateTimeInputWidget-field' )
331 .appendTo( this.$fields );
336 while ( placeholder.length < spec.size ) {
340 if ( spec.type === 'number' ) {
341 // Numbers ''should'' be the same width. But we need some extra for
343 sz = ( spec.size * 1.15 ) + 'ch';
345 // Add a little for padding
346 sz = ( spec.size * 1.15 ) + 'ch';
348 if ( spec.editable && spec.type !== 'static' ) {
349 if ( spec.type === 'boolean' || spec.type === 'toggleLocal' ) {
350 $field = $( '<span>' )
352 tabindex: disabled ? -1 : 0
355 .data( 'mw-widgets-datetime-dateTimeInputWidget-placeholder', placeholder );
357 keydown: this.onFieldKeyDown.bind( this, $field ),
358 focus: this.onFieldFocus.bind( this, $field ),
359 click: this.onFieldClick.bind( this, $field ),
360 'wheel mousewheel DOMMouseScroll': this.onFieldWheel.bind( this, $field )
362 $field.val = spanValFunc;
364 maxlength = spec.size;
365 if ( spec.intercalarySize ) {
366 $.each( spec.intercalarySize, reduceFunc );
368 $field = $( '<input>' ).attr( 'type', 'text' )
370 tabindex: disabled ? -1 : 0,
376 placeholder: placeholder
380 keydown: this.onFieldKeyDown.bind( this, $field ),
381 click: this.onFieldClick.bind( this, $field ),
382 focus: this.onFieldFocus.bind( this, $field ),
383 blur: this.onFieldBlur.bind( this, $field ),
384 change: this.onFieldChange.bind( this, $field ),
385 'wheel mousewheel DOMMouseScroll': this.onFieldWheel.bind( this, $field )
388 $field.addClass( 'mw-widgets-datetime-dateTimeInputWidget-editField' );
390 $field = $( '<span>' )
392 .data( 'mw-widgets-datetime-dateTimeInputWidget-placeholder', placeholder );
393 if ( spec.type !== 'static' ) {
394 $field.prop( 'tabIndex', -1 );
395 $field.on( 'focus', this.onFieldFocus.bind( this, $field ) );
397 if ( spec.type === 'static' ) {
398 $field.text( spec.value );
400 $field.val = spanValFunc;
404 this.fields.push( $field );
406 .addClass( 'mw-widgets-datetime-dateTimeInputWidget-field' )
407 .data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec', spec )
408 .appendTo( this.$fields );
411 if ( this.clearable ) {
412 this.clearButton = new OO.ui.ButtonWidget( {
413 classes: [ 'mw-widgets-datetime-dateTimeInputWidget-field', 'mw-widgets-datetime-dateTimeInputWidget-clearButton' ],
418 click: 'onClearClick'
420 this.$fields.append( this.clearButton.$element );
423 this.updateFieldsFromValue();
427 * Update the UI fields from the current value
431 mw.widgets.datetime.DateTimeInputWidget.prototype.updateFieldsFromValue = function () {
432 var i, $field, spec, intercalary, sz,
433 date = this.getValueAsDate();
435 if ( date === null ) {
436 this.components = null;
438 for ( i = 0; i < this.fields.length; i++ ) {
439 $field = this.fields[ i ];
440 spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
443 .removeClass( 'mw-widgets-datetime-dateTimeInputWidget-invalid oo-ui-element-hidden' )
446 if ( spec.intercalarySize ) {
447 if ( spec.type === 'number' ) {
448 // Numbers ''should'' be the same width. But we need some extra for
450 $field.width( ( spec.size * 1.15 ) + 'ch' );
452 // Add a little for padding
453 $field.width( ( spec.size * 1.15 ) + 'ch' );
458 this.setFlags( { invalid: this.required } );
460 this.components = this.formatter.getComponentsFromDate( date );
461 intercalary = this.components.intercalary;
463 for ( i = 0; i < this.fields.length; i++ ) {
464 $field = this.fields[ i ];
465 $field.removeClass( 'mw-widgets-datetime-dateTimeInputWidget-invalid' );
466 spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
467 if ( spec.type !== 'static' ) {
468 $field.val( spec.formatValue( this.components[ spec.component ] ) );
470 if ( spec.intercalarySize ) {
471 if ( intercalary && spec.intercalarySize[ intercalary ] !== undefined ) {
472 sz = spec.intercalarySize[ intercalary ];
476 $field.toggleClass( 'oo-ui-element-hidden', sz <= 0 );
477 if ( spec.type === 'number' ) {
478 // Numbers ''should'' be the same width. But we need some extra for
480 this.fields[ i ].width( ( sz * 1.15 ) + 'ch' );
482 // Add a little for padding
483 this.fields[ i ].width( ( sz * 1.15 ) + 'ch' );
488 this.setFlags( { invalid: date < this.min || date > this.max } );
491 this.$element.toggleClass( 'mw-widgets-datetime-dateTimeInputWidget-empty', date === null );
495 * Update the value with data from the UI fields
499 mw.widgets.datetime.DateTimeInputWidget.prototype.updateValueFromFields = function () {
500 var i, v, $field, spec, curDate, newDate,
506 for ( i = 0; i < this.fields.length; i++ ) {
507 $field = this.fields[ i ];
508 spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
509 if ( spec.editable ) {
510 $field.removeClass( 'mw-widgets-datetime-dateTimeInputWidget-invalid' );
513 $field.addClass( 'mw-widgets-datetime-dateTimeInputWidget-invalid' );
517 v = spec.parseValue( v );
518 if ( v === undefined ) {
519 $field.addClass( 'mw-widgets-datetime-dateTimeInputWidget-invalid' );
522 components[ spec.component ] = v;
529 for ( i = 0; i < this.fields.length; i++ ) {
530 this.fields[ i ].removeClass( 'mw-widgets-datetime-dateTimeInputWidget-invalid' );
532 } else if ( anyEmpty ) {
537 curDate = this.getValueAsDate();
538 newDate = this.formatter.getDateFromComponents( components );
539 if ( !curDate || !newDate || curDate.getTime() !== newDate.getTime() ) {
540 this.setValue( newDate );
546 * Handle change event
550 mw.widgets.datetime.DateTimeInputWidget.prototype.onChange = function () {
553 this.updateFieldsFromValue();
555 if ( this.calendar ) {
556 date = this.getValueAsDate();
557 this.calendar.setSelected( date );
559 this.calendar.setFocusedDate( date );
565 * Handle clear button click event
569 mw.widgets.datetime.DateTimeInputWidget.prototype.onClearClick = function () {
575 * Handle click on the widget background
578 * @param {jQuery.Event} e Click event
580 mw.widgets.datetime.DateTimeInputWidget.prototype.onHandleClick = function () {
585 * Handle key down events on our field inputs.
588 * @param {jQuery} $field
589 * @param {jQuery.Event} e Key down event
590 * @return {boolean} False to cancel the default event
592 mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldKeyDown = function ( $field, e ) {
593 var spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
595 if ( !this.isDisabled() ) {
597 case OO.ui.Keys.ENTER:
598 case OO.ui.Keys.SPACE:
599 if ( spec.type === 'boolean' ) {
601 this.formatter.adjustComponent( this.getValueAsDate(), spec.component, 1, 'wrap' )
604 } else if ( spec.type === 'toggleLocal' ) {
605 this.formatter.toggleLocal();
610 case OO.ui.Keys.DOWN:
611 if ( spec.type === 'toggleLocal' ) {
612 this.formatter.toggleLocal();
615 this.formatter.adjustComponent( this.getValueAsDate(), spec.component,
616 e.keyCode === OO.ui.Keys.UP ? -1 : 1, 'wrap' )
619 if ( $field.is( ':input' ) ) {
628 * Handle focus events on our field inputs.
631 * @param {jQuery} $field
632 * @param {jQuery.Event} e Focus event
634 mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldFocus = function ( $field ) {
635 var spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
637 if ( !this.isDisabled() ) {
638 if ( this.getValueAsDate() === null ) {
639 this.setValue( this.formatter.getDefaultDate() );
641 if ( $field.is( ':input' ) ) {
645 if ( this.calendar ) {
646 this.calendar.toggle( !!spec.calendarComponent );
652 * Handle click events on our field inputs.
655 * @param {jQuery} $field
656 * @param {jQuery.Event} e Click event
658 mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldClick = function ( $field ) {
659 var spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
661 if ( !this.isDisabled() ) {
662 if ( spec.type === 'boolean' ) {
664 this.formatter.adjustComponent( this.getValueAsDate(), spec.component, 1, 'wrap' )
666 } else if ( spec.type === 'toggleLocal' ) {
667 this.formatter.toggleLocal();
673 * Handle blur events on our field inputs.
676 * @param {jQuery} $field
677 * @param {jQuery.Event} e Blur event
679 mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldBlur = function ( $field ) {
681 spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
683 this.updateValueFromFields();
686 date = this.getValueAsDate();
690 v = spec.formatValue( this.formatter.getComponentsFromDate( date )[ spec.component ] );
691 if ( v !== $field.val() ) {
698 * Handle change events on our field inputs.
701 * @param {jQuery} $field
702 * @param {jQuery.Event} e Change event
704 mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldChange = function () {
705 this.updateValueFromFields();
709 * Handle wheel events on our field inputs.
712 * @param {jQuery} $field
713 * @param {jQuery.Event} e Change event
714 * @return {boolean} False to cancel the default event
716 mw.widgets.datetime.DateTimeInputWidget.prototype.onFieldWheel = function ( $field, e ) {
718 spec = $field.data( 'mw-widgets-datetime-dateTimeInputWidget-fieldSpec' );
720 if ( this.isDisabled() ) {
724 // Standard 'wheel' event
725 if ( e.originalEvent.deltaMode !== undefined ) {
726 this.sawWheelEvent = true;
728 if ( e.originalEvent.deltaY ) {
729 delta = -e.originalEvent.deltaY;
730 } else if ( e.originalEvent.deltaX ) {
731 delta = e.originalEvent.deltaX;
734 // Non-standard events
735 if ( !this.sawWheelEvent ) {
736 if ( e.originalEvent.wheelDeltaX ) {
737 delta = -e.originalEvent.wheelDeltaX;
738 } else if ( e.originalEvent.wheelDeltaY ) {
739 delta = e.originalEvent.wheelDeltaY;
740 } else if ( e.originalEvent.wheelDelta ) {
741 delta = e.originalEvent.wheelDelta;
742 } else if ( e.originalEvent.detail ) {
743 delta = -e.originalEvent.detail;
747 if ( delta && spec ) {
748 if ( spec.type === 'toggleLocal' ) {
749 this.formatter.toggleLocal();
752 this.formatter.adjustComponent( this.getValueAsDate(), spec.component, delta < 0 ? -1 : 1, 'wrap' )
760 * Handle calendar change event
764 mw.widgets.datetime.DateTimeInputWidget.prototype.onCalendarChange = function () {
765 var curDate = this.getValueAsDate(),
766 newDate = this.calendar.getSelected()[ 0 ];
769 if ( !curDate || newDate.getTime() !== curDate.getTime() ) {
770 this.setValue( newDate );
779 mw.widgets.datetime.DateTimeInputWidget.prototype.getInputElement = function () {
780 return $( '<input>' ).attr( 'type', 'hidden' );
786 mw.widgets.datetime.DateTimeInputWidget.prototype.setDisabled = function ( disabled ) {
787 mw.widgets.datetime.DateTimeInputWidget[ 'super' ].prototype.setDisabled.call( this, disabled );
789 // Flag all our fields as disabled
790 if ( this.$fields ) {
791 this.$fields.find( 'input' ).prop( 'disabled', this.isDisabled() );
792 this.$fields.find( '[tabindex]' ).attr( 'tabindex', this.isDisabled() ? -1 : 0 );
795 if ( this.clearButton ) {
796 this.clearButton.setDisabled( disabled );
805 mw.widgets.datetime.DateTimeInputWidget.prototype.focus = function () {
806 if ( !this.$fields.find( document.activeElement ).length ) {
807 this.$fields.find( '.mw-widgets-datetime-dateTimeInputWidget-editField' ).first().focus();
815 mw.widgets.datetime.DateTimeInputWidget.prototype.blur = function () {
816 this.$fields.find( document.activeElement ).blur();
823 mw.widgets.datetime.DateTimeInputWidget.prototype.simulateLabelClick = function () {
827 }( jQuery, mediaWiki ) );