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

معرفی 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>

این پلاگین تنظیمات زیادی دارد که می توانید از این لینک مستندات کاملش رو مشاهده کنید. در قسمت بعدی نحوه استفاده از این پلاگین رو داخل ASP.NET توضیح خواهید داد.

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

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

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

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