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
164 lines (163 loc) • 5.59 kB
JavaScript
import { h } from "@stencil/core";
import moment from "moment-hijri";
export class YearsList {
constructor() {
this.months = [
{ number: 0, name: "محرم" },
{ number: 1, name: "صفر" },
{ number: 2, name: "ربيع 1" },
{ number: 3, name: "ربيع 2" },
{ number: 4, name: "جمادي 1" },
{ number: 5, name: "جمادي 2" },
{ number: 6, name: "رجب" },
{ number: 7, name: "شعبان" },
{ number: 8, name: "رمضان" },
{ number: 9, name: "شوال" },
{ number: 10, name: "ذو القعدة" },
{ number: 11, name: "ذو الحجة" },
];
}
handleMinAndMaxDate(month) {
let time = moment(this.selectedDate, this.dateFormat);
time.iMonth(month);
let formatedTime = time.format(this.dateFormat);
if (this.minDate && !this.maxDate) {
this.minDate = moment(this.minDate, this.dateFormat).format(this.dateFormat);
return moment(this.minDate).isAfter(formatedTime, "month");
}
if (this.maxDate && !this.minDate) {
this.maxDate = moment(this.maxDate, this.dateFormat).format(this.dateFormat);
return moment(this.maxDate).isBefore(formatedTime, "month");
}
if (this.maxDate && this.minDate) {
this.maxDate = moment(this.maxDate, this.dateFormat).format(this.dateFormat);
this.minDate = moment(this.minDate, this.dateFormat).format(this.dateFormat);
return (moment(this.minDate).isAfter(formatedTime, "month") ||
moment(this.maxDate).isBefore(formatedTime, "month"));
}
return false;
}
render() {
let monthsList = [];
for (let i = 0; i < this.months.length; i++) {
monthsList.push(h("option", { key: this.months[i].number, value: this.months[i].number, selected: this.currentTime.iMonth() == this.months[i].number, disabled: this.handleMinAndMaxDate(i) }, this.months[i].name));
}
return (h("select", { class: "months-list", onChange: this.handleMonthChange }, monthsList));
}
static get is() { return "months-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["months-list.css"]
}; }
static get styleUrls() { return {
"$": ["months-list.css"]
}; }
static get properties() { return {
"currentTime": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "current-time",
"reflect": false
},
"minDate": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "min-date",
"reflect": false
},
"maxDate": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "max-date",
"reflect": false
},
"dateFormat": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "date-format",
"reflect": false
},
"selectedDate": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "selected-date",
"reflect": false
},
"handleMonthChange": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "handle-month-change",
"reflect": false
}
}; }
static get watchers() { return [{
"propName": "selectedDate",
"methodName": "handleMinAndMaxDate"
}]; }
}