date picker

: date picker نمونه کد یک

<page onshown="dialog/datePickerDialog">
    <reactive-data id="defaltValue" valueBind="component/defaultValue" elementBind="year:text"/>
    <button onclick="dialog/datePickerDialog" text="Ss"/>
</page>

<bottomsheetdialog id="datePickerDialog" onshown="script/datePickerScript:initCalendar()">
    <text margin_bottom="16">تاریخ مستند مورد نظر را انتخاب کنید</text>

    <frame layout="frame">
        <imagebutton onclick="script/datePickerScript:nextMonth()" height="42" src="images/previous.png" gravity="left"/>
        <frame layout="linear_horizontal">
            <text id="year">1401</text>
            <text id="month">تیر</text>
        </frame>
        <imagebutton onclick="script/datePickerScript:lastMonth()" height="42" src="images/next.png" gravity="right"/>
    </frame>

    <frame id="calendar" layout="linear_vertical">

    </frame>

    <frame layout="linear_horizontal" margin_top="10" borderCornerRadius="5" background="">
        <button background="#55BECC" textsize="14" textcolor="white">انتخاب</button>
    </frame>


    <include layout="comp/date-picker.js.appsan"/>
</bottomsheetdialog>

<script id="datePickerScript">

    class PersianDate extends Date {
        constructor(...args) {
            super(...args);
        }

        toLocaleDateString = () => super.toLocaleDateString('fa-IR-u-nu-latn');
        getParts = () => this.toLocaleDateString().split("/")
        getDay = () => super.getDay() === 6 ? 0 : super.getDay() + 1
        getDate = () => this.getParts()[2];
        getMonth = () => this.getParts()[1];
        getYear = () => this.getParts()[0];
        getMonthName = () => this.toLocaleDateString("fa-IR", {month: 'long'});
        getDayName = () => this.toLocaleDateString("fa-IR", {weekday: 'long'});
    }

    const jCal = {
        monthsDays: [
            31, 31, 31,
            31, 31, 31,
            30, 30, 30,
            30, 30, 29
        ],
        monthNames: [
            'فروردین',
            'اردیبهشت',
            'خرداد',
            'تیر',
            'مرداد',
            'شهریور',
            'مهر',
            'آبان',
            'آذر',
            'دی',
            'بهمن',
            'اسفند',
        ],
        getMonthDays: (month) => {
            return jCal.monthsDays[month - 1];
        },
        gregorian_to_jalali: (gy, gm, gd) => {
            var g_d_m = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
            var jy = (gy <= 1600) ? 0 : 979;
            gy -= (gy <= 1600) ? 621 : 1600;
            var gy2 = (gm > 2) ? (gy + 1) : gy;
            var days = (365 * gy) + (parseInt((gy2 + 3) / 4)) - (parseInt((gy2 + 99) / 100))
                + (parseInt((gy2 + 399) / 400)) - 80 + gd + g_d_m[gm - 1];
            jy += 33 * (parseInt(days / 12053));
            days %= 12053;
            jy += 4 * (parseInt(days / 1461));
            days %= 1461;
            jy += parseInt((days - 1) / 365);
            if (days > 365) days = (days - 1) % 365;
            var jm = (days < 186) ? 1 + parseInt(days / 31) : 7 + parseInt((days - 186) / 30);
            var jd = 1 + ((days < 186) ? (days % 31) : ((days - 186) % 30));
            return [jy, jm, jd];
        },
        jalali_to_gregorian: (jy, jm, jd) => {
            var gy = (jy <= 979) ? 621 : 1600;
            jy -= (jy <= 979) ? 0 : 979;
            var days = (365 * jy) + ((parseInt(jy / 33)) * 8) + (parseInt(((jy % 33) + 3) / 4))
                + 78 + jd + ((jm < 7) ? (jm - 1) * 31 : ((jm - 7) * 30) + 186);
            gy += 400 * (parseInt(days / 146097));
            days %= 146097;
            if (days > 36524) {
                gy += 100 * (parseInt(--days / 36524));
                days %= 36524;
                if (days >= 365) days++;
            }
            gy += 4 * (parseInt((days) / 1461));
            days %= 1461;
            gy += parseInt((days - 1) / 365);
            if (days > 365) days = (days - 1) % 365;
            var gd = days + 1;
            var sal_a = [0, 31, ((gy % 4 == 0 && gy % 100 != 0) || (gy % 400 == 0)) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            var gm
            for (gm = 0; gm < 13; gm++) {
                var v = sal_a[gm];
                if (gd <= v) break;
                gd -= v;
            }
            return [gy, gm, gd];
        },
        getMonthName: (month) => {
            return jCal.monthNames[month - 1];
        }
    }

    let pDate = new PersianDate();

    function nextMonth() {
        let month = +pDate.getMonth() + 1;
        if (month === 13) month = 1;
        const firstOfMonth = jCal.jalali_to_gregorian(pDate.getYear(), month, 1);
        pDate = new PersianDate(firstOfMonth);
        initCalendar();
    }

    function lastMonth() {
        let month = pDate.getMonth() - 1;
        if (month === 0) month = 12;
        const firstOfMonth = jCal.jalali_to_gregorian(pDate.getYear(), month, 1);
        pDate = new PersianDate(firstOfMonth);
        initCalendar();
    }

    function initCalendar() {
        let rows = '<frame layout="linear_vertical">';

        const firstOfMonth = jCal.jalali_to_gregorian(pDate.getYear(), pDate.getMonth(), 1);
        let monthOffset = new Date(firstOfMonth[0], firstOfMonth[1] - 1, firstOfMonth[2]).getDay() + 2;
        if(monthOffset > 6) monthOffset = monthOffset - 7;

        // rows += `<text>${new Date(firstOfMonth[0], firstOfMonth[1], firstOfMonth[2])}</text>`
        // rows += `<text>${new Date(firstOfMonth[0], firstOfMonth[1] - 1, firstOfMonth[2]).getDay()}</text>`
        // rows += `<text>${firstOfMonth}</text>`
        // rows += `<text>${monthOffset}</text>`
        // rows += `<text>${(1 - monthOffset)}</text>`

        rows += `<frame layout="linear_horizontal" reverse="true">
                <text>ش</text>
                <text>ی</text>
                <text>د</text>
                <text>س</text>
                <text>چ</text>
                <text>پ</text>
                <text>ج</text>
                </frame>\n`

        for (let i = (1 - monthOffset); i <= (41 - monthOffset); i++) {
            if ((i - 2 + monthOffset) % 7 === 0) {
                if (i > 1) rows += '<' + `/frame>\n`
                rows += `<frame layout="linear_horizontal" reverse="true">\n`
            }
            rows += `<text>${(i > 0 && i <= jCal.getMonthDays(pDate.getMonth())) ? i : ''}</text>\n`;
        }
        rows += `</frame>`
        rows += `</frame>`

        Appsan.setProperty("calendar", "innerElements", rows)
        Appsan.setProperty("year", "text", pDate.getYear())
        Appsan.setProperty("month", "text", jCal.getMonthName(pDate.getMonth()))
    }
</script>