* } );
*
* @class
- * @extends OO.ui.InputWidget
+ * @extends OO.ui.TextInputWidget
* @mixins OO.ui.mixin.IndicatorElement
*
* @constructor
// Properties (must be set before parent constructor, which calls #setValue)
this.$handle = $( '<div>' );
- this.label = new OO.ui.LabelWidget();
+ this.innerLabel = new OO.ui.LabelWidget();
this.textInput = new OO.ui.TextInputWidget( {
required: config.required,
placeholder: placeholderDateFormat,
this.longDisplayFormat = config.longDisplayFormat;
this.required = config.required;
this.placeholderLabel = config.placeholderLabel;
-
// Validate and set min and max dates as properties
+
if ( config.mustBeAfter !== undefined ) {
mustBeAfter = moment( config.mustBeAfter, 'YYYY-MM-DD' );
if ( mustBeAfter.isValid() ) {
this.mustBeBefore = mustBeBefore;
}
}
-
// Parent constructor
mw.widgets.DateInputWidget.parent.call( this, config );
// Move 'tabindex' from this.$input (which is invisible) to the visible handle
this.setTabIndexedElement( this.$handle );
this.$handle
- .append( this.label.$element, this.$indicator )
+ .append( this.innerLabel.$element, this.$indicator )
.addClass( 'mw-widget-dateInputWidget-handle' );
this.calendar.$element
.addClass( 'mw-widget-dateInputWidget-calendar' );
/* Inheritance */
- OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.InputWidget );
+ OO.inheritClass( mw.widgets.DateInputWidget, OO.ui.TextInputWidget );
OO.mixinClass( mw.widgets.DateInputWidget, OO.ui.mixin.IndicatorElement );
/* Methods */
if ( this.getValue() === '' ) {
this.textInput.setValue( '' );
this.calendar.setDate( null );
- this.label.setLabel( this.placeholderLabel );
+ this.innerLabel.setLabel( this.placeholderLabel );
this.$element.addClass( 'mw-widget-dateInputWidget-empty' );
} else {
moment = this.getMoment();
if ( !this.inCalendar ) {
this.calendar.setDate( this.getValue() );
}
- this.label.setLabel( moment.format( this.getDisplayFormat() ) );
+ this.innerLabel.setLabel( moment.format( this.getDisplayFormat() ) );
this.$element.removeClass( 'mw-widget-dateInputWidget-empty' );
}
};
@indicator-size: unit( 12 / 16 / 0.8, em );
.mw-widget-dateInputWidget {
- display: inline-block;
- position: relative;
- width: 21em;
- margin-top: 0.25em;
- .oo-ui-inline-spacing( 0.5em );
- margin-bottom: 0.25em;
- margin-left: 0;
-
- &-handle {
+ &.oo-ui-textInputWidget {
+ display: inline-block;
+ position: relative;
+ width: 21em;
+ margin-top: 0.25em;
+ .oo-ui-inline-spacing( 0.5em );
+ margin-bottom: 0.25em;
+ margin-left: 0;
+ }
+
+ &-handle,
+ &.oo-ui-textInputWidget input {
background-color: #fff;
display: inline-block;
position: relative;
border-radius: 2px;
outline: 0;
line-height: 1.275;
+ /**
+ * Ensures non-infused and infused widget have the same height.
+ * Equal to line height + top padding + bottom padding
+ */
+ height: 2.275em;
> .oo-ui-labelElement-label {
padding: 0;