انتخاب تاریخ شمسی در jQuery

امروز قصد داریم به شما نحوه ساخت یک تقویم جلالی فارسی و انتخاب تاریخ شمسی در jQuery را در صفحات وب و با استفاده از کتابخانه datepicker را نشان بدیم.

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

در این آموزش قصد داریم به شما نحوه افزودن یک قسمت برای انتخاب تاریخ شمسی (جلالی) را با استفاده از جی کوئری را نشان بدیم.

پلاگین Datepicker جی کوئری آپشن و متدهای مختلفی را در اختیار ما قرار می دهد, که می توانیم با استفاده از آن رابط کاربری تقویم را بنابر سلیقه و layout تغییر بدیم.

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

انتخاب تاریخ شمسی در jQuery

برای افزون پلاگین Datepicker شمسی به صفحه وب مراحل زیر را دنبال کنید.

فایل های jQuery & persianDatepicker.js & persianDatepicker.css در تگ <head> صفحه html خود فراخوانی کنید.

<link type="text/css" rel="stylesheet" href="css/persianDatepicker.css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/persianDatepicker.min.js"></script>

المنتی که قصد تبدیل آن به یک انتخاب کننده تاریخ شمسی دارید را اضافه کنید و یک مشخصه ID برای ان وارد کنید

<input type="text" id="input1" />
<span id="span1"></span>

1 2	<input type="text" id="input1" /> <span id="span1"></span>

تابع persianDatepicker مربوط به پلاگین را فراخوانی کنید.

<script type="text/javascript">
    $(function() {
        $("#input1, #span1").persianDatePicker();       
    });
</script>

$(function() {

$("#input1, #span1").persianDatePicker();

});

</script>

اگر تمام مراحل ساده بالا را پیاده کردید به راحتی میتوانید با کلیک بر روی المنت (input و یا تگ span) خود تقویم شمسی خود را برای انتخاب تاریخ ببینید.

مثال : انتخاب تاریخ شمسی در jQuery

