آموزش استفاده از Date Picker شمسی در جاوااسکریپت
چگونه از تاریخ شمسی در جاوااسکریپت استفاده کنیم؟ یکی از پلاگین پر کاربرد در محیط وب، پلاگین DatePicker شمسی یه به قول بعضی از دوستان DatePicker فارسی هست که شما بتونید تاریخ فارسی رو به عنوان ورودی انتخاب کنید. پلاگین های زیادی هست که یکی از بهترین پلاگین های موجود رو می تونید از این لینک دریافت کنید.
دوره های شبکه، برنامه نویسی، مجازی سازی، امنیت، نفوذ و ... با برترین های ایران
سرفصل های این مطلب
یکی از مزیت های این پلاگین وجود دو کتابخانه مجزا هست که یکی برای کار با تاریخ شمسی استفاده میشه و کتابخانه بعدی پلاگین DatePicker شمسی هست. در قسمت توضیحی در مورد کتابخانه Persian Date که برای کار با تاریخ فارسی هست توضیحاتی بدیم. اگر از nodejs استفاده می کنید بوسیله npm و با اجرای دستورات زیر به راحتی می توانید پلاگین مورد نظر رو بر روی سیستمون دریافت کنید:
npm install persian-date --save-dev
بعد از اجرای دستورات بالا یک پوشه با نام node__modules ایجاد می شود که از طریق مسیر زیر می توانید به فایل js این کتابخانه دسترسی داشته باشید:
node_modules/persian_date/dist/persian-date.min.js
یک صفحه ساده html ایجاد کرده و کد های زیر را داخل آن می نویسیم:
<!DOCTYPE html> <html> <head> <title>Persian Date Sample</title> <meta charset="utf-8" /> </head> <body> <div id="output-container"></div> <script src="node_modules/persian-date/dist/persian-date.min.js"></script> </body> </html>
حالا می تونیم از persian date استفاده کنیم. به عنوان یک مثال خیلی ساده فرض کنید که می خواییم تاریخ جاری رو به صورت شمسی داخل صفحه نمایش بدیم. بوسیله کد زیر این کار به راحتی امکان پذیر هست:
document.getElementById('output-container').innerHTML = new persianDate().format();
اما فرض کنید که بخواییم یک تاریخ دلخواه رو به شمسی تبدیل کنیم، برای اینکار به این صورت عمل می کنیم:
var date = new Date(2015,10,12);
document.getElementById('output-container').innerHTML = new persianDate(date).format();
برای فرمت دهی خروجی هم می تونید به صورت زیر کد رو بنویسید:
document.getElementById('output-container').innerHTML = new persianDate().format('dddd DD MMMM YYYY');
اجرای دستور بالا خروجی زیر را تولید خواهد کرد:
سه شنبه 30 بهمن 1397
کتابخانه Persian Date قابلیت های زیادی دارید که می توانید با مراجعه به این لینک توضیحات کامل آن را مطالعه کنید. در بخش بعدی در مورد پلاگین Date Picker صحبت خواهیم کرد.در بخش قبلی با کتابخانه Persian Calendar و نحوه تبدیل تاریخ میلادی به شمسی آشنا شدیم.
در این قسمت با پلاگین این کتابخانه که پلاگین Persian Calendar هست آشنا خواهیم شد. این پلاگین به شما این امکان را می دهد تا تاریخ مورد نظرتون رو به راحتی انتخاب کنید. این کنترل امکانات زیادی دارد که در این مطلب به برخی از آن ها اشاره خواهیم کرد. برای دریافت این پلاگین از دستور npm به صورت زیر استفاده می کنیم:
npm install persian-datepicker
پس از دریافت فایل ها، داخل صفحه html کدهای زیر رو می نویسیم تا کتابخانه این پلاگین به صفحه اضافه شود:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/persian.datepicker.css"/> </head> <body> <input type="text" class="date-picker" /> <script src="js/jquery.js"></script> <script src="js/persian.date.js"></script> <script src="js/persian.datepicker.js"></script> </body> </html>
در صفحه بالا یک کنترل input از نوع text داریم، برای تبدیل این کنترل به date picker کد زیر رو می نویسیم:
<script type="text/javascript">
$(document).ready(function() {
$(".date-picker").pDatepicker();
});
</script>
با نوشتن کد بالا، بعد از لود شدن صفحه، با انتخاب کنترل input پلاگین date picker فعال شده و می توانید تارخ مورد نظر را انتخاب کنید. در حالت عادی زمانی که پلاگین فعال می شود تاریخ جاری به عنوان مقدار پیش فرض داخل input نمایش داده می شود. اگر نمی خواهید تاریخ جاری نمایش داده شود کافیه initialValue رو false کنید:
<script type="text/javascript">
$(document).ready(function() {
$(".date-picker").pDatepicker({
initialValue: false
});
});
</script>
این پلاگین تنظیمات زیادی دارد که می توانید از این لینک مستندات کاملش رو مشاهده کنید.