mw.widgets.DateInputWidget

Date input widget.

Examples

// Date input widget showcase
var fieldset = new OO.ui.FieldsetLayout( {
  items: [
    new OO.ui.FieldLayout(
      new mw.widgets.DateInputWidget(),
      {
        align: 'top',
        label: 'Select date'
      }
    ),
    new OO.ui.FieldLayout(
      new mw.widgets.DateInputWidget( { precision: 'month' } ),
      {
        align: 'top',
        label: 'Select month'
      }
    ),
    new OO.ui.FieldLayout(
      new mw.widgets.DateInputWidget( {
        inputFormat: 'DD.MM.YYYY',
        displayFormat: 'Do [of] MMMM [anno Domini] YYYY'
      } ),
      {
        align: 'top',
        label: 'Select date (custom formats)'
      }
    )
  ]
} );
$( document.body ).append( fieldset.$element );

// The value is stored in 'YYYY-MM-DD' or 'YYYY-MM' format
// Accessing values in a date input widget
var dateInput = new mw.widgets.DateInputWidget();
var $label = $( '<p>' );
$( document.body ).append( $label, dateInput.$element );
dateInput.on( 'change', function () {
  // The value will always be a valid date or empty string, malformed input is ignored
  var date = dateInput.getValue();
  $label.text( 'Selected date: ' + ( date || '(none)' ) );
} );

Extends

Constructor

new mw.widgets.DateInputWidget(config) #

Create an mw.widgets.DateInputWidget object.

Parameters:

Name Type Attributes Description
config Object optional

Configuration options

Properties:
Name Type Attributes Default Description
precision string optional
 'day'

Date precision to use, 'day' or 'month'
value string optional

Day or month date (depending on precision), in the format 'YYYY-MM-DD' or 'YYYY-MM'. If not given or empty string, no date is selected.
inputFormat string optional

Date format string to use for the textual input field. Displayed while the widget is active, and the user can type in a date in this format. Should be short and easy to type. When not given, defaults to 'YYYY-MM-DD' or 'YYYY-MM', depending on precision.
displayFormat string optional

Date format string to use for the clickable label. Displayed while the widget is inactive. Should be as unambiguous as possible (for example, prefer to spell out the month, rather than rely on the order), even if that makes it longer. When not given, the default is language-specific.
longDisplayFormat boolean optional
 false

If a custom displayFormat is not specified, use unabbreviated day of the week and month names in the default language-specific displayFormat.
placeholderLabel string optional
 No date selected

Placeholder text shown when the widget is not selected. Default text taken from message mw-widgets-dateinput-no-date.
placeholderDateFormat string optional

User-visible date format string displayed in the textual input field when it's empty. Should be the same as inputFormat, but translated to the user's language. When not given, defaults to a translated version of 'YYYY-MM-DD' or 'YYYY-MM', depending on precision.
required boolean optional
 false

Mark the field as required. Implies indicator: 'required'.
mustBeAfter string optional

Validates the date to be after this. In the 'YYYY-MM-DD' format.
mustBeBefore string optional

Validates the date to be before this. In the 'YYYY-MM-DD' format.
$overlay jQuery optional

Render the calendar into a separate layer. This configuration is useful in cases where the expanded calendar is larger than its container. The specified overlay layer is usually on top of the container and has a larger area. By default, the calendar uses relative positioning.
calendar Object optional

Configuration options for the this input's CalendarWidget.
Mixes in:
Source:

Methods

blur() #

Source:

focus() #

Source:

getInputElement()protected #

Source:

getMoment() → {Object} #

Get the Moment object for current value.

Source:

Returns:

Moment object

Type
Object
Get the Moment object for current value.

getValidity() → {jQuery.Promise} #

Get the validity of current value.

This method returns a promise that resolves if the value is valid and rejects if it isn't. Uses #validateDate.

Source:

Returns:

A promise that resolves if the value is valid, rejects if not.

Type
jQuery.Promise
Get the validity of current value.

setValidityFlag(isValid) #

Sets the 'invalid' flag appropriately.

Parameters:

Name Type Attributes Description
isValid boolean optional

Optionally override validation result
Source:
Sets the 'invalid' flag appropriately.

setValue() #

Source:

Events

deactivate(userSelected) #

Fired when the widget is deactivated (when the calendar is closed). This can happen because the user selected a value, or because the user blurred the widget.

Parameters:

Name Type Description
userSelected boolean

Whether the deactivation happened because the user selected a value
Source:
Fired when the widget is deactivated (when the calendar is closed).