Merge "SpecialMovepage: Convert form to use OOUI controls"
[lhc/web/wiklou.git] / resources / src / mediawiki.widgets / mw.widgets.CalendarWidget.js
index 9016e89..d519c0d 100644 (file)
@@ -10,6 +10,8 @@
        /**
         * Creates an mw.widgets.CalendarWidget object.
         *
+        * You will most likely want to use mw.widgets.DateInputWidget instead of CalendarWidget directly.
+        *
         * @class
         * @extends OO.ui.Widget
         * @mixins OO.ui.mixin.TabIndexedElement
@@ -17,8 +19,9 @@
         * @constructor
         * @param {Object} [config] Configuration options
         * @cfg {string} [precision='day'] Date precision to use, 'day' or 'month'
-        * @cfg {string|null} [date=null] Day or month date (depending on `precision`), in the
-        *     format 'YYYY-MM-DD' or 'YYYY-MM'. When null, defaults to current date.
+        * @cfg {string|null} [date=null] Day or month date (depending on `precision`), in the format
+        *     'YYYY-MM-DD' or 'YYYY-MM'. When null, the calendar will show today's date, but not select
+        *     it.
         */
        mw.widgets.CalendarWidget = function MWWCalendarWidget( config ) {
                // Config initialization
 
                if (
                        this.displayLayer === this.previousDisplayLayer &&
+                       this.date === this.previousDate &&
                        this.previousMoment &&
                        this.previousMoment.isSame( this.moment, this.precision === 'month' ? 'month' : 'day' )
                ) {
                }
                this.$oldBody = this.$body.addClass( 'mw-widget-calendarWidget-old-body' );
                // Clone without children
-               this.$body = $( this.$body[0].cloneNode( false ) )
+               this.$body = $( this.$body[ 0 ].cloneNode( false ) )
                        .removeClass( 'mw-widget-calendarWidget-old-body' )
                        .toggleClass( 'mw-widget-calendarWidget-body-month', this.displayLayer === 'month' )
                        .toggleClass( 'mw-widget-calendarWidget-body-year', this.displayLayer === 'year' )
 
                this.previousMoment = moment( this.moment );
                this.previousDisplayLayer = this.displayLayer;
+               this.previousDate = this.date;
 
                this.$body.on( 'click', this.onBodyClick.bind( this ) );
        };
 
        /**
         * Handle click events on the "up" button, switching to less precise view.
+        *
         * @private
         */
        mw.widgets.CalendarWidget.prototype.onUpButtonClick = function () {
 
        /**
         * Handle click events on the "previous" button, switching to previous pane.
+        *
         * @private
         */
        mw.widgets.CalendarWidget.prototype.onPrevButtonClick = function () {
 
        /**
         * Handle click events on the "next" button, switching to next pane.
+        *
         * @private
         */
        mw.widgets.CalendarWidget.prototype.onNextButtonClick = function () {
         * Handle click events anywhere in the body of the widget, which contains the matrix of days,
         * months or years to choose. Maybe change the pane or switch to more precise view, depending on
         * what gets clicked.
+        *
         * @private
         */
        mw.widgets.CalendarWidget.prototype.onBodyClick = function ( e ) {
         * Set the date.
         *
         * @param {string|null} [date=null] Day or month date, in the format 'YYYY-MM-DD' or 'YYYY-MM'.
-        *     When null, defaults to current date. When invalid, the date is not changed.
+        *     When null, the calendar will show today's date, but not select it. When invalid, the date
+        *     is not changed.
         */
        mw.widgets.CalendarWidget.prototype.setDate = function ( date ) {
                var mom = date !== null ? moment( date, this.getDateFormat() ) : moment();
                if ( mom.isValid() ) {
                        this.moment = mom;
-                       this.setDateFromMoment();
+                       if ( date !== null ) {
+                               this.setDateFromMoment();
+                       } else if ( this.date !== null ) {
+                               this.date = null;
+                               this.emit( 'change', this.date );
+                       }
                        this.displayLayer = this.getDisplayLayers()[ 0 ];
                        this.updateUI();
                }
         * Get current date, in the format 'YYYY-MM-DD' or 'YYYY-MM', depending on precision. Digits will
         * not be localised.
         *
-        * @returns {string} Date string
+        * @returns {string|null} Date string
         */
        mw.widgets.CalendarWidget.prototype.getDate = function () {
                return this.date;