/**
* 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
* @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;