mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-12 10:17:31 +09:00
Bug 1320225: [DateTimeInput] Integration of input type=date input box with picker (part 1)
This commit is contained in:
parent
a13a3afc1b
commit
ee07b11c03
4 changed files with 113 additions and 42 deletions
|
|
@ -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();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue