معرفی 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 صحبت خواهیم کرد.

نویسنده: حسین احمدی

منبع: وب سایت توسینسو

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

#datepicker_فارسی #bootstrap_datepicker_شمسی #تبدیل_تاریخ_میلادی_به_شمسی #تقویم_فارسی_jquery #persian_date_picker #تاریخ_شمسی_در_جاوا_اسکریپت
7 نظر
iran58

سلام

اگر nodejs نداشته باشیم باید چکار کنیم

حسین احمدی

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

iran58

سلام

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

یعنی بصورت ۱۳۹۷-۱۱-۳۰ ۱۶:۳۹:۴۵ ب ظ نباشد و ۱۳۹۷-۱۱-۳۰ باشد

حسین احمدی

می تونید فرمت رو به صورت زیر تعریف کنید:

document.getElementById('output-container').innerHTML = new persianDate().format('YYYY/MM/DD');
iran58

سلام

مهندس فرض کنید اطلاعات را بصورت میلادی از بانک داریم دریافت میکنیم و داخل یک جدول داخل view مورد نظر نمایش می دهیم

حال سوالم اینه که آیا می توانم بکمک این دستور تاریخ ها را بصورت شمسی نمایش بدهم یا باید هنگام خواندن اطلاعات از بانک تبدیل تاریخ را انجام دهم

حسین احمدی

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

iran58

باتشکر

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

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره تابستانه می تونی امروز ارزونتر از فردا خرید کنی ....