Bug 1320225: [DateTimeInput] Integration of input type=date input box with picker (part 1)

This commit is contained in:
janekptacijarabaci 2018-02-14 14:03:55 +01:00 • committed by Roy Tam
commit ee07b11c03
4 changed files with 113 additions and 42 deletions

View file

@ -37,13 +37,13 @@ function DatePicker(context) {
const now = new Date();
const { year = now.getFullYear(),
month = now.getMonth(),
date = now.getDate(),
day = now.getDate(),
locale } = this.props;
// TODO: Use calendar info API to get first day of week & weekends
// (Bug 1287503)
const dateKeeper = new DateKeeper({
year, month, date
year, month, day
}, {
calViewSize: CAL_VIEW_SIZE,
firstDayOfWeek: 0,
@ -68,6 +68,7 @@ function DatePicker(context) {
this.state.isDateSet = true;
this._update();
this._dispatchState();
this._closePopup();
},
setYear: year => {
dateKeeper.setYear(year);
@ -148,23 +149,32 @@ function DatePicker(context) {
this.context.monthYearView.classList.add("hidden");
},
/**
* Use postMessage to close the picker.
*/
_closePopup() {
window.postMessage({
name: "ClosePopup"
}, "*");
},
/**
* Use postMessage to pass the state of picker to the panel.
*/
_dispatchState() {
const { year, month, date } = this.state.dateKeeper.state;
const { isYearSet, isMonthSet, isDateSet } = this.state;
const { year, month, day } = this.state.dateKeeper.state;
const { isYearSet, isMonthSet, isDaySet } = this.state;
// The panel is listening to window for postMessage event, so we
// do postMessage to itself to send data to input boxes.
window.postMessage({
name: "DatePickerPopupChanged",
name: "PickerPopupChanged",
detail: {
year,
month,
date,
day,
isYearSet,
isMonthSet,
isDateSet
isDaySet
}
}, "*");
},
@ -221,11 +231,11 @@ function DatePicker(context) {
*/
handleMessage(event) {
switch (event.data.name) {
case "DatePickerSetValue": {
case "PickerSetValue": {
this.set(event.data.detail);
break;
}
case "DatePickerInit": {
case "PickerInit": {
this.init(event.data.detail);
break;
}
@ -242,18 +252,22 @@ function DatePicker(context) {
* {Number} date [optional]
* }
*/
set(dateState) {
if (dateState.year != undefined) {
set({ year, month, day }) {
const { dateKeeper } = this.state;
if (year != undefined) {
this.state.isYearSet = true;
}
if (dateState.month != undefined) {
if (month != undefined) {
this.state.isMonthSet = true;
}
if (dateState.date != undefined) {
this.state.isDateSet = true;
if (day != undefined) {
this.state.isDaySet = true;
}
this.state.dateKeeper.set(dateState);
dateKeeper.set({
year, month, day
});
this._update();
}
};