استفاده از تقویم فارسی date picker در سایت با javascript

استفاده از تقویم فارسی date picker در سایت با javascript

تقویم فارسی date picker – تقویم فارسی این امکان را می دهد که یک تاریخ شمسی مشخص را انتخاب کنیم .

نمونه آن انتخاب تاریخ در سایت های فروش بلیط و تور که تاریخی را برای حرکت از کاربر دریافت می کند .
با استفاده از کتابخانه persian-datepicker که 2 dependency دارد یعنی :
1- jQuery
2- persian-date
تقویم فارسی را خواهیم ساخت .

index.html برای ساختار تقویم فارسی

<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <title>Rapidcode.iR - سورس کد</title>
    <link rel="stylesheet" href="static/css/lib/persian-datepicker.min.css">
</head>
<body>


    <div class="container">
        <a id="introduce" href="https://rapidcode.ir" target="_blank">رپید کد • کتابخانه مجازی برنامه نویسان</a>

		<label for="persianDatapicker">تقویم فارسی : </label>
		<input type="text" name="persianDatapicker" id="persianDatapicker">
       
    </div>



    <script src="static/js/lib/jquery-3.2.1.min.js"></script>
    <script src="static/js/lib/persian-date.min.js"></script>
    <script src="static/js/lib/persian-datepicker.min.js"></script>
    <script src="static/js/app.js"></script>
</body>
</html>


به طور کلی کتابخانه در فایل app.js نیاز به تنظیم دارد نیازی نیست که همانند پایین تمامی قسمت های تقویم را مقدار دهی کنیم و برخی از گزینه ها همان مقدار پیشفرض کافی است اما سعی داریم که با تمامی قسمت های قابل تنظیم تقویم آشنایتان کنیم .

فایل app.js

$(document).ready(function () {
    const datepickerDOM = $("#persianDatapicker");
    const dateObject = datepickerDOM.persianDatepicker(
        {
        "inline": false,
        "format": "LLLL",
        "viewMode": "day",
        "initialValue": true,
        "minDate": false,
        "maxDate": false,
        "autoClose": false,
        "position": "auto",
        "altFormat": "lll",
        "altField": "#altfieldExample",
        "onlyTimePicker": false,
        "onlySelectOnDate": false,
        "calendarType": "persian",
        "inputDelay": 800,
        "observer": false,
        "calendar": {
            "persian": {
                "locale": "fa",
                "showHint": true,
                "leapYearMode": "algorithmic"
            },
            "gregorian": {
                "locale": "en",
                "showHint": true
            }
        },
        "navigator": {
            "enabled": true,
            "scroll": {
                "enabled": true
            },
            "text": {
                "btnNextText": "<",
                "btnPrevText": ">"
            }
        },
        "toolbox": {
            "enabled": true,
            "calendarSwitch": {
                "enabled": true,
                "format": "MMMM"
            },
            "todayButton": {
                "enabled": true,
                "text": {
                    "fa": "امروز",
                    "en": "Today"
                }
            },
            "submitButton": {
                "enabled": true,
                "text": {
                    "fa": "تایید",
                    "en": "Submit"
                }
            },
            "text": {
                "btnToday": "امروز"
            }
        },
        "timePicker": {
            "enabled": true,
            "step": 1,
            "hour": {
                "enabled": true,
                "step": null
            },
            "minute": {
                "enabled": true,
                "step": null
            },
            "second": {
                "enabled": true,
                "step": null
            },
            "meridian": {
                "enabled": false
            }
        },
        "dayPicker": {
            "enabled": true,
            "titleFormat": "YYYY MMMM"
        },
        "monthPicker": {
            "enabled": true,
            "titleFormat": "YYYY"
        },
        "yearPicker": {
            "enabled": true,
            "titleFormat": "YYYY"
        },
        "responsive": true,
        "onSelect" : function(){
           
            alert(`تاریخ انتخاب شده : ${date.year}/${date.month}/${date.date} ~ ${date.hour}:${date.minute}:${date.second}`);
        }
    });

    const date = dateObject.getState().view;
    
});


خروجی برنامه تقویم فارسی ( نتیجه )

تقویم فارسی date picker

دانلود تقویم فارسی برای وب

ارسال نظر

جهت استفاده از کد حتما از تگ pre استفاده نمایید .

contact us