hijri-datepicker-component/dist/collection/components/month-days/month-days.js

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

import { h } from "@stencil/core";
import moment from "moment-hijri";
export class MonthDays {
    constructor() {
        this.englishDayNames = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
        this.minDate = "";
        this.maxDate = "";
    }
    getMonthStartDayName() {
        let time = this.currentTime;
        time.startOf("iMonth");
        return time.format("dd");
    }
    monthDays() {
        return this.currentTime.iDaysInMonth();
    }
    isSelectedDate(i) {
        let time = this.currentTime;
        time.iDate(parseInt(i, 10));
        return this.selectedDate === time.format(this.dateFormat);
    }
    handleMinAndMaxDate(day) {
        let time = this.currentTime;
        time.iDate(day);
        if (this.selectedDate) {
            time.iMonth(moment(this.selectedDate).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);
        }
        if (this.maxDate && !this.minDate) {
            this.maxDate = moment(this.maxDate, this.dateFormat).format(this.dateFormat);
            return moment(this.maxDate).isBefore(formatedTime);
        }
        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, "day") ||
                moment(this.maxDate).isBefore(formatedTime, "day"));
        }
        return false;
    }
    render() {
        let daysList = [];
        for (let i = this.englishDayNames.indexOf(this.getMonthStartDayName()); i > 0; i--) {
            daysList.push(h("div", { class: "month-day no-hover", key: daysList.length.toString() }));
        }
        for (let i = 1; i < this.monthDays() + 1; i++) {
            daysList.push(h("div", { class: "month-day " + (this.isSelectedDate(i) ? "selected" : ""), key: daysList.length.toString() },
                h("button", { class: "month-day-button " + (this.isSelectedDate(i) ? "selected" : ""), onClick: this.setSelectedDate, disabled: this.handleMinAndMaxDate(i), value: i, type: "button" }, i)));
        }
        return h("div", { class: "month-days" }, daysList);
    }
    static get is() { return "month-days"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() { return {
        "$": ["month-days.css"]
    }; }
    static get styleUrls() { return {
        "$": ["month-days.css"]
    }; }
    static get properties() { return {
        "setSelectedDate": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "set-selected-date",
            "reflect": false
        },
        "currentTime": {
            "type": "any",
            "mutable": false,
            "complexType": {
                "original": "any",
                "resolved": "any",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "current-time",
            "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
        },
        "minDate": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "min-date",
            "reflect": false,
            "defaultValue": "\"\""
        },
        "maxDate": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "max-date",
            "reflect": false,
            "defaultValue": "\"\""
        }
    }; }
}