feat: input-date: Disclose when date was reverted to previous

components/inputs/demo/input-date.html

@@ -26,10 +26,10 @@ <h2>Value Specified</h2>
 				</template>
 			</d2l-demo-snippet>
 
-			<h2>Min and Max Value</h2>
+			<h2>Min and Max Value, Required</h2>
 			<d2l-demo-snippet>
 				<template>
-					<d2l-input-date label="Date" max-value="2018-09-30" min-value="2018-08-27" value="2018-09-08"></d2l-input-date>
+					<d2l-input-date label="Date" max-value="2018-09-30" min-value="2018-08-27" value="2018-08-27" required></d2l-input-date>
 				</template>
 			</d2l-demo-snippet>
 

components/inputs/input-date.js

@@ -5,7 +5,7 @@ import '../dropdown/dropdown-content.js';
 import '../icons/icon.js';
 import '../tooltip/tooltip.js';
 import './input-text.js';
-import { css, html, LitElement } from 'lit';
+import { css, html, LitElement, nothing } from 'lit';
 import { formatDate, getDateTimeDescriptor, parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
 import { formatDateInISO, getDateFromISODate, getToday } from '../../helpers/dateTime.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
@@ -89,7 +89,9 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			_formattedValue: { type: String },
 			_inputTextFocusShowTooltip: { type: Boolean },
 			_showInfoTooltip: { type: Boolean },
-			_shownValue: { type: String }
+			_shownValue: { type: String },
+			_showRevertInstructions: { state: true },
+			_showRevertTooltip: { state: true }
 		};
 	}
 
@@ -159,10 +161,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this._inputId = getUniqueId();
 		this._inputTextFocusMouseup = false;
 		this._inputTextFocusShowTooltip = true; // true by default so hover triggers tooltip
-		this._namespace = 'components.input-date';
 		this._openCalendarOnly = false;
 		this._openedOnKeydown = false;
 		this._showInfoTooltip = true;
+		this._showRevertInstructions = false;
+		this._showRevertTooltip = false;
 		this._shownValue = '';
 
 		this._dateTimeDescriptor = getDateTimeDescriptor();
@@ -183,11 +186,11 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			const minDate = this.minValue ? formatDate(getDateFromISODate(this.minValue), { format: 'medium' }) : null;
 			const maxDate = this.maxValue ? formatDate(getDateFromISODate(this.maxValue), { format: 'medium' }) : null;
 			if (minDate && maxDate) {
-				return this.localize(`${this._namespace}.errorOutsideRange`, { minDate, maxDate });
+				return this.localize('components.input-date.errorOutsideRange', { minDate, maxDate });
 			} else if (maxDate) {
-				return this.localize(`${this._namespace}.errorMaxDateOnly`, { maxDate });
+				return this.localize('components.input-date.errorMaxDateOnly', { maxDate });
 			} else if (this.minValue) {
-				return this.localize(`${this._namespace}.errorMinDateOnly`, { minDate });
+				return this.localize('components.input-date.errorMinDateOnly', { minDate });
 			}
 		}
 		return super.validationMessage;
@@ -237,12 +240,18 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		const formattedWideDate = formatISODateInUserCalDescriptor('2323-12-23');
 		const shortDateFormat = (this._dateTimeDescriptor.formats.dateFormats.short).toUpperCase();
 
-		const clearButton = !this.required ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.clear`)}" @click="${this._handleClear}"></d2l-button-subtle>` : null;
-		const nowButton = this.hasNow ? html`<d2l-button-subtle text="${this.localize(`${this._namespace}.now`)}" @click="${this._handleSetToNow}"></d2l-button-subtle>` : null;
+		const clearButton = !this.required ? html`<d2l-button-subtle text="${this.localize('components.input-date.clear')}" @click="${this._handleClear}"></d2l-button-subtle>` : null;
+		const nowButton = this.hasNow ? html`<d2l-button-subtle text="${this.localize('components.input-date.now')}" @click="${this._handleSetToNow}"></d2l-button-subtle>` : null;
 		const icon = (this.invalid || this.childErrors.size > 0)
 			? html`<d2l-icon icon="tier1:alert" slot="left" style="${styleMap({ color: 'var(--d2l-color-cinnabar)' })}"></d2l-icon>`
 			: html`<d2l-icon icon="tier1:calendar" slot="left"></d2l-icon>`;
