در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

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

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

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

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

#datepicker_فارسی #وارد_کردن_تاریخ_شمسی_در_پایگاه_داده #تاریخ_شمسی_برای_جاوا_اسکریپت #پلاگین_datepicker_برای_وب #تاریخ_شمسی_در_وب
4 نظر
katauri

سلام

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

The specified value "\u06F1\u06F3\u06F9\u06F7-\u06F1\u06F2-\u06F1\u06F1" does not conform to the required format, "yyyy-MM-dd

حسین احمدی

سلام، وقت بخیر

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

katauri
$('#date').persianDatepicker({
    observer: true,
    format: 'YYYY-MM-DD',
});

ابوالفضل رهنما

سلام

این کد را امتحان کنید

<script type="text/javascript">
    $(document).ready(function () {
        $("#Date").pDatepicker({
            initialValue: false,
            format: 'YYYY/MM/DD',
            autoClose: true
        });
    });
</script>

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

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