100 lines
4.1 KiB
JavaScript
100 lines
4.1 KiB
JavaScript
function app(selected_date = '', date_format = 'YYYY-MM-DD', first_weekday = 'sun', min_date = '', max_date = '') {
|
|
return {
|
|
showDatepicker: false,
|
|
datepickerValue: "",
|
|
selectedDate: selected_date,
|
|
dateFormat: date_format, //"YYYY-MM-DD",
|
|
month: "",
|
|
year: "",
|
|
noOfDays: [],
|
|
blankDays: [],
|
|
minDate: min_date ? new Date(Date.parse(min_date)) : null,
|
|
maxDate: max_date ? new Date(Date.parse(max_date)) : null,
|
|
initDate() {
|
|
let today;
|
|
if (this.selectedDate) {
|
|
today = new Date(Date.parse(this.selectedDate));
|
|
} else {
|
|
today = '';
|
|
}
|
|
if (today !== '') {
|
|
this.month = today.getMonth();
|
|
this.year = today.getFullYear();
|
|
this.datepickerValue = this.formatDateForDisplay(
|
|
today
|
|
);
|
|
} else {
|
|
this.month = new Date().getMonth();
|
|
this.year = new Date().getFullYear();
|
|
}
|
|
},
|
|
isDisabled(date) {
|
|
const currentDate = new Date(this.year, this.month, date);
|
|
if (this.minDate && currentDate < this.minDate) return true;
|
|
if (this.maxDate && currentDate > this.maxDate) return true;
|
|
return false;
|
|
},
|
|
formatDateForDisplay(date) {
|
|
let formattedDay = DAYS[date.getDay()];
|
|
let formattedDate = ("0" + date.getDate()).slice(
|
|
-2
|
|
); // appends 0 (zero) in single digit date
|
|
let formattedMonth = MONTH_NAMES[date.getMonth()];
|
|
let formattedMonthShortName =
|
|
MONTH_SHORT_NAMES[date.getMonth()];
|
|
let formattedMonthInNumber = (
|
|
"0" +
|
|
(parseInt(date.getMonth()) + 1)
|
|
).slice(-2);
|
|
let formattedYear = date.getFullYear();
|
|
if (this.dateFormat === "DD-MM-YYYY") {
|
|
return `${formattedDate}-${formattedMonthInNumber}-${formattedYear}`; // 02-12-2021
|
|
}
|
|
if (this.dateFormat === "MM-DD-YYYY") {
|
|
return `${formattedMonthInNumber}-${formattedDate}-${formattedYear}`; // 12-02-2021
|
|
}
|
|
if (this.dateFormat === "YYYY-MM-DD") {
|
|
return `${formattedYear}-${formattedMonthInNumber}-${formattedDate}`; // 2021-12-02
|
|
}
|
|
if (this.dateFormat === "D d M, Y") {
|
|
return `${formattedDay} ${formattedDate} ${formattedMonthShortName} ${formattedYear}`; // Tue 02 Dec 2021
|
|
}
|
|
return `${formattedDay} ${formattedDate} ${formattedMonth} ${formattedYear}`;
|
|
},
|
|
isSelectedDate(date) {
|
|
const d = new Date(this.year, this.month, date);
|
|
return this.datepickerValue === this.formatDateForDisplay(d);
|
|
}
|
|
,
|
|
isToday(date) {
|
|
const today = new Date();
|
|
const d = new Date(this.year, this.month, date);
|
|
return today.toDateString() === d.toDateString();
|
|
},
|
|
getDateValue(date, format) {
|
|
let selectedDate = new Date(this.year, this.month, date);
|
|
if (this.isDisabled(date)) return
|
|
this.datepickerValue = this.formatDateForDisplay(
|
|
selectedDate
|
|
);
|
|
this.isSelectedDate(date);
|
|
this.showDatepicker = false;
|
|
},
|
|
getNoOfDays() {
|
|
let daysInMonth = new Date(this.year, this.month + 1, 0).getDate();
|
|
// find where to start calendar day of week
|
|
let dayOfWeek = new Date(this.year, this.month).getDay();
|
|
let blankDaysArray = [];
|
|
dayOfWeek = (first_weekday === 'sun') ? dayOfWeek : (dayOfWeek - 1);
|
|
for (var i = 1; i <= dayOfWeek; i++) {
|
|
blankDaysArray.push(i);
|
|
}
|
|
let daysArray = [];
|
|
for (var i = 1; i <= daysInMonth; i++) {
|
|
daysArray.push(i);
|
|
}
|
|
this.blankDays = blankDaysArray;
|
|
this.noOfDays = daysArray;
|
|
},
|
|
};
|
|
} |