آموزش جامع داتنتنیوک (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) |
| |
[آموزش] افزودن تقویم شمسی به 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 را بنویسید.
موفق باشید. |
| |
سلام و درود . گاهی نسخه برخی ماژول های که نصب میکنید از هسته که سازگاره بالاتره و باعث میشه بخش مدیریت هسته غیرفعال شود . در این حالت ارتقا هسته به نسخه بالاتر پیشنهاد میگردد . جهت دانلود نسخه اپگرید به بخش دانلود دی ان ان در همین سایت مراجعه نمایید .
|
| |
سلام و درود . در صورتی که از نسخه بومی استفاده میکند . حتما از نسخه دی ان ان پلاس استفاده کنید . چرا این نسخه به هیچ وجه تغییراتی در سورس و هسته انجام نشده و بومی سازی طبق استاندارد های تعریف شده جهانی در سمت فایل های کلاینتی نظیر CSS و JS انجام شده . مورد بعدی در دی ان ان سه تا ایکون هستش . یکی از بخش مدیریت اپلود میکنید . دو مورد دیگر در فایل های دی ان ان در بخش روت هستش که هر دو آن ها را به ایکون خود تغییر دهید . اما توجه کنید نام آن ها همان نام فعلی باشند . بعد از این تغییرات در گوگل وبمستر اگر درخواست بررسی مجدد برای reindex ثبت کنید . مشکل ایکون حل خواهد شد . نکته مهم : به هیچ از نسخه بومی ناشناس که در گیت هاب و جاهای دیگر آپلود شده اند استفاده نکنید .یا نسخه اصلی استفاده کنید .یا از جایی نسخه بومی را تهیه کنید که یک شرکت معتبر به لحاظ امنیتی و ... پشت اون نسخه بومی سازی باشد و در اینده دچار مشکلات نشوید .
|
| |
این نسخه در بخش ادیتور اپلود عکس مشکل داشت و در نسخه های بعدی رفع شده است . حتما هسته را به نسخه 9.11.1 که در سایت موجود است . دانلود و اپگرید نمایید .
|
| |
سلام و درود . لطفا بفرمایید از نسخه بومی دی ان ان پلاس استفاده می کنید یا خیر ؟ لطفا نسخه دی ان ان مربوطه را اعلام فرمایید .
|
| |
سلام و درود . برای نمایش صفحات باید موارد زیر چک کنید . مجوز ها : اگر میخواهید صفحات عمومی نمایش داده شوند حتما نیاز است مجوز نمایش تمام کاربران در بخش مجوز های صفحه موبوطه تیک خورده شود . مورد بعدی : تیک نمایش در منو هستش که حتما باید تیکشو بزنید . مورد آخر خیلی کم پیش میاد مشکل کش شدن سایت باشه که از بخش سرور > پاکسازی کش سایت میتوانید تغییرات اعمال شده رو رویت کنید .
|
| |
سلام و درود . در این خطا هیچ چیز واضح و مشخصی وجود ندارد . برای این که خطای اصلی را پیدا کنید . باید از یکی از بخش های زیر استفاده کنید . مدیریت دی ان ان > لاگ ها پوشه لاگ ها در مسیر : portals/_defualt/logs که به نسبت تاریخ روز فایل بندی شده که در داخل این فایل های تکست به نسبت تاریخ و روز هر لاگ مشکل شده و جزیئات بسیار کاملتری از خطا ارائه میشود . مورد بعدی که حین کار باید خطا ها را سریعتر مشاهده کنید باید از بخش وب کانفیگ بخش کد زیر را پیدا کرده و اصلاح کنید . تا خطا ها برای شما نمایش داده شود . <customErrors mode="RemoteOnly" /> این خط کد را پیدا کرده و به جای RemoteOnly باید واژه Off را جایگزین کنید . حتما دقت کنید . واژه Off به حروف و بزرگ و کوچک حساس می باشد.
|
| |
سلام و درود . Amp برای صفحات به صورت پیش فرض وجود نداره اما میشه براش ماژولشو نوشت . اما برای ماژول ایزی نیوز که بخش مقالات و اخبار و ... رو پوشش میده این مسئله به صورت یک ویژگی ارائه شده که تمامی محتوایی خبری و مطلبی که با این ماژول منتشر میشه رو AMP دار کرد .
|
| |
سلام و درود . لطفا تمامی ماژول های همراه پوسته به خصوص تم پلاگین و منو رو نصب کنید کنید . ضمنا برای نصب پوسته حتما از بخش افزونه ها اقدام کنید به نصب . ضمنا مسیری که فایل خطا میدهد چک کنید که در ان مسیر فایل های پوسته نصب شده باشد . در صورتی که فایل ها نبود از پوشه مجاورش میتوانید دستی کپی کنید و در محل ذکر شده فایل ها را قرار دهید تا مشکل رفع گردد .
|
| |