با سلام - در این مقاله به آموزش نحوه استفاده از کنترل PersianDateTimePicker(تقویم فارسی) در برنامه های تحت وب می پردازیم
ابتدا یک پروژه از نوع Empty ایجاد نمایید.
یک پوشه با نام Scripts ایجاد کنید و پوشه PersianDateTimePicker بهمراه فایل ضمضمه شده در آن که شامل فایل با نام jquery-ui-datetimepicker.min.js برای کار با تاریخ شمسی است را به برنامه اضافه نمایید.
سپس درون این پوشه فایلهای Jquery - JqueryUI را نیز اضافه نمایید.
پوشه دیگری بنام Css در روت اصلی برنامه ایجاد نمایید و درون آن فایلهای jquery-ui-datetimepicker.min.css و jquery-ui.css و همینطور یک پوشه بنام images که درون آن مجموعه تصاویری برای نمایش کنترل datepicker مورد استفاده قرار میگیرد را نیز اضافه نمایید.
فایل سولوشن برنامه ما بشکل زیر خواهد بود
یک صفحه html به برنامه اضافه نمایید واز قسمت تگ head آن تمامی فایلهای css و js را که به برنامه اضافه نمودید را به صفحه html خود اتصال دهید . قسمت تگ head بصورت زیر خواهد بود.
<head>
<title></title>
<meta charset="utf-8" />
<link href="Css/jquery-ui.css" rel="stylesheet" />
<link href="Css/jquery-ui-datetimepicker.min.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script src="scripts/PersianDateTimePicker/jquery-ui-datetimepicker.min.js"></script>
</head>
سپس یک کنترل متنی بصورت زیر در قمت body صفحه html ایجاد نمایید
<input type="text" id="txtdate" name="txtdate" />
برای اینکه کنترل متنی ما برای تقویم شمسی مورد استفاده قرار گیرد اسکریپت زیر را در قسمت انتهای سند html خود درج نمایید.
<script>
$(document).ready(function () {
$("#txtdate").datepicker();
});
</script>
محتویات صفحه html شما بصورت زیر خواهد بود
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="Css/jquery-ui.css" rel="stylesheet" />
<link href="Css/jquery-ui-datetimepicker.min.css" rel="stylesheet" />
<script src="scripts/jquery-1.10.2.min.js"></script>
<script src="scripts/jquery-ui.js"></script>
<script src="scripts/PersianDateTimePicker/jquery-ui-datetimepicker.min.js"></script>
</head>
<body>
<input type="text" id="txtdate" name="txtdate" />
<script>
$(document).ready(function () {
$("#txtdate").datepicker();
});
</script>
</body>
</html>
برنامه را اجرا نمایید و سپس بر روی کنترل متنی خود کلیک نمایید در این صورت تقویم شمسی شما نمایان خواهد شد و با کلیک بر روی آن تارخ مورد نظر به کنترل متنی اضافه خواهد شد.
