hijri-datepicker-component
Version:
Forked and enhanced version of datepicker-hijri with additional features. The 'Hijri Datepicker' is a user interface component designed to facilitate the selection and display of Hijri (Islamic) dates in applications. It offers a visual calendar interface
292 lines (291 loc) • 10.5 kB
JavaScript
import { h } from "@stencil/core";
import moment from "moment-hijri";
export class DateCalender {
constructor() {
this.arabicDayNames = ["ح", "ن", "ث", "ر", "خ", "ج", "س"];
this.arabicFullDayNames = [
"احد",
"اثنين",
"ثلاثاء",
"اربعاء",
"خميس",
"جمعة",
"سبت",
];
this.englishDayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
/**
* The language code
*/
this.langCode = "ar";
this.dateFormat = "iYYYY/iMM/iDD";
this.calendarDateFormat = "iDD iMMMM iYYYY";
this.selectedDate = "";
this.minDate = "";
this.maxDate = "";
this.placeholder = "";
this.currentTime = moment(this.selectedDate, this.dateFormat);
this.subtractMonth = () => {
let time = this.currentTime;
time.iMonth(time.iMonth() - 1);
time.iDate(parseInt(this.getSelectedDay(), 10));
if (this.minDate) {
const minDate = moment(this.minDate, this.dateFormat);
if (time.isBefore(minDate, "month")) {
return;
}
}
this.currentTime = time;
const selectedDate = time.format(this.dateFormat);
this.selectedDate = selectedDate;
};
this.addMonth = () => {
let time = this.currentTime;
time.iMonth(time.iMonth() + 1);
time.iDate(parseInt(this.getSelectedDay(), 10));
// check if the selected date is in the newer than max date
if (this.maxDate) {
const maxDate = moment(this.maxDate, this.dateFormat);
if (time.isAfter(maxDate, "month")) {
return;
}
}
this.currentTime = time;
const selectedDate = time.format(this.dateFormat);
this.selectedDate = selectedDate;
};
this.setSelectedDate = (event) => {
let time = this.currentTime;
time.iDate(parseInt(event.target.value, 10));
const selectedDate = time.format(this.dateFormat);
this.selectedDate = selectedDate;
this.setParentSelectedDate(this.selectedDate);
};
this.handleYearChange = (event) => {
let time = this.currentTime;
time.iYear(parseInt(event.target.value, 10));
time.iDate(parseInt(this.getSelectedDay(), 10));
const selectedDate = time.format(this.dateFormat);
this.selectedDate = selectedDate;
this.setParentSelectedDate(this.selectedDate);
};
this.handleMonthChange = (event) => {
let time = this.currentTime;
time.iMonth(parseInt(event.target.value, 10));
time.iDate(parseInt(this.getSelectedDay(), 10));
const selectedDate = time.format(this.dateFormat);
this.selectedDate = selectedDate;
this.setParentSelectedDate(this.selectedDate);
};
}
validateMinDate() {
let time = this.currentTime;
time.iMonth(time.iMonth() - 1);
time.iDate(parseInt(this.getSelectedDay(), 10));
if (this.minDate) {
const minDate = moment(this.minDate, this.dateFormat);
return time.isSameOrBefore(minDate, "month");
}
return false;
}
validateMaxDate() {
let time = this.currentTime;
time.iMonth(time.iMonth() + 1);
time.iDate(parseInt(this.getSelectedDay(), 10));
if (this.maxDate) {
const maxDate = moment(this.maxDate, this.dateFormat);
return time.isSameOrAfter(maxDate, "month");
}
return false;
}
getMonthStartDayName() {
let time = this.currentTime;
time.startOf("iMonth");
return time.format("dd");
}
getMonthName(format = "iDD iMMMM iYYYY") {
return moment(this.selectedDate, this.dateFormat).format(format);
}
getSelectedDay() {
let time = this.currentTime;
let date = time.iDate();
if (this.selectedDate) {
time = moment(this.selectedDate, this.dateFormat);
date = time.iDate();
}
if (date > this.currentTime.iDaysInMonth()) {
date = 1;
}
return date;
}
render() {
return (h("div", { class: "date-calender" },
h("div", { class: "date-calender-controls" },
h("button", { class: "control-button previous-button", onClick: this.subtractMonth, type: "button", disabled: this.validateMinDate() }, "<"),
h("strong", { class: "month-name" }, this.getMonthName(this.calendarDateFormat)),
h("button", { class: "control-button next-button", onClick: this.addMonth, type: "button", disabled: this.validateMaxDate() },
" ",
">",
" "),
h("div", null,
h("years-list", { currentTime: this.currentTime, dateFormat: this.dateFormat, minDate: this.minDate, maxDate: this.maxDate, handleYearChange: this.handleYearChange }),
h("months-list", { currentTime: this.currentTime, dateFormat: this.dateFormat, selectedDate: this.selectedDate, minDate: this.minDate, maxDate: this.maxDate, handleMonthChange: this.handleMonthChange }))),
h("day-names", { langCode: this.langCode }),
h("month-days", { currentTime: this.currentTime, dateFormat: this.dateFormat, selectedDate: this.selectedDate, minDate: this.minDate, maxDate: this.maxDate, setSelectedDate: this.setSelectedDate })));
}
static get is() { return "date-calender"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["date-calender.css"]
}; }
static get styleUrls() { return {
"$": ["date-calender.css"]
}; }
static get properties() { return {
"langCode": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "The language code"
},
"attribute": "lang-code",
"reflect": true,
"defaultValue": "\"ar\""
},
"dateFormat": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "date-format",
"reflect": true,
"defaultValue": "\"iYYYY/iMM/iDD\""
},
"calendarDateFormat": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "calendar-date-format",
"reflect": true,
"defaultValue": "\"iDD iMMMM iYYYY\""
},
"selectedDate": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "selected-date",
"reflect": true,
"defaultValue": "\"\""
},
"minDate": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "min-date",
"reflect": true,
"defaultValue": "\"\""
},
"maxDate": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "max-date",
"reflect": true,
"defaultValue": "\"\""
},
"placeholder": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "placeholder",
"reflect": true,
"defaultValue": "\"\""
},
"setParentSelectedDate": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "set-parent-selected-date",
"reflect": false
}
}; }
static get states() { return {
"currentTime": {}
}; }
}