تا %60 تخفیف خرید برای 2 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

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

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

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

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

نظر شما
برای ارسال نظر باید وارد شوید.
7 نظر
افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند