تاریخ عضویت : 1400/02/20
ارسالها : 1 نوشته
|
لطفا درخصوص استفاده از DatePicker شمسی در ماژول اکشن فرم راهنمایی بفرمایید. هر دو DatePicker موجود در قسمت طراحی فرم تاریخ را بصورت میلادی بر میگرداند. این در حالیست که DatePicker خود DNN (در قسمت پروفایل کاربران) تاریخ را شمسی نمایش می دهد. زبان سایت روی فارسی تنظیم است و تاریخ هایی که در فرم ها نمایش داده می شود شمسی است اما تاریخ DatePickerها میلادی است.
|
|
|
|
|
|
تاریخ عضویت : 1394/01/06
ارسالها : 730 نوشته
کشور کاربر : 
( تشکرها: 19 بار )
( 222 تشکر دریافتی در 194 ارسال )
|
سلام و درود . ماژول های ثالث به صورت پیش فرض بومی نیستند و برای داشتن تقویم یا دیتاپیکر یا تاریخ شمسی نیاز است بومی سازی گردد . اگر این محصول را از دی ان ان پلاس تهیه کرده اید لازم است توضیحات زیرا مطالعه بفرمایید . ما در نسخه های ما قبل 5.1 به پایین که دارای دیتاپیکر جی کوئری بود دیتاپیکر را کامل بومی سازی میکردیم. اما با توجه به این که در نسخه های جدید یعنی 5.05 به بعد اکشن فرم دیتاپیکر جی کوئری خود را حذف کرد و از یک دیتاپیکر خاصی استفاده کرده است که امکان شمسی سازی آن ممکن نیست . به همین جهت برای داشتن دیتاپیکر شمسی ما راه حل دیگری پیشنهاد میکنم . کافیست یک تکس باکس به فرم اضافه کنید و یک ایدی به آن تخصیص دهید و سپس با یک لایبری ساده دیتاپیکر جی کوئری شمسی را به ان اضافه کنید و با آیدی تکس باکس به ان اشاره کنید . در حال حاضر این بهترین و ساده ترین روش برای داشتن دیتاپیکر شمسی است. |
|
|
|
|
|
|
تاریخ عضویت : 1394/01/06
ارسالها : 730 نوشته
کشور کاربر :
( تشکرها: 19 بار )
( 222 تشکر دریافتی در 194 ارسال )
|
[آموزش] افزودن تقویم شمسی به 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 را بنویسید.
موفق باشید. ویرایش شد بوسیله کاربر 1404/10/04 08:38:09 ق.ظ
| دلیل ویرایش: اصلاح کلی |
|
|
|
|
|
|
تاریخ عضویت : 1394/01/06
ارسالها : 730 نوشته
کشور کاربر :
( تشکرها: 19 بار )
( 222 تشکر دریافتی در 194 ارسال )
|
آموزش جامع داتنتنیوک (DNN) آموزش شمسیسازی استاندارد و universal انواع فیلد تاریخ در DNN و فرمسازها راهنمای جامع پیادهسازی Persian Date Picker بر روی اکشن فرم (Action Form)، فرمسازهای DNN و تمام سیستمهای وب در اکثر پروژههای داتنتنیوک (DNN) یا سایر سامانههای تحت وب، نیاز به یک تقویم شمسی سبک، دقیق و کاربرپسند وجود دارد. روشی که در این آموزش فرا میگیرید، کلاسبس (Class-based approach) بوده و کاملاً یونیک و سراسری است؛ یعنی متکی به یک فرمساز خاص نیست و علاوه بر اکشن فرم (Action Form / Plant An App)، روی تمامی فرمسازها، ماژولهای DNN و حتی فرمهای ساده HTML قابل پیادهسازی است. 📌 منطق و نحوه کارکرد این روش چیست؟ در این روش، ما بهجای درگیر شدن با کنترلهای پیچیده یا ناسازگار، یک فیلد متنی معمولی (Text Box) ایجاد کرده و یک کلاس CSS مشخص (مثلاً pDatepicker) به آن اختصاص میدهیم. سپس با فراخوانی کتابخانه استاندارد Persian Datepicker (babakhani)، کنترل متنی را در سمت کاربر به یک تقویم شمسی گرافیکی تعاملی تبدیل میکنیم. 🚀 مراحل پیادهسازی قدم به قدم ۱ فراخوانی کتابخانهها و فایلهای CDN برای شروع باید اسکریپتها و استایلهای اصلی تقویم شمسی را به صفحه اضافه کنید. در ماژول اکشن فرم: وارد تنظیمات ماژول (Module Settings) > بخش تنظیمات پیشرفته (Advanced Settings) > فیلد پاصفحه (Footer / Custom Footers) شده و کد زیر را وارد کنید: در سایر بخشهای DNN یا فرمسازهای دیگر: میتوانید این کد را در تنظیمات صفحه (Page Settings) بخش Header/Footer یا در فایل Skin خود قرار دهید: <!-- Persian Date & Datepicker Dependencies -->
<script src="https://unpkg.com/persian-date@1.1.0/dist/persian-date.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/persian-datepicker@1.2.0/dist/js/persian-datepicker.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/persian-datepicker@1.2.0/dist/css/persian-datepicker.min.css"/> ۲ تنظیم اسکریپت راهانداز (Initialization Script) حالا باید اسکریپت اتچکننده تقویم به کلاس مورد نظر را اجرا کنیم. در اکشن فرم: وارد مدیریت اکشن فرم شوید > بخش General Settings > گزینه Open section در Advanced Settings > فیلد Initialization scripts. در سایر سیستمها / فرمسازها: کد زیر را داخل یک تگ <script> در انتهای صفحه یا فایل JS پروژه قرار دهید: $(document).ready(function () {
// Delay execution to ensure dynamic DOM content is fully loaded
setTimeout(function () {
$(".pDatepicker").pDatepicker({
"inline": false,
"format": "YYYY/MM/DD",
"viewMode": "day",
"initialValue": false,
"autoClose": true,
"position": "auto",
"observer": true,
"toolbox": {
"calendarSwitch": {
"enabled": false
}
},
"responsive": true
});
}, 1500);
}); 💡 چرا از setTimeout استفاده شده است؟ فرمسازهای پیشرفته مثل Action Form یا فرمهای مبتنی بر AJAX/React، عناصر فرم را کمی پس از بارگذاری اولیه DOM رندر میکنند. قرار دادن تایمآوت ۱.۵ ثانیهای تضمین میکند اسکریپت تقویم دقیقا زمانی اجرا شود که فیلد متنی در صفحه کاملاً آماده شده است. ۳ اختصاص کلاس به فیلد ورودی (Text Box) اکنون کافی است یک فیلد متنی ساده ایجاد کنید و کلاس pDatepicker را به آن اختصاص دهید: - در Action Form: یک فیلد از نوع Text Box بسازید و در بخش Control CSS Classes عبارت pDatepicker را وارد کنید.
- در HTML ساده / سایر فرمسازها: کافیست به اینپوت متنی کلاس مربوطه را اضافه کنید:
<input type="text" class="form-control pDatepicker" />
⚙️ تنظیمات پرکاربرد (Configuration Options) میتوانید ویژگیهای تقویم را بر اساس نیاز پروژه در اسکریپت مرحله ۲ سفارشیسازی کنید: پارامتر | مقدار پیشنهادی | توضیحات |
|---|
format | "YYYY/MM/DD" | فرمت خروجی تاریخ ثبت شده در فیلد (مثلاً ۱۴۰۵/۰۵/۱۰) | initialValue | false یا true | اگر false باشد فیلد در ابتدا خالی است، اگر true باشد تاریخ امروز قرار میگیرد. | autoClose | true | بستن خودکار پاپآپ تقویم بلافاصله پس از انتخاب روز توسط کاربر. | observer | true | تغییرات دستی ورودی را زیر نظر میگیرد و تقویم را همگام میکند. |
🛠️ نکات فنی و حل مشکلات رایج (Troubleshooting) ⚠️ مشکل ۱: عدم نمایش تقویم روی فیلد
اگر تقویم باز نشد، ابتدا F12 مرورگر را بزنید و Console را بررسی کنید. مطمئن شوید jQuery در صفحه بارگذاری شده باشد (که در تمام صفحات DNN بهصورت پیشفرض موجود است). همچنین اگر صفحه شما سنگین است مقدار زمان setTimeout را به ۲۰۰۰ میلیثانیه افزایش دهید. ⚠️ مشکل ۲: رفتن تقویم به زیر عناصر دیگر (تداخل Z-Index)
اگر پاپآپ تقویم زیر سایر عناصر فرم یا مدالها (Modal) قرار گرفت، کد CSS زیر را به استایل سفارشی پوسته یا صفحه اضافه کنید: .pdatepicker-plot-area {
z-index: 999999 !important;
} ارائهشده برای انجمن تخصصی داتنتنیوک (DNN Plus) ویرایش شد بوسیله کاربر 1405/05/10 03:10:44 ق.ظ
| دلیل ویرایش: مشخص نشده است |
|
|
|
|
|
|
رفتن به انجمن
شما نمی توانید مطلب جدید در این انجمن ایجاد کنید
شما نمی توانید برای مطالب ارسالی پاسخ ارسال کنید
شما نمی توانید مطلب ارسالی خود را حذف کنید
شما نمی توانید مطلب ارسالی خود را ویرایش کنید
شما نمی توانید در مطلب ارسالی خود نظرسنجی ایجاد کنید
شما نمی توانید در این انجمن نظر دهید
اطلاعیه :
پرسش و پاسخ های تخصصی دی ان ان از کوکی ها استفاده می کند. با ادامه این فهرست از شما می خواهیم برای استفاده از کوکی ها موافقت کنید.
جزئیات بیشتر
بستن