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

    سلام وقت بخیر. آیا امکانش است که تاریخ انتخاب شده را در phpmyadmin ثبت کنیم؟

    24 دی 1401 | 19:34:52
  • حسین باقری
    حسین باقری

    دورد ، بله اگر نوعش text یا varchar یا موارد مرتبط با string باشه .

    24 دی 1401 | 22:43:19
  • Abolfazl R
    Abolfazl R

    با سلام و احترم آیا امکان انتخاب بازه زمانی برای تقویم وجود داره؟

    24 آبان 1401 | 21:31:05
  • ham
    ham

    سلام من خیلی تازه کارم ولی تمام کارایی که گفته شده تو توضیحات را انجام دادم ولی انگار اینپوتم یه تگ ساده تکست هستش و تقویم اصلا بالا نمیاد ایده ای دارید که بتونید کمکم کنید

    04 آبان 1401 | 10:04:12
    • حسین باقری
      حسین باقری

      سلام . پنجره console رو باز کنید بررسی کنید خطایی داره یا نه !

      04 آبان 1401 | 12:23:47
      • ham
        ham

        نه تمام فایل ها را کامل کپی کردم دایرکتوری هاشونم داخل بیس و هوم درسته یعنی همه گت ها 200 هستش ولی باز وقتی روی منطقه کلیک میکنم تقویمی نمیاره انگار تکست هستش

        04 آبان 1401 | 13:03:02
        • حسین باقری
          حسین باقری

          بررسی شد تقویم به درستی کار می کنه .

          04 آبان 1401 | 23:46:14
  • وحید
    وحید

    سلام وقت بخیر ممنون بابت توضیح کاملی که ارائه فرمودید. سوال داشتم آیا می شود در حالیکه دیتاپیکر تاریخ شمسی رو برای ID اصلی درج کند و همزمان در فیلد alt، برای یک ID دیگر تاریخ به صورت میلادی(معادل همان تاریخ شمسی) درج بشود؟

    08 مهر 1401 | 13:45:53
    • حسین باقری
      حسین باقری

      برای سوال اول تون شما رو به مرجع اصلی دعوت می کنم که ref اگر راه حل تون رو پیدا نکردید باید کمی مهارت به خرج بدید و با js تمامی عدد ها رو به انگلیسی تبدیل کنید که می تونید برای تبدیل عدد از این آموزش استفاده کنید . برای مورد بعدی می تونید از این کتابخانه که در خود همین date picker هست استفاده کنید مثلا تاریخ شمسی که به دست اومده رو هم با ایونت بگیرید و در یک جایی به میلادی ذخیره کنید

      09 مهر 1401 | 22:04:02
      • وحید
        وحید

        هزار بار ممنون بابت این همه محبت. مشکلم اینجاست که بازم هر کاری میکنم تاریخ شمسی به میلادی تبدیل نمیشه. مثل کدهای زیر رو در نظر بگیرید که قرار توی یک ID به نام شمسی، تاریخ شمسی وارد بشود و درجا پس از ورود تاریخ شمسی، تاریخ میلادی در یک ID دیگر به نام میلادی، تبدیل و درج بشود. اما بازم نمیشه... Persian Date Picker $(document).ready(function() { $("#shamsi").pDatepicker({ format: "DD MM YYYY", initialValue: false, autoClose: true }); }); document.getElementById('miladi').innerHTML = new persianDate("#shamsi").toLocale('en').toCalendar('gregorian').format('YYYY-MM-DD');

        19 مهر 1401 | 00:35:51
  • حسین
    حسین

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

    29 تیر 1401 | 13:23:23
    • حسین باقری
      حسین باقری

      در نظرات پاسخ داده شده به محمد لینک

      29 تیر 1401 | 19:29:38
      • وحید
        وحید

        مشکل اینجاست که درصورت تبدیل fa به en در خط 22، ماه‌ها نیز فینگیلیشنوشته می شوند. فقط نیاز دارم اعداد انگلیسی بشوند. چون روی یک اسکریپت تحت وب که با php و Codeigniter نوشته شده از این دیتاپیکر استفاده میکنم که متاسفانه تاریخ ها به صورت Null ثبت میشوند. متوجه شدم که احتمالا به دلیل اعداد فارسی این اتفاق می افتد. چون وقتی اعداد رو کپی پیست میکنم (با اعداد انگلیسی) به درستی ثبت می شود. کد در هدر فعال هست. برای PHP myADMIN دیتابیس هم فعال هست. برای اینکه اعداد فونت ایران سنس هم فارسی بشود از font-feature-settings: "ss02"; در CSS استفاده میکنم.بنابراین عملا چه اعداد فارسی و چه انگلیسی در سایت به صورت فارسی نمایش داده می شوند. ولی در صورت کپی کردن همان اعداد در نوت پد مشخص می شود اعداد فارسی هستند یا انگلیسی. بنابراین فقط نیاز هست تا اعداد انگلیسی بشوند که به خاطر کدهی که استفاده کردم همان اعداد انگلیسی هم فارسی نشان داده می شوند. ولی مشکل اینجاست گه اعداد دیتاپیکر کاملا فارسی هستند و این مشکل ایجاد می شود. راهی هست که فقط اعداد انگلیسی بشود یا روش دیگری...؟

        08 مهر 1401 | 13:24:21
  • رضا عباسی
    رضا عباسی

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

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

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

      "timePicker" : {"enabled" : false}
      13 خرداد 1401 | 12:25:39
      • erfan
        erfan

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

        18 آبان 1401 | 11:24:29
        • حسین باقری
          حسین باقری

          درود ، اگر منظورتون این هست که فقط ثانیه هست می تونید داده ای که بصورت 12:15:45 هست را با تابع explode از هم جدا کنید و آخرین تکه که 45 هست رو ذخیره کنید . اگر هم منظورتون فقط دریافت تاریخ هست که بصورت

          2022/11/09 12:15:45
          باز هم از explode استفاده می کنید و فقط تکه اول که تاریخ هست رو دریافت می کنید .
          18 آبان 1401 | 11:35:34
  • علی بهرامی
    علی بهرامی

    سلام وقت بخیر برای این که بتونم فقط زمان رو انتخاب کنم کدوم فیلد رو باید در فایل 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