Bartosz Dziewoński has uploaded a new change for review.
https://gerrit.wikimedia.org/r/228176
Change subject: mw.widgets.DateInputWidget: Start with no date selected, rather
than today
......................................................................
mw.widgets.DateInputWidget: Start with no date selected, rather than today
* We actually didn't allow not having a date selected before, change
that. Display an appropriate label when this is the case.
* When the field is empty and gets focus, set the date to today, on
the assumption that this is likely what the user wants. Permit
emptying the field, though.
Bonus cleanup:
* Display a placeholder with the format on the text input.
* Correct some documentation.
* Correct some bad copy-paste in styles which caused disabled widget
to not display correctly.
Change-Id: I7a1f7ff20eb6fc21ea59ecfe48deb9305c8e29e8
---
M languages/i18n/en.json
M languages/i18n/qqq.json
M resources/Resources.php
M resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
M resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
5 files changed, 59 insertions(+), 30 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/76/228176/1
diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 508e254..f59df68 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -3805,6 +3805,7 @@
"special-characters-title-endash": "en dash",
"special-characters-title-emdash": "em dash",
"special-characters-title-minus": "minus sign",
+ "mw-widgets-dateinput-no-date": "No date selected",
"mw-widgets-titleinput-description-new-page": "page does not exist yet",
"mw-widgets-titleinput-description-redirect": "redirect to $1"
}
diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index a0cfab2..53f5828 100644
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -3976,6 +3976,7 @@
"special-characters-title-endash": "Title tooltip for the en dash
character (–); See https://en.wikipedia.org/wiki/Dash";,
"special-characters-title-emdash": "Title tooltip for the em dash
character (—); See https://en.wikipedia.org/wiki/Dash";,
"special-characters-title-minus": "Title tooltip for the minus sign
character (−), not to be confused with a hyphen",
+ "mw-widgets-dateinput-no-date": "Label of a date input field when no
date has been selected.",
"mw-widgets-titleinput-description-new-page": "Description label for a
new page in the title input widget.",
"mw-widgets-titleinput-description-redirect": "Description label for a
redirect in the title input widget."
}
diff --git a/resources/Resources.php b/resources/Resources.php
index fb0971e..a0c0744 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1809,6 +1809,7 @@
'oojs-ui',
),
'messages' => array(
+ 'mw-widgets-dateinput-no-date',
'mw-widgets-titleinput-description-new-page',
'mw-widgets-titleinput-description-redirect',
),
diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
index 1820dda..4920e3c 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.js
@@ -16,8 +16,8 @@
* @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} [value] 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.
* @cfg {string} [inputFormat] 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
@@ -32,17 +32,19 @@
config = config || {};
// Properties (must be set before parent constructor, which
calls #setValue)
+ this.inputFormat = config.inputFormat;
+ this.displayFormat = config.displayFormat;
this.handle = new OO.ui.LabelWidget();
- this.textInput = new OO.ui.TextInputWidget( {
- validate: this.validateDate.bind( this )
- } );
this.calendar = new mw.widgets.CalendarWidget( {
precision: config.precision
} );
+ this.textInput = new OO.ui.TextInputWidget( {
+ validate: this.validateDate.bind( this ),
+ // #getInputFormat needs calendar to be set up
+ placeholder: this.getInputFormat()
+ } );
this.inCalendar = 0;
this.inTextInput = 0;
- this.inputFormat = config.inputFormat;
- this.displayFormat = config.displayFormat;
// Parent constructor
mw.widgets.DateInputWidget.parent.call( this, config );
@@ -118,7 +120,10 @@
value = this.textInput.getValue();
this.inTextInput++;
this.textInput.isValid().done( function ( valid ) {
- if ( valid ) {
+ if ( value === '' ) {
+ // No date selected
+ widget.setValue( '' );
+ } else if ( valid ) {
// Well-formed date value, parse and set it
var mom = moment( value,
widget.getInputFormat() );
// Use English locale to avoid number formatting
@@ -141,21 +146,16 @@
* @inheritdoc
*/
mw.widgets.DateInputWidget.prototype.setValue = function ( value ) {
- if ( value === undefined || value === null ) {
- // Default to today
- value = this.calendar.getDate();
- }
-
var oldValue = this.value;
mw.widgets.DateInputWidget.parent.prototype.setValue.call(
this, value );
if ( this.value !== oldValue ) {
if ( !this.inCalendar ) {
- this.calendar.setDate( this.getValue() );
+ this.calendar.setDate( this.getValue() === '' ?
null : this.getValue() );
}
if ( !this.inTextInput ) {
- this.textInput.setValue(
this.getMoment().format( this.getInputFormat() ) );
+ this.textInput.setValue( this.getValue() === ''
? '' : this.getMoment().format( this.getInputFormat() ) );
}
}
@@ -179,14 +179,22 @@
};
/**
- * Deactivate this input field for data entry. Opens the calendar and
shows the text field.
+ * Deactivate this input field for data entry. Closes the calendar and
hides the text field.
*
* @private
*/
mw.widgets.DateInputWidget.prototype.deactivate = function () {
- this.textInput.setValue( this.getMoment().format(
this.getInputFormat() ) );
- this.calendar.setDate( this.getValue() );
- this.handle.setLabel( this.getMoment().format(
this.getDisplayFormat() ) );
+ if ( this.getValue() === '' ) {
+ this.textInput.setValue( '' );
+ this.calendar.setDate( null );
+ this.handle.setLabel( mw.msg(
'mw-widgets-dateinput-no-date' ) );
+ this.$element.addClass(
'mw-widget-dateInputWidget-empty' );
+ } else {
+ this.textInput.setValue( this.getMoment().format(
this.getInputFormat() ) );
+ this.calendar.setDate( this.getValue() );
+ this.handle.setLabel( this.getMoment().format(
this.getDisplayFormat() ) );
+ this.$element.removeClass(
'mw-widget-dateInputWidget-empty' );
+ }
this.$element.removeClass( 'mw-widget-dateInputWidget-active' );
this.handle.toggle( true );
@@ -195,12 +203,21 @@
};
/**
- * Activate this input field for data entry. Closes the calendar and
hides the text field.
+ * Activate this input field for data entry. Opens the calendar and
shows the text field.
*
* @private
*/
mw.widgets.DateInputWidget.prototype.activate = function () {
- this.setValue( this.getValue() );
+ if ( this.getValue() !== '' ) {
+ this.setValue( this.getValue() );
+ } else {
+ // Setting today's date is probably more helpful than
leaving the widget empty? We could just
+ // display the placeholder and leave it there, but it's
likely that at least the year will be
+ // the same as today's.
+
+ // Use English locale to avoid number formatting
+ this.setValue( moment().locale( 'en' ).format(
this.getInternalFormat() ) );
+ }
this.$element.addClass( 'mw-widget-dateInputWidget-active' );
this.handle.toggle( false );
@@ -339,9 +356,14 @@
/**
* @private
- * @param {string} date Date string, must be in 'YYYY-MM-DD' or
'YYYY-MM' format to be valid
+ * @param {string} date Date string, to be valid, must be empty (no
date selected) or in
+ * 'YYYY-MM-DD' or 'YYYY-MM' format to be valid
*/
mw.widgets.DateInputWidget.prototype.validateDate = function ( date ) {
+ if ( date === '' ) {
+ return true;
+ }
+
// "Half-strict mode": for example, for the format
'YYYY-MM-DD', 2015-1-3 instead of 2015-01-03
// is okay, but 2015-01 isn't, and neither is 2015-01-foo. Use
Moment's "fuzzy" mode and check
// parsing flags for the details (stoled from implementation of
#isValid).
diff --git a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
index 33e3406..f87869c 100644
--- a/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
+++ b/resources/src/mediawiki.widgets/mw.widgets.DateInputWidget.less
@@ -39,7 +39,7 @@
.oo-ui-box-sizing(border-box);
}
- &.oo-ui-widget-disabled .oo-ui-dropdownWidget-handle {
+ &.oo-ui-widget-disabled .mw-widget-dateInputWidget-handle {
cursor: default;
}
@@ -59,10 +59,6 @@
border: 1px solid #ccc;
border-radius: 0.1em;
line-height: 1.275em;
-
- &:hover {
- border-color: #347bff;
- }
}
> .oo-ui-textInputWidget input {
@@ -92,16 +88,24 @@
}
}
- &:hover .oo-ui-dropdownWidget-handle {
- border-color: #aaa;
+ &.oo-ui-widget-enabled {
+ .mw-widget-dateInputWidget-handle:hover {
+ border-color: #347bff;
+ }
}
&.oo-ui-widget-disabled {
- .oo-ui-dropdownWidget-handle {
+ .mw-widget-dateInputWidget-handle {
color: #ccc;
text-shadow: 0 1px 1px #fff;
border-color: #ddd;
background-color: #f3f3f3;
}
}
+
+ &-empty {
+ .mw-widget-dateInputWidget-handle {
+ color: #ccc;
+ }
+ }
}
--
To view, visit https://gerrit.wikimedia.org/r/228176
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I7a1f7ff20eb6fc21ea59ecfe48deb9305c8e29e8
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Bartosz Dziewoński <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
