3 * MediaWiki Widgets – DateInputWidget class.
5 * @copyright 2016 MediaWiki Widgets Team and others; see AUTHORS.txt
6 * @license The MIT License (MIT); see LICENSE.txt
9 namespace MediaWiki\Widget
;
18 class DateInputWidget
extends \OOUI\TextInputWidget
{
20 protected $inputFormat = null;
21 protected $displayFormat = null;
22 protected $longDisplayFormat = null;
23 protected $placeholderLabel = null;
24 protected $placeholderDateFormat = null;
25 protected $precision = null;
26 protected $mustBeAfter = null;
27 protected $mustBeBefore = null;
28 protected $overlay = null;
31 * @param array $config Configuration options
32 * @param string $config['inputFormat'] Date format string to use for the textual input field.
33 * Displayed while the widget is active, and the user can type in a date in this format.
34 * Should be short and easy to type. (default: 'YYYY-MM-DD' or 'YYYY-MM', depending on
36 * @param string $config['displayFormat'] Date format string to use for the clickable label.
37 * while the widget is inactive. Should be as unambiguous as possible (for example, prefer
38 * to spell out the month, rather than rely on the order), even if that makes it longer.
39 * Applicable only if the widget is infused. (default: language-specific)
40 * @param string $config['longDisplayFormat'] If a custom displayFormat is not specified, use
41 * unabbreviated day of the week and month names in the default language-specific
42 * displayFormat. (default: false)
43 * @param string $config['placeholderLabel'] Placeholder text shown when the widget is not
44 * selected. Applicable only if the widget is infused. (default: taken from message
45 * `mw-widgets-dateinput-no-date`)
46 * @param string $config['placeholderDateFormat'] User-visible date format string displayed
47 * in the textual input field when it's empty. Should be the same as `inputFormat`, but
48 * translated to the user's language. (default: 'YYYY-MM-DD' or 'YYYY-MM', depending on
50 * @param string $config['precision'] Date precision to use, 'day' or 'month' (default: 'day')
51 * @param string $config['mustBeAfter'] Validates the date to be after this.
52 * In the 'YYYY-MM-DD' or 'YYYY-MM' format, depending on `precision`.
53 * @param string $config['mustBeBefore'] Validates the date to be before this.
54 * In the 'YYYY-MM-DD' or 'YYYY-MM' format, depending on `precision`.
55 * @param string $config['overlay'] The jQuery selector for the overlay layer on which to render
56 * the calendar. This configuration is useful in cases where the expanded calendar is larger
57 * than its container. The specified overlay layer is usually on top of the container and has
58 * a larger area. Applicable only if the widget is infused. By default, the calendar uses
59 * relative positioning.
61 public function __construct( array $config = [] ) {
62 $config = array_merge( [
63 // Default config values
65 'longDisplayFormat' => false,
69 if ( isset( $config['inputFormat'] ) ) {
70 $this->inputFormat
= $config['inputFormat'];
72 if ( isset( $config['placeholderDateFormat'] ) ) {
73 $this->placeholderDateFormat
= $config['placeholderDateFormat'];
75 $this->precision
= $config['precision'];
76 if ( isset( $config['mustBeAfter'] ) ) {
77 $this->mustBeAfter
= $config['mustBeAfter'];
79 if ( isset( $config['mustBeBefore'] ) ) {
80 $this->mustBeBefore
= $config['mustBeBefore'];
83 // Properties stored for the infused JS widget
84 if ( isset( $config['displayFormat'] ) ) {
85 $this->displayFormat
= $config['displayFormat'];
87 if ( isset( $config['longDisplayFormat'] ) ) {
88 $this->longDisplayFormat
= $config['longDisplayFormat'];
90 if ( isset( $config['placeholderLabel'] ) ) {
91 $this->placeholderLabel
= $config['placeholderLabel'];
93 if ( isset( $config['overlay'] ) ) {
94 $this->overlay
= $config['overlay'];
97 // Set up placeholder text visible if the browser doesn't override it (logic taken from JS)
98 if ( $this->placeholderDateFormat
!== null ) {
99 $placeholder = $this->placeholderDateFormat
;
100 } elseif ( $this->inputFormat
!== null ) {
101 // We have no way to display a translated placeholder for custom formats
104 $placeholder = wfMessage( "mw-widgets-dateinput-placeholder-$this->precision" )->text();
107 $config = array_merge( [
108 // Processed config values
109 'placeholder' => $placeholder,
112 // Parent constructor
113 parent
::__construct( $config );
115 // Calculate min/max attributes (which are skipped by TextInputWidget) and add to <input>
116 // min/max attributes are inclusive, but mustBeAfter/Before are exclusive
117 if ( $this->mustBeAfter
!== null ) {
118 $min = new DateTime( $this->mustBeAfter
);
119 $min = $min->modify( '+1 day' );
120 $min = $min->format( 'Y-m-d' );
121 $this->input
->setAttributes( [ 'min' => $min ] );
123 if ( $this->mustBeBefore
!== null ) {
124 $max = new DateTime( $this->mustBeBefore
);
125 $max = $max->modify( '-1 day' );
126 $max = $max->format( 'Y-m-d' );
127 $this->input
->setAttributes( [ 'max' => $max ] );
131 $this->addClasses( [ 'mw-widget-dateInputWidget' ] );
134 protected function getJavaScriptClassName() {
135 return 'mw.widgets.DateInputWidget';
138 public function getConfig( &$config ) {
139 if ( $this->inputFormat
!== null ) {
140 $config['inputFormat'] = $this->inputFormat
;
142 if ( $this->displayFormat
!== null ) {
143 $config['displayFormat'] = $this->displayFormat
;
145 if ( $this->longDisplayFormat
!== null ) {
146 $config['longDisplayFormat'] = $this->longDisplayFormat
;
148 if ( $this->placeholderLabel
!== null ) {
149 $config['placeholderLabel'] = $this->placeholderLabel
;
151 if ( $this->placeholderDateFormat
!== null ) {
152 $config['placeholderDateFormat'] = $this->placeholderDateFormat
;
154 if ( $this->precision
!== null ) {
155 $config['precision'] = $this->precision
;
157 if ( $this->mustBeAfter
!== null ) {
158 $config['mustBeAfter'] = $this->mustBeAfter
;
160 if ( $this->mustBeBefore
!== null ) {
161 $config['mustBeBefore'] = $this->mustBeBefore
;
163 if ( $this->overlay
!== null ) {
164 $config['overlay'] = $this->overlay
;
166 return parent
::getConfig( $config );
169 public function getInputElement( $config ) {
170 // Inserts date/month type attribute
171 return parent
::getInputElement( $config )
173 'type' => ( $config['precision'] === 'month' ) ?
'month' : 'date'