<!DOCTYPE html>
<html>
    <head>
        <title>jQuery PERSIAN DatePicker</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link type="text/css" rel="stylesheet" href="css/persianDatePicker-default.css" />
        <style type="text/css">
            *{margin:0; padding:0}
            body{
                padding: 10px 30px; 
                font-family: Helvetica;
            }
            .dl{
                padding: 20px;
                text-align:center;
				margin-bottom: 20px;
            }
			.dl img{
                opacity: .6;
            }
			.dl img:hover{
                opacity: 1;
            }
            a{color: #037;}
            
            input{
                border: 1px solid #339;
                padding: 3px;
                font:bold 12px sans-serif;
				width: 90px;
            }
            h1{color: #222;}
            h3{color: #444;}
            h4{color:#666;}
            hr{color: #888; box-shadow: 1px 1px 8px 1px #999; margin-top: 5px;margin-bottom: 5px;}
            pre{
                background: #f9f9f9;
                border: 1px solid #aaa;
                padding: 10px;
                margin: 10px;
            }
			
        </style>
        <link type="text/css" rel="stylesheet" href="js/prism/css-javascript.css" />
        <script type="text/javascript" src="js/prism/css-javascript.js"></script>
        <!----------------->
        <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="js/persianDatePicker.js"></script>
        <script type="text/javascript">
            $(function() {
                $("#simpleText, #simpleLabel").persianDatepicker({});
                $("#selectedBefore").persianDatepicker({selectedBefore:true});    
				$("#alwaysShow").persianDatepicker({alwaysShow:true});    
				
            });
        </script>
        <!----------------->
    </head>
    <body>
        <h1><a href="http://mbehzadi.com/persianDatepicker" title="mbehzadi.com">PERSIAN Datepicker</a></h1>
        <h3>Netparadis.com</h3>
        <hr>
        <div class="dl">        
			<a href="http://github.com/behzadi/persianDatePicker"><img src="http://github.com/favicon.ico" /></a>
			<br />
			<a href="https://netparadis.com">نت پارادیس</a>
        </div>
		persian date: 
            <input type="text" id="simpleText" placeholder="select date" />
            a label : 
            <label id="simpleLabel" style="background: #ccc; width:90px;">click me...</label> 
			selected before: 
            <input type="text" id="selectedBefore" placeholder="select date" />
			 show always: 
            <input type="text" id="alwaysShow" placeholder="select date" />
			<br /><br />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>jQuery PERSIAN DatePicker</title>

*{margin:0; padding:0}

body{

padding: 10px 30px;

font-family: Helvetica;

}

.dl{

padding: 20px;

text-align:center;

margin-bottom: 20px;

}

.dl img{

opacity: .6;

}

.dl img:hover{

opacity: 1;

}

a{color: #037;}

input{

border: 1px solid #339;

padding: 3px;

font:bold 12px sans-serif;

width: 90px;

}

h1{color: #222;}

h3{color: #444;}

h4{color:#666;}

hr{color: #888; box-shadow: 1px 1px 8px 1px #999; margin-top: 5px;margin-bottom: 5px;}

pre{

background: #f9f9f9;

border: 1px solid #aaa;

padding: 10px;

margin: 10px;

}

</style>

$(function() {

$("#simpleText, #simpleLabel").persianDatepicker({});

$("#selectedBefore").persianDatepicker({selectedBefore:true});

$("#alwaysShow").persianDatepicker({alwaysShow:true});

});

</script>

</head>

<body>

<h1><a href="http://mbehzadi.com/persianDatepicker" title="mbehzadi.com">PERSIAN Datepicker</a></h1>

<h3>Netparadis.com</h3>

<hr>

<br />

<a href="https://netparadis.com">نت پارادیس</a>

</div>

persian date:

a label :

<label id="simpleLabel" style="background: #ccc; width:90px;">click me...</label>

selected before:

show always:

</body>

</html>

خروجی

اگر هیچ نتیجه ای نمایان نشد , نگران نباشید , کافیست سورس کد کامل را از آخر مقاله آموزشی انتخاب تاریخ شمسی در jQuery دانلود و استفاده کنید.

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

آپشن ها

selectedBefore – اگر مقدار true باشد , مقدار تاریخ امروز بصورت خودکار انتخاب و در فیلد متنی نمایش داده خواهد شد.
alwaysShow – در هر بار اجرای صفحه وب , بصورت خودکار بخش تقویم نمایان خواهد شد.
formatDate – نوع نومایش تاریخ و زمان را مشخص می کند (بصورت پیش فرض : “YYYY/MM/DD” که بدون زمان است)
persianNumbers – اعداد را بصورت فارسی قرار می دهد (مقادیر : true,false)
fontSize – اندازه فونت را بصورت پیکسلی و عددی دریافت میکند (پیشفرض : ۱۳)
theme – تغییر قالب نمایش تقویم (مقادیر قابل قبول : dark , latoja , lightorang , melon)

و کلی آپشن های دیگر که مهمترین های آنها در بالا ذکر شد .

امیدوارم از مقاله آموزشی انتخاب تاریخ شمسی در jQuery لذت برده باشید . مطمینا با استفاده از این قابلیت ها در پروژه هایی که می نویسید, کار شما بسیار حرفه ای تر می شود .

برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید.

لغو پاسخ

مانا ۱۸ مرداد ۱۴۰۲

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

پاسخ

حسن شفیعی ۲۹ مرداد ۱۴۰۲

سلام. از کتابخانه datepicker اصلی استفاده کنید. این کتابخانه ای که گذاشتیم برای تاریخ شمسی هست

پاسخ

علیرضا ۱۹ تیر ۱۴۰۲

سلام و عرض ادب
با سپاس از مطالب خوبتون
متاسفانه مشکل تاریخ با فرمت ۱۴۰۲/۰۲/۰۱ حل نشد با اینکه فرمت رو در فایل تغییر دادم
لطفا راهنمایی بفرمایید

پاسخ

حسن شفیعی ۲۲ تیر ۱۴۰۲

سلام
مقدار formatDate را بصورت YYYY/MM/DD وارد کنید

پاسخ

m ۶ تیر ۱۴۰۱

سلام آقای شفیعی امکانش هست نمونه سورس وقتی تاریخ رو انتخاب می کنیم مثلا ۰۶-۰۴-۱۴۰۱ به این فرمت نمایش بده را اینجا بنویسید راهنمایی نمودین ولی من هر کاری انجام دادم اعمال نشد خیلی مهمه ممنون.

پاسخ
m ۴ تیر ۱۴۰۱

با تشکر از اینکه خیلی سریع جواب دادین من مطالعه کردم ولی دقیقا متوجه نشدم امکانش هست راهنمایی کنین نمونه کد هایی که باید تغییر کنه .

پاسخ

حسن شفیعی ۴ تیر ۱۴۰۱

به متد persianDatepicker داخل کد html بخش script باید آپشن formatDate رو اضافه کنید و بهش فرمت رو بصورت “YYYY-MM-DD” بدید

پاسخ

m ۴ تیر ۱۴۰۱

مهندس شفیعی عزیز من این کار و انجام دادم ولی نشد امکانش هست نمونه سورس که درست هست رو برام ایمیل کنین ممنون میشم.

پاسخ

m ۴ تیر ۱۴۰۱

با سلام
چطور مثلا تاریخ رو به صورت ۰۵-۰۴-۱۴۰۱ نمایش بدیم ممنون

پاسخ

حسن شفیعی ۴ تیر ۱۴۰۱

سلام.
لطفا داکیومنت کتابخانه را مطالعه کنید
https://jdf.scr.ir/rahnama/jdate

پاسخ

سعدی ۱۰ اردیبهشت ۱۴۰۱

سلام
چطور میتونم وقتی از تقویم یه تاریخ رو انتخاب میکنم اسم روزش رو توی یک label نشون بدم؟
مثلا وقتی ۱۴۰۰/۰۲/۱۰ رو انتخاب کردم توی label بنویسه شنبه

پاسخ

حسن شفیعی ۱۰ اردیبهشت ۱۴۰۱

سلام ممنون. خود کتابخانه jdf این امکان رو داره باید داکیومنتش رو بخونید

پاسخ

سعید ۶ آبان ۱۴۰۰

سلام وقت بخیر
این پلاگین روی جی کوئری ورژن ۳٫۶ کار میکنه؟

پاسخ

حسن شفیعی ۶ آبان ۱۴۰۰

سلام ممنون
جدیدا تست نشده و باید آخرین نسخه رو دانلود و بررسی کنید

پاسخ

رحمان ۱۰ شهریور ۱۴۰۰

سلام و احترام

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

پاسخ

حسن شفیعی ۱۱ شهریور ۱۴۰۰

سلام. خوشحالیم که مفید واقع شده.
میتونید از این بخش دانلود کنید :
https://github.com/fengyuanchen/datepicker

پاسخ

کیان ۱۱ فروردین ۱۴۰۰

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

پاسخ

حسن شفیعی ۱۲ فروردین ۱۴۰۰

سلام.
در فایل js/persianDatepicker.js خط ۳۱ این رو قرار بدید
shortDowTitle: [“شنبه”, “یکشنبه”, “دوشنبه”, “سه شنبه”, “چهارشنبه”, “پنج شنبه”, “جمعه”],

و همچنین خط ۴۵ این رو قرار بدید :
cellWidth: 45, // by px

پاسخ
م ۲۷ اردیبهشت ۱۴۰۰

سلام و عرض ادب.
روز بخیر.
ببخشید من میخواهم inputتقویم را داخل div modal قرار بدهم اما تقویم کار نمیکنه. چه تغییری باید انجام بدهم.
ممنون

پاسخ

حسن شفیعی ۲۷ اردیبهشت ۱۴۰۰

سلام.
ممنون.
داخل بخش console مرورگر ببینید دقیقا چه خطایی دارید

پاسخ

مسعود ۱۹ بهمن ۱۳۹۹

سلام
ممنون؛ خیلی کاربردی بود.

پاسخ

حسن شفیعی ۱۹ بهمن ۱۳۹۹

سلام. خوشحالیم که مفید واقع شده.
موفق باشید.

پاسخ

مهران ۲۲ تیر ۱۳۹۹

درود مرد بزرگ،
این قسمت رو پیدا نکردم:
“”پیدا کردم
فرمت یابد ۰D و ۰M باشه””
منظورم، نمایش روز و ماه بصورت ۰۳ و ۰۹! لطفا ارشاد بفرما.

پاسخ

حسن شفیعی ۲۲ تیر ۱۳۹۹

سلام. اگر دورقمی میخواید باشه باید حروف کوچک استفاده کنید مثلا به جای D از d یا به جای M از mکوجک استفاده کنید و نیاز نیست قبلش ۰ قرار بدید.

پاسخ

مهران ۲۲ تیر ۱۳۹۹

Okay
دوستانی که مثل من مشکل دارند: formatDate بشه این: formatDate: “YYYY/0M/0D”

پاسخ

مهیار ۱۵ تیر ۱۳۹۹

سلام مهندس دیت تایم پیکر از خوشکل ترم سراغ دارین ؟؟!

پاسخ

حسن شفیعی ۱۵ تیر ۱۳۹۹

سلام. هسته اصلی برنامه نویسیش یکی هست و باید دنبال قالب ها باشید که یکسری کد css هست که باید جایگزین یا اضافه کنید مثلا این :
https://codepen.io/WHKane/pen/WQZvvK

پاسخ

محسن ۱۳ فروردین ۱۳۹۹

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

پاسخ
مجید ۲۱ مهر ۱۳۹۸

سلام
با تشکر از مطالب مفیدتون
مهندس جان امکانش هست که روز و ماه هایی که تک رقمی هستند رو دورقمی نمایش داد مثلا ۰۱ و ۰۲ و…

پاسخ

مجید ۲۱ مهر ۱۳۹۸

پیدا کردم
فرمت یابد ۰D و ۰M باشه

پاسخ

حسن شفیعی ۲۱ مهر ۱۳۹۸

سلام. خوشحالیم که مفید واقع شده.
موفق باشید.

پاسخ

مهران ۲۸ اردیبهشت ۱۳۹۸

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

پاسخ

حسن شفیعی ۲۸ اردیبهشت ۱۳۹۸

سلام. خوشحالیم که مفید واقع شده.
دقت کنید که آدرس دهی های فایل در سایت به درستی خوانده شود و همچنین با زدن f12 و بررسی تب console نبایذ خطایی مشاهده کنید و همچنین تب network باید کتابخانه به درستی بصورت سبز و ۲۰۰ OK لود شده باشد.

پاسخ
طهماسب ۷ خرداد ۱۳۹۸

سلام. قابل توجه کلیه برنامه نویسان
ضمن تشکر از آقای شفیعی
برای اینکه از این تقویم روی هاست استفاده نمائید باید به این نکته توجه داشته باشید که آدرس دهی فایل ها به حروف بزرگ و کوچک حساس می باشد در سورس آماده ایشان فایل به نام persianDatepicker-default.css می باشد در حالی که در کدنویسی persianDatePicker-default.css صدا زده شده است حرف P را در Datapicker اصلاح نمائید

پاسخ

حسن شفیعی ۷ خرداد ۱۳۹۸

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

پاسخ

حسین ۴ بهمن ۱۳۹۷

مهندس جان واقعا ممنون لینک ها رو کامل قرار دادم درست شد . فقط این دو تا فایل prism/css-javascript.css/ و /prism/css-javascript.js/ که وجود نداشتن پاک کردم . تو عملکرد تقویم که تاثیر نداشتن این فایلها ؟

پاسخ

حسن شفیعی ۴ بهمن ۱۳۹۷

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

پاسخ

حسین ۴ بهمن ۱۳۹۷

ممنون از پاسخگویتون ، می شه لطفا بررسی بفرمائید مشکل از کجاست ؟
این فایلها prism/css-javascript.css/ و /prism/css-javascript.js/ وجود ندارند .
فایل ها رو در این مسیر از سایتم آپلود کردم http://avr-city.ir/weather/temp/datepicker/index.html

پاسخ

حسن شفیعی ۴ بهمن ۱۳۹۷

در هاست چون آدرس ریشه به همراه چند فولدر تو در تو هست, فایل های js ,css بدرستی لود نمی شوند. برای همین می توانید در فایل index.html اول آدرس هر دو فایل persianDatepicker-default.css , persianDatepicker.js یک اسلش بزاید یا آدرس کامل رو به اینصورت جایگزین کنید تا مشکل حل بشه
http://avr-city.ir/weather/temp/datepicker/css/persianDatepicker-default.css
http://avr-city.ir/weather/temp/datepicker/js/persianDatepicker.js

پاسخ

حسین ۴ بهمن ۱۳۹۷

سلام
با تشکر از به اشتراک گذاری مطلب مفیدتون ، من این فایل رو روی localhost اجرا کردم به خوبی کار می کنه ولی متاسفانه روی سایتم آپلود کردم کار نمی کنه . لطفا راهنمائی بفرمائید .
با تشکر

پاسخ

حسن شفیعی ۴ بهمن ۱۳۹۷

سلام. خوشحالم که مفید واقع شده.
ابتدا f12 رو بزنید تا ببینید آیا اروری از سمت جاواسکریپت مشاهده می کنید یا خیر. همچنین با دیدین سورس صفحه ctrl+u روی لینک ها کلیک کنید تا مطمین شوید که فایل های جاواسکریپت بدرستی لود شدند.
با بررسی این موارد مشکل رفع میشه.
موفق باشید.

پاسخ

بهناز ۳۰ دی ۱۳۹۷

عین کد رو هم دانلود کردم و فایل ها رو هم ساختم و آدرس ها رو چک کردم.
هیچ تغییری حاصل نشد در فیلد مربوطه .
به هر حال ممنون

پاسخ
بهناز ۲۷ دی ۱۳۹۷

من این مراحل رو کامل انجام دادم ولی هیچ تغییری حاصل نشد:
پوشه ی پلاگین رو دانلود و در ریشه ی سایت قرار دادم.
در تگ html فراخوانی کردم.
المان input با آیدی ساختم و در نهاست در تگ اسکریپت تابع رو فراخوانی کردم.

پاسخ

حسن شفیعی ۲۷ دی ۱۳۹۷

سلام. احتمالا یک جای کار رو اشتباه رفتید. نیاز است که خود جی کویری رو هم لود کنید.
همچنین میتونید console رو چک کنید متوجه مشکل میشید.
به هر حال سورس کد نهایی آخر همین پست رو میتونید دانلود و بدون مشکل استفاده کنید.

موفق باشید.

پاسخ

amir ۱۴ مرداد ۱۳۹۷

ببخشید یه سوال دیگه داشتم این آخریشه!
برای انکه بخوام فقط کد کپتچای رو صفحه ریفرش بشه مگه از تابع reload استفاده نمیشه ؟
من هرچقدر دایو کد کپچا رو reload می کنم نمیشه؟
اگه میشه راهنماییم کنید.
واقعا ممنونم

پاسخ

حسن شفیعی ۱۴ مرداد ۱۳۹۷

بله می تونید از reset() استفاده کنیدو یا از این آموزش بصورت ajaxی بهره ببرید.
https://netparadis.com/create-captcha-in-php

موفق باشید.

پاسخ

امیر ۱۱ مرداد ۱۳۹۷

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

پاسخ

حسن شفیعی ۱۱ مرداد ۱۳۹۷

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

پاسخ

amir ۱۳ مرداد ۱۳۹۷

سلام و عرض ادب و خسته نباشید
مهندس جان میشه راجع به درگاه بانکی تو سایت برامون توضیح بدی
اینکه چطور باید درگاه رو بگیریم و چطور به سایت لینک کنیم
ممنون میشم راهنمایی کنی.

پاسخ
حسن شفیعی ۱۳ مرداد ۱۳۹۷

سلام . ممنونم.

در این لینک کد درگاه ملت در مورد نحوه دریافت درگاه مستقیم و نحوه اتصال به اون رو نمایش دادیم .
اگر کمی php بلد باشید میتونید این رو روی سایت پیاده کنید. اگر هم از cms های معروف مثل وردپرس , جوملا و .. استفاده می کنید هم که برای هر کدام افزونه اون موجوده و نیاز که فقط نصب و استفاده کنید.
اگر سیستم سایت اختصاصیه که باید با برنامه نویس هماهنگ کنید که برای شما درگاه رو کدنویسی و اضافه بشه.

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

موفق باشید

پاسخ
amir ۱۴ مرداد ۱۳۹۷

بسیار متشکرم

پاسخ
حسن شفیعی ۱۴ مرداد ۱۳۹۷

خواهش می کنم. موفق باشید.

پاسخ

انتخاب تاریخ شمسی در jQuery

انتخاب تاریخ شمسی در jQuery

مثال : انتخاب تاریخ شمسی در jQuery

خروجی

آپشن ها

دانـلود باکــس

ساخت انتخابگر رنگ با jQuery UI

ساخت تقویم در PHP با jQuery و AJAX

ساخت DataTable با PHP و MySQL

ساخت Typeahead (auto Complete) با بوت استرپ

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه