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

@ -11,7 +11,7 @@
* {
* {Number} year
* {Number} month
* {Number} date
* {Number} day
* }
* {Object} options
* {
@ -20,7 +20,7 @@
* {Number} calViewSize [optional]
* }
*/
function DateKeeper({ year, month, date }, { firstDayOfWeek = 0, weekends = [0], calViewSize = 42 }) {
function DateKeeper({ year, month, day }, { firstDayOfWeek = 0, weekends = [0], calViewSize = 42 }) {
this.state = {
firstDayOfWeek, weekends, calViewSize,
dateObj: new Date(0),
@ -29,7 +29,7 @@ function DateKeeper({ year, month, date }, { firstDayOfWeek = 0, weekends = [0],
days: []
};
this.state.weekHeaders = this._getWeekHeaders(firstDayOfWeek);
this._update(year, month, date);
this._update(year, month, day);
}
{
@ -48,8 +48,8 @@ function DateKeeper({ year, month, date }, { firstDayOfWeek = 0, weekends = [0],
* {Number} date [optional]
* }
*/
set({ year = this.state.year, month = this.state.month, date = this.state.date }) {
this._update(year, month, date);
set({ year = this.state.year, month = this.state.month, day = this.state.day }) {
this._update(year, month, day);
},
/**
@ -62,44 +62,44 @@ function DateKeeper({ year, month, date }, { firstDayOfWeek = 0, weekends = [0],
},
/**
* Set month. Makes sure the date is <= the last day of the month
* Set month. Makes sure the day is <= the last day of the month
* @param {Number} month
*/
setMonth(month) {
const lastDayOfMonth = this._newUTCDate(this.state.year, month + 1, 0).getUTCDate();
this._update(this.state.year, month, Math.min(this.state.date, lastDayOfMonth));
this._update(this.state.year, month, Math.min(this.state.day, lastDayOfMonth));
},
/**
* Set year. Makes sure the date is <= the last day of the month
* Set year. Makes sure the day is <= the last day of the month
* @param {Number} year
*/
setYear(year) {
const lastDayOfMonth = this._newUTCDate(year, this.state.month + 1, 0).getUTCDate();
this._update(year, this.state.month, Math.min(this.state.date, lastDayOfMonth));
this._update(year, this.state.month, Math.min(this.state.day, lastDayOfMonth));
},
/**
* Set month by offset. Makes sure the date is <= the last day of the month
* Set month by offset. Makes sure the day is <= the last day of the month
* @param {Number} offset
*/
setMonthByOffset(offset) {
const lastDayOfMonth = this._newUTCDate(this.state.year, this.state.month + offset + 1, 0).getUTCDate();
this._update(this.state.year, this.state.month + offset, Math.min(this.state.date, lastDayOfMonth));
this._update(this.state.year, this.state.month + offset, Math.min(this.state.day, lastDayOfMonth));
},
/**
* Update the states.
* @param {Number} year [description]
* @param {Number} month [description]
* @param {Number} date [description]
* @param {Number} day [description]
*/
_update(year, month, date) {
_update(year, month, day) {
// Use setUTCFullYear so that year 99 doesn't get parsed as 1999
this.state.dateObj.setUTCFullYear(year, month, date);
this.state.dateObj.setUTCFullYear(year, month, day);
this.state.year = this.state.dateObj.getUTCFullYear();
this.state.month = this.state.dateObj.getUTCMonth();
this.state.date = this.state.dateObj.getUTCDate();
this.state.day = this.state.dateObj.getUTCDate();
},
/**
@ -201,14 +201,14 @@ function DateKeeper({ year, month, date }, { firstDayOfWeek = 0, weekends = [0],
*/
_getWeekHeaders(firstDayOfWeek) {
let headers = [];
let day = firstDayOfWeek;
let dayOfWeek = firstDayOfWeek;
for (let i = 0; i < DAYS_IN_A_WEEK; i++) {
headers.push({
textContent: day % DAYS_IN_A_WEEK,
classNames: this.state.weekends.includes(day % DAYS_IN_A_WEEK) ? ["weekend"] : []
textContent: dayOfWeek % DAYS_IN_A_WEEK,
classNames: this.state.weekends.includes(dayOfWeek % DAYS_IN_A_WEEK) ? ["weekend"] : []
});
day++;
dayOfWeek++;
}
return headers;
},