[آموزش] افزودن تقویم شمسی به Action Form (روش استاندارد و بهینه)
با سلام خدمت دوستان.
برای استفاده از Datepicker شمسی در اکشن فرم، به جای اینکه برای هر فیلد کدنویسی کنیم، از یک روش اصولی استفاده میکنیم. در این روش، فایلهای اصلی را در تنظیمات ماژول لود کرده و فقط با یک کلاس CSS تقویم را فعال میکنیم.
نکته مهم: این روش به گونهای طراحی شده که کمترین تداخل را با قالب سایت داشته باشد و سرعت لود را کاهش ندهد.
مرحله اول: فراخوانی کتابخانهها
ابتدا باید فایلهای CSS و JS مورد نیاز را به صفحه اضافه کنیم.
به مسیر زیر بروید:
Manage (مدیریت) > Settings (تنظیمات) > Page Settings (تنظیمات صفحه)
یا اگر میخواهید فقط برای همین ماژول باشد:
Settings (تنظیمات ماژول) > Advanced Settings (تنظیمات پیشرفته) > Page Footer (پاصفحه)
کد زیر را در این بخش مربوطه قرار دهید (پیشنهاد میگردد جهت حداکثر سرعت فایل ها را دانلود کرده و لینک دهی داخلی کنید):
کد:
<link rel="stylesheet" href="https://dnnplus.ir/Portals/0/DatePicker/persian-datepicker.min.css">
<script src="https://dnnplus.ir/Portals/0/DatePicker/persian-date.min.js" type="text/javascript"></script>
<script src="https://dnnplus.ir/Portals/0/DatePicker/persian-datepicker.min.js" type="text/javascript"></script>
مرحله دوم: فعالسازی اسکریپت
حالا باید کدی بنویسیم که تقویم را روی فیلدها اعمال کند.
وارد محیط طراحی Action Form شوید و به بخش زیر بروید:
Module Settings > General > Initialization Scripts
کد زیر را دقیقاً در این قسمت کپی کنید (دقت کنید که در این بخش نباید تگ <script> بگذارید):
کد:
$(document).ready(function () {
// Delay execution to ensure elements are rendered
setTimeout(function () {
$(".pDatepicker").pDatepicker({
"inline": false,
"format": "L", // Default Format: YYYY/MM/DD
"viewMode": "day",
"initialValue": false, // Do not auto-fill the input
"position": "auto",
"observer": false, // Disable observer for better performance
"toolbox": {
"calendarSwitch": {
"enabled": false // Hide Gregorian switch
}
},
"responsive": true
});
}, 1000); // 1 second delay
});
مرحله سوم: استفاده در فرم
کار تمام است! حالا برای هر فیلد متنی (Text Box) که میخواهید تقویم داشته باشد:
- روی فیلد کلیک کنید.
- به بخش UI Settings بروید.
- در کادر CSS Classes عبارت pDatepicker را بنویسید.
موفق باشید.