+
 		const errorTooltip = (this.validationError && !this.opened && this.childErrors.size === 0) ? html`<d2l-tooltip align="start" announced for="${this._inputId}" state="error" class="vdiff-target">${this.validationError}</d2l-tooltip>` : null;
+		const revertTooltip = this._getRevertTooltip(shortDateFormat);
+
+		const inputTextInstructions = (this._showInfoTooltip && !errorTooltip && !revertTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip)
+			? `${this.localize('components.input-date.useDateFormat', { format: shortDateFormat })} ${this.localize('components.input-date.keyboardInstructions')}`
+			: undefined;
 
 		const dropdownContent = this._dropdownFirstOpened ? html`
 			<d2l-dropdown-content
@@ -265,7 +274,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 					min-value="${ifDefined(this.minValue)}"
 					selected-value="${ifDefined(this._shownValue)}">
 					<div class="d2l-calendar-slot-buttons">
-						<d2l-button-subtle text="${this.localize(`${this._namespace}.today`)}" @click="${this._handleSetToToday}"></d2l-button-subtle>
+						<d2l-button-subtle text="${this.localize('components.input-date.today')}" @click="${this._handleSetToToday}"></d2l-button-subtle>
 						${nowButton}
 						${clearButton}
 					</div>
@@ -277,14 +286,15 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 				<div>${shortDateFormat}</div>
 			</div>
 			${errorTooltip}
+			${revertTooltip}
 			<d2l-dropdown ?disabled="${this.disabled || this.skeleton}" no-auto-open ?prefer-fixed-positioning="${this.preferFixedPositioning}">
 				<d2l-input-text
 					?novalidate="${this.noValidate}"
 					aria-invalid="${this.invalid ? 'true' : 'false'}"
 					@blur="${this._handleInputTextBlur}"
 					@change="${this._handleChange}"
 					class="d2l-dropdown-opener vdiff-target"
-					instructions="${ifDefined((this._showInfoTooltip && !errorTooltip && !this.invalid && this.childErrors.size === 0 && this._inputTextFocusShowTooltip) ? this.localize(`${this._namespace}.openInstructions`, { format: shortDateFormat }) : undefined)}"
+					instructions="${ifDefined(inputTextInstructions)}"
 					?disabled="${this.disabled}"
 					@focus="${this._handleInputTextFocus}"
 					@keydown="${this._handleKeydown}"
@@ -349,15 +359,41 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 		this._dropdown.close();
 	}
 
+	_getRevertTooltip(shortDateFormat) {
+		if (this.opened || this.invalid || (!this._showRevertInstructions && !this._showRevertTooltip)) return null;
+
+		const revertMessage = this.localize('components.input-date.revert', { label: this.label });
+		const dateFormat = this.localize('components.input-date.useDateFormat', { format: shortDateFormat });
+		const keyboardInstructions = this._showRevertInstructions ? this.localize('components.input-date.keyboardInstructions') : nothing;
+
+		return html`
+			<d2l-tooltip 
+				align="start" 
+				announced 
+				class="vdiff-target" 
+				for="${this._inputId}"
+				?force-show="${this._showRevertTooltip}">
+				<div>${revertMessage}</div>
+				<br>
+				<div>
+					${dateFormat}
+					${keyboardInstructions}
+				</div>
+			</d2l-tooltip>
+		`;
+	}
+
 	_handleBlur() {
 		this._showInfoTooltip = true;
 		this.requestValidate(true);
 	}
 
 	async _handleChange() {
+		this._showRevertTooltip = false;
 		const value = this._textInput.value;
+		const isNewVal = value !== this.value;
 		if (!value && !this.required) {
-			if (value !== this.value) {
+			if (isNewVal) {
 				await this._updateValueDispatchEvent('');
 				if (this._calendar) {
 					await this.updateComplete;
@@ -373,6 +409,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 			await this._updateValueDispatchEvent(formatDateInISO({ year: date.getFullYear(), month: (parseInt(date.getMonth()) + 1), date: date.getDate() }));
 		} catch {
 			// leave value the same when invalid input
+			if (isNewVal) this._showRevertTooltip = true;
 		}
 		this._setFormattedValue(); // keep out here in case parseDate is same date, e.g., user adds invalid text to end of parseable date
 		if (this._calendar) {
@@ -390,6 +427,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	}
 
 	async _handleDateSelected(e) {
+		this._showRevertTooltip = false;
 		const value = e.target.selectedValue;
 		await this._updateValueDispatchEvent(value);
 		if (this._dropdown) {
@@ -448,9 +486,14 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
 	_handleInputTextBlur() {
 		this._inputTextFocusMouseup = false;
 		this._inputTextFocusShowTooltip = true;
+		this._showRevertInstructions = false;
 	}
 
 	_handleInputTextFocus() {
+		if (this._showRevertTooltip) {
+			this._showRevertInstructions = true;
+			this._showRevertTooltip = false;
+		}
 		this._formattedValue = this._shownValue ? formatISODateInUserCalDescriptor(this._shownValue) : '';
 
 		// hide tooltip when focus, wait to see if click happened, then show

components/inputs/test/input-date.vdiff.js

@@ -1,5 +1,5 @@
 import '../input-date.js';
-import { clickElem, expect, fixture, focusElem, html, nextFrame, oneEvent, sendKeys, sendKeysElem } from '@brightspace-ui/testing';
+import { aTimeout, clickElem, expect, fixture, focusElem, html, nextFrame, oneEvent, sendKeys, sendKeysElem } from '@brightspace-ui/testing';
 import { reset, useFakeTimers } from 'sinon';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { inlineHelpFixtures } from './input-shared-content.js';
@@ -351,6 +351,68 @@ describe('d2l-input-date', () => {
 				await sendKeysElem(elem, 'press', 'Enter');
 				await expect(elem).to.be.golden();
 			});
+
+			it('click then click away', async() => {
+				await clickElem(elem);
+				await clickElem(document.body);
+				await expect(elem).to.be.golden();
+			});
+
+			it('open then close', async() => {
+				await sendKeysElem(elem, 'press', 'Enter');
+				sendKeys('press', 'Escape');
+				await oneEvent(elem, 'd2l-tooltip-show');
+				await expect(elem).to.be.golden();
+			});
+		});
+
+		describe('required min-max revert', () => {
+
+			it('delete text input then blur', async() => {
+				const elem = await fixture(create({ label: 'Date', labelHidden: false, required: true, value: '2012-01-01', maxValue: '2018-02-27', minValue: '2018-02-13' }));
+				await focusElem(elem);
+				await sendKeysElem(elem, 'press', 'Tab');
+
+				await focusElem(elem);
+				await sendKeysElem(elem, 'press', 'Backspace');
+				await sendKeys('press', 'Tab');
+				await expect(elem).to.be.golden();
+			});
+
+		});
+
+		describe('required revert', () => {
+
+			let elem;
+			beforeEach(async() => {
+				elem = await fixture(create({ label: 'Date', labelHidden: false, required: true, value: '2020-01-01' }));
+			});
+
+			it('delete text input then blur', async() => {
+				await focusElem(elem);
+				await sendKeysElem(elem, 'press', 'Backspace');
+				await sendKeys('press', 'Tab');
+				await expect(elem).to.be.golden();
+			});
+
+			it('delete text input then blur then re-focus', async() => {
+				await focusElem(elem);
+				await sendKeysElem(elem, 'press', 'Backspace');
+				await sendKeys('press', 'Tab');
+				await focusElem(elem);
+				await aTimeout(100);
+				await expect(elem).to.be.golden();
+			});
+
+			it('delete text input then blur then re-focus then blur', async() => {
+				await focusElem(elem);
+				await sendKeysElem(elem, 'press', 'Backspace');
+				await sendKeys('press', 'Tab');
+				await focusElem(elem);
+				await sendKeys('press', 'Tab');
+				await aTimeout(100);
+				await expect(elem).to.be.golden();
+			});
 		});
 	});
 

lang/ar.js

@@ -21,14 +21,14 @@
 	"components.filter.clearAnnounce": "جارٍ مسح عوامل التصفية لـ: {filterName}",
 	"components.filter.clearDescription": "مسح عوامل التصفية لـ: {filterName}",
 	"components.filter.loading": "يتم تحميل عوامل التصفية",
 	"components.filter.filterCountDescription": "{number, plural, =0 {لم يتم تطبيق عوامل تصفية.} one {تم تطبيق {number} عامل تصفية} ‏other {تم تطبيق {number} من عوامل التصفية.}}",
 	"components.filter.filters": "عوامل التصفية",
 	"components.filter.noFilters": "ما من عوامل تصفية متوفرة",
 	"components.filter.searchResults": "{number, plural, =0 {ما من نتائج بحث} one {{number} نتيجة بحث}‏ other {{number} من نتائج البحث}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. تظهر عوامل التصفية المحددة أولاً.",
 	"components.filter.singleDimensionDescription": "التصفية حسب: {filterName}",
 	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, =1 {آخر ساعة} other {آخر {num} من الساعات}}",
 	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {يوم} one {آخر {num} يوم} other {آخر {num} من الأيام}}",
 	"components.filter-dimension-set-date-text-value.textMonths": "آخر {num} من الأشهر",
 	"components.filter-dimension-set-date-time-range-value.label": "{text}، التوسيع لاختيار التواريخ",
 	"components.filter-dimension-set-date-time-range-value.valueTextRange": "{startValue} إلى {endValue}",
@@ -44,7 +44,7 @@
 	"components.form-element.input.text.tooShort": "يجب أن تتألف التسمية {label} من {minlength} من الأحرف على الأقل",
 	"components.form-element.input.url.typeMismatch": "عنوان URL غير صالح",
 	"components.form-element.valueMissing": "{label} مطلوبة",
 	"components.form-error-summary.errorSummary": "{count, plural, one {تم العثور على {count} خطأ في المعلومات التي أرسلتها} other {تم العثور على {count} من الأخطاء في المعلومات التي أرسلتها}}",
 	"components.form-error-summary.text": "تبديل تفاصيل الخطأ",
 	"components.input-color.backgroundColor": "لون الخلفية",
 	"components.input-color.foregroundColor": "لون المقدمة",
@@ -67,9 +67,11 @@
 	"components.input-date.errorMaxDateOnly": "يجب أن يكون التاريخ في {maxDate} أو قبله",
 	"components.input-date.errorMinDateOnly": "يجب أن يكون التاريخ في {minDate} أو بعده",
 	"components.input-date.errorOutsideRange": "يجب أن يكون التاريخ بين {minDate} و{maxDate}",
-	"components.input-date.openInstructions": "استخدم تنسيق التاريخ {format}. انتقل إلى الأسفل أو اضغط على Enter للوصول إلى التقويم المصغّر.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "الآن",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "اليوم",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "يقبل هذا الحقل قيم الأعداد الصحيحة فقط (بدون أعداد عشرية)",
 	"components.input-number.hintDecimalDuplicate": "يوجد عدد عشري في هذا الرقم",
 	"components.input-number.hintDecimalIncorrectComma": "لإضافة عدد عشري، استخدم حرف الفاصلة \",\"",
@@ -106,8 +108,8 @@
 	"components.overflow-group.moreActions": "مزيد من الإجراءات",
 	"components.pager-load-more.action": "تحميل المزيد",
 	"components.pager-load-more.action-with-page-size": "تحميل {count} إضافي",
 	"components.pageable.info": "{count, plural, one {{countFormatted} مادة واحد} other {{countFormatted} من المواد}}",
 	"components.pageable.info-with-total": "{totalCount, plural, one {{countFormatted} من أصل {totalCountFormatted} مادة واحدة} other {{countFormatted} من أصل {totalCountFormatted} من المواد}}",
 	"components.pager-load-more.status-loading": "تحميل المزيد من المواد",
 	"components.selection.action-hint": "حدد مادة لتنفيذ هذا الإجراء.",
 	"components.selection.select-all": "تحديد الكل",

lang/cy.js

@@ -21,13 +21,13 @@
 	"components.filter.clearAnnounce": "Wrthi’n clirio hidlwyr ar gyfer: {filterName}",
 	"components.filter.clearDescription": "Wrthi’n clirio hidlwyd ar gyfer: {filterName}",
 	"components.filter.loading": "Wrthi’n llwytho hidlyddion",
 	"components.filter.filterCountDescription": "{number, plural, =0 {Dim hidlyddion wedi’i gweithredu.} one {{number} hidlydd wedi’i weithredu.} other {{number} hidlyddion wedi’u gweithredu.}}",
 	"components.filter.filters": "Hidlyddion",
 	"components.filter.noFilters": "Dim hidlyddion ar gael",
 	"components.filter.searchResults": "{number, plural, =0 {Dim canlyniadau chwilio} one {{number} canlyniad chwilio} other {{number} canlyniadau chwilio}}",
 	"components.filter.selectedFirstListLabel": "{headerText}. Mae'r hidlyddion a ddewiswyd yn ymddangos gyntaf.",
 	"components.filter.singleDimensionDescription": "Hidlo yn ôl: {filterName}",
 	"components.filter-dimension-set-date-text-value.textHours": "{num, plural, =1 {Awr ddiwethaf} other {{num} awr ddiwethaf}}",
 	"components.filter-dimension-set-date-text-value.textDays": "{num, plural, =0 {Heddiw} one {{num} diwrnod diwethaf} other {{num} o ddiwrnodau diwethaf}}",
 	"components.filter-dimension-set-date-text-value.textMonths": "{num} o fisoedd diwethaf",
 	"components.filter-dimension-set-date-time-range-value.label": "{text}, ehangwch i ddewis dyddiadau",
@@ -67,9 +67,11 @@
 	"components.input-date.errorMaxDateOnly": "Rhaid i’r dyddiad fod cyn neu ar {maxDate}",
 	"components.input-date.errorMinDateOnly": "Rhaid i’r dyddiad fod ar neu ar ôl {minDate}",
 	"components.input-date.errorOutsideRange": "Rhaid i'r dyddiad fod rhwng {minDate} a {maxDate}",
-	"components.input-date.openInstructions": "Defnyddio fformat dyddiad {format}. Pwyswch saeth i lawr neu Enter i gael mynediad at galendr bach.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Nawr",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Heddiw",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Mae'r maes hwn yn derbyn gwerthoedd cyfanrif yn unig (dim degolion)",
 	"components.input-number.hintDecimalDuplicate": "Mae degol eisoes yn y nifer hwn",
 	"components.input-number.hintDecimalIncorrectComma": "I ychwanegu degol defnyddiwch y nod coma \",”",

lang/da.js

@@ -67,9 +67,11 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Datoen skal være den {maxDate} eller tidligere",
 	"components.input-date.errorMinDateOnly": "Datoen skal være den {minDate} eller senere",
 	"components.input-date.errorOutsideRange": "Datoen skal være mellem {minDate} og {maxDate}",
-	"components.input-date.openInstructions": "Brug datoformatet {format}. Tryk på Pil ned eller Enter for at få adgang til minikalender.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Nu",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "I dag",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Dette felt accepterer kun heltalsværdier (ingen decimaler)",
 	"components.input-number.hintDecimalDuplicate": "Der er allerede en decimal i dette tal",
 	"components.input-number.hintDecimalIncorrectComma": "Hvis du vil tilføje en decimal, skal du bruge komma-tegnet \",\"",

lang/de.js

@@ -67,9 +67,11 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Das Datum muss am oder vor dem {maxDate} liegen",
 	"components.input-date.errorMinDateOnly": "Das Datum muss am oder nach dem {minDate} liegen",
 	"components.input-date.errorOutsideRange": "Datum muss zwischen {minDate} und {maxDate} liegen",
-	"components.input-date.openInstructions": "Das Datumsformat {format} verwenden. Minikalender durch Abwärtspfeil oder durch Drücken der Eingabetaste aufrufen.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Jetzt",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Heute",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Dieses Feld akzeptiert nur Ganzzahlen (keine Dezimalstellen)",
 	"components.input-number.hintDecimalDuplicate": "Diese Zahl enthält bereits eine Dezimale",
 	"components.input-number.hintDecimalIncorrectComma": "Verwenden Sie zum Hinzufügen einer Dezimalstelle das Komma \",“",

lang/en-gb.js

@@ -67,9 +67,11 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Date must be before or on {maxDate}",
 	"components.input-date.errorMinDateOnly": "Date must be on or after {minDate}",
 	"components.input-date.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
-	"components.input-date.openInstructions": "Use date format {format}. Arrow down or press enter to access mini-calendar.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Now",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Today",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "This field only accepts integer values (no decimals)",
 	"components.input-number.hintDecimalDuplicate": "There's already a decimal in this number",
 	"components.input-number.hintDecimalIncorrectComma": "To add a decimal use the comma \",\" character",

lang/en.js

@@ -67,9 +67,11 @@ export default {
 	"components.input-date.errorMaxDateOnly": "Date must be before or on {maxDate}",
 	"components.input-date.errorMinDateOnly": "Date must be on or after {minDate}",
 	"components.input-date.errorOutsideRange": "Date must be between {minDate} and {maxDate}",
-	"components.input-date.openInstructions": "Use date format {format}. Arrow down or press enter to access mini-calendar.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Now",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Today",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "This field only accepts integer values (no decimals)",
 	"components.input-number.hintDecimalDuplicate": "There's already a decimal in this number",
 	"components.input-number.hintDecimalIncorrectComma": "To add a decimal use the comma \",\" character",

lang/es-es.js

@@ -67,9 +67,11 @@ export default {
 	"components.input-date.errorMaxDateOnly": "La fecha debe ser {maxDate} o anterior",
 	"components.input-date.errorMinDateOnly": "La fecha debe ser {minDate} o posterior",
 	"components.input-date.errorOutsideRange": "La fecha debe estar entre el {minDate} y el {maxDate}",
-	"components.input-date.openInstructions": "Usar formato de fecha {format}. Use la fecha hacia abajo o pulse Intro para acceder al minicalendario.",
+	"components.input-date.keyboardInstructions": "Arrow down or press enter to access mini-calendar.",
 	"components.input-date.now": "Ahora",
+	"components.input-date.revert": "{label} reverted to previous value.",
 	"components.input-date.today": "Hoy",
+	"components.input-date.useDateFormat": "Use date format {format}.",
 	"components.input-number.hintInteger": "Este campo sólo acepta valores enteros (sin decimales)",
 	"components.input-number.hintDecimalDuplicate": "Ya hay un decimal en este número",
 	"components.input-number.hintDecimalIncorrectComma": "Para agregar un decimal, utilice la coma \",\"",