استفاده از تقویم فارسی 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 استفاده نمایید .

لیست نظرات

  1. رضا عباسی
    رضا عباسی

    سلام وقتتون بخیر ، برای اینکه فقط تاریخ رو نشون بده بدون ساعت باید چیکار کرد ؟

    13 خرداد 1401 | 12:10:57
  • حسین باقری
    حسین باقری

    سلام کد زیر امکان پذیره :

    "timePicker" : {"enabled" : false}
    13 خرداد 1401 | 12:25:39
  • علی بهرامی
    علی بهرامی

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

    14 اردیبهشت 1401 | 19:48:45
    • حسین باقری
      حسین باقری

       const dateObject = datepickerDOM.persianDatepicker( { onlyTimePicker : true, format : "H:m:s" }); 
      و برای تنظیم اندازه تقویم با فیلد تنظیم خاصی نداره با css میشه تنظیم کرد .

      14 اردیبهشت 1401 | 21:30:46
  • علی احمدی فر
    علی احمدی فر

    سلام خسته نباشید ببخشید برای گرفتن تایم کدی داخل فیلد alt چه فورمتی باید استفاده بشه با تشکر

    12 آبان 1400 | 16:31:38
    • حسین باقری
      حسین باقری

      میتونید از X استفاده کنید .

      14 دی 1400 | 00:21:50
  • محمد
    محمد

    سلام خسته نباشید ممنون از این تقویم که قرار دادین برای تغییر اعداد در حالت فارسی به انگلیسی option خاصی داره ؟

    22 مهر 1400 | 09:53:21
    • حسین باقری
      حسین باقری

      خط 22 اسکریپت js بالا رو از fa به en تغییر بدید .

      22 مهر 1400 | 10:07:51
  • ارسلان فلاح پور
    ارسلان فلاح پور

    بسیار سپاس گزارم

    25 شهریور 1400 | 04:24:01
  • contact us

    انجام انواع پروژه های وب


    ( فروشگاهی ، خبری ، رزرواسیون ، وردپرس ، حل مشکلات وردپرسی )

    شماره تماس و واتساپ : 09398554859