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
130 lines (129 loc) • 4.01 kB
JavaScript
import { h } from "@stencil/core";
import moment from "moment-hijri";
export class YearsList {
constructor() {
this.minYear = 1356;
this.maxYear = 1500;
}
handleMinAndMaxDate(year) {
if (this.minDate && !this.maxDate) {
let minDate = moment(this.minDate, this.dateFormat);
if (minDate.iYear() > year)
return true;
}
if (this.maxDate && !this.minDate) {
let maxDate = moment(this.maxDate, this.dateFormat);
if (maxDate.iYear() < year)
return true;
}
if (this.maxDate && this.minDate) {
let maxDate = moment(this.maxDate, this.dateFormat);
let minDate = moment(this.minDate, this.dateFormat);
if (maxDate.iYear() < year || minDate.iYear() > year)
return true;
}
return false;
}
render() {
let yearsList = [];
for (let i = this.minYear; i <= this.maxYear; i++) {
yearsList.push(h("option", { key: i, value: i, disabled: this.handleMinAndMaxDate(i), selected: this.currentTime.iYear() == i }, i));
}
return (h("select", { class: "years-list", onChange: this.handleYearChange }, yearsList));
}
static get is() { return "years-list"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["years-list.css"]
}; }
static get styleUrls() { return {
"$": ["years-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
},
"handleYearChange": {
"type": "any",
"mutable": false,
"complexType": {
"original": "any",
"resolved": "any",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "handle-year-change",
"reflect": false
}
}; }
}