دسته بندی ها
19:46 1400/05/14

نمایش تقویم شمسی توسط پلاگین MD.PersianDateTimePicker در Asp.net Core

سلام من تمام مراحل پیاده سازی افزودن تاریخ شمسی رو رفتم ولی اگر تصویر رو ببینید پلاگین درست عمل نمیکنه مشکل کجاست ؟

 

<label>تاریخ شروع قرارداد</label>

<div class="input-group col-md-9 col-xs-12" style="padding-left:9px; padding-right:9px;">
   <div class="input-group-addon" style="border:1px solid gray; padding:6px">
      <span><i class="right fa fa-calendar"></i></span>
   </div>
   <input asp-for="@Model.BiganGhrarDadeDate" type="text" class="form-control custominput" data-mddatetimepicker="true" data-placement="left" data-mdpersiandatetimepicker="" data-trigger="focus" data-enabletimepicker="false" data-mdpersiandatetimepickerselecteddatetime="{&quot;Year&quot;:1399,&quot;Month&quot;:1,&quot;Day&quot;:13,&quot;Hour&quot;:0,&quot;Minute&quot;:0,&quot;Second&quot;:0}" data-mdpersiandatetimepickershowing="true" aria-describedby="popover265350">

</div>
<span asp-validation-for="@Model.BiganGhrarDadeDate" style="margin-top:10px;" class="text-danger col-md-offset-3 col-md-9 col-xs-12"></span>
</div>

 

ویرایش شده در پنج شنبه 14 مرداد 1400 ساعت 22:24:53
مشخصات سوال کننده :
کاربر : frisat     امتیاز کاربر : ‎−2     رتبه کاربر : 7135
دسته بندی : Asp.net Core Css بوت استرپ Html
به این سوال امتیاز بدهید    0
تعداد بازدید این سوال : 5837
1 نظر
pedram_khan : از چه نسخه ای از بوت استرپ استفاده می کنید ؟
امتیاز کاربر : 277   رتبه کاربر : 6   تاریخ ثبت : 10:23 1400/05/14
حذف
هوش مصنوعی

پاسخ هوش مصنوعی

برای بررسی و رفع مشکل پلاگین MD.PersianDateTimePicker در Asp.net Core، نکات زیر را در نظر بگیرید:

1. **اطمینان از بارگذاری صحیح JS و CSS**: اطمینان حاصل کنید که فایل های JavaScript و CSS مربوط به MD.PersianDateTimePicker به درستی در صفحه شما بارگذاری شده اند. این فایل ها را به header یا footer پروژه خود اضافه کنید:

2. **صحیح بودن تنظیمات `data-*`**: بررسی کنید که تمامی ویژگی های `data-*` به درستی تنظیم شده اند و هیچ اشتباهی در نام گذاری یا مقادیر وجود ندارد.

3. **بررسی دقت در ID و class**: اطمینان حاصل کنید که تمام ID ها و کلاس هایی که می خواهید استفاده کنید، به درستی شناخته شده و منحصر به فرد هستند.

4. **تنظیمات JavaScript**: اطمینان حاصل کنید که کد JavaScript شما (اگر نیاز است) به درستی برای تنظیم پلاگین نوشته شده باشد. مثلاً:


$(document).ready(function() {
    $('#yourInputId').mdPersianDateTimePicker({
        targetDateSelector: '#yourOtherInputId',
        autoSelect: true,
        format: 'YYYY/MM/DD',
        timePicker: false
    });
});

5. **بررسی کنسول مرورگر**: از Developer Tools مرورگر (F12) برای بررسی خطاهای JavaScript استفاده کنید. شاید خطایی در کنسول وجود داشته باشد که مشکل را نشان دهد.

6. **مدل و Binding**: اطمینان حاصل کنید که Binding داده ها به درستی انجام می شود و هیچ مشکلی در ارسال داده ها به کنترلر وجود ندارد.

با بررسی این نکات، باید بتوانید مشکل را شناسایی و رفع کنید. در صورت ادامه مشکل، اطلاعات بیشتری از خطاها یا رفتار پلاگین ارایه دهید تا بیشتر کمک کنم.

به این پاسخ امتیاز بدهید    0
امتیاز: - رتبه: -
پاسخ دهنده : saedbfd 22:59 1400/05/14

دقت کنید شما از چه نسخه ای از بوت استرپ و چه نسخه ای از پلاگین MD.PersainDataTimePicker استفاده می کنید. اگر از نسخه های قدیمی تر این پلاگین استفاده می کنید باید حتما از بوت استرپ 3 استفاده بشه. اما چون در حال حاضر نسخه 4 از بوت استرپ هم موجود هست و پلاگین تقویم شمسی برای این نسخه هم در دسترس هست نحوه استفاده از پلاگین تاریخ شمسی در بوت استرپ 4 رو میگم خدمتتون.

 

نمایش تقویم شمسی توسط پلاگین MD.PersianDateTimePicker در بوت استرپ 4

  • در ابتدا یک پروژه در ویژوال استودیو ایجاد کنید. در این مثال از Asp.net Core نسخه 5.0 استفاده می کنیم.
  • سپس پلاگین MD.PersianDateTimePicker نسخه همسان با بوت استرپ 4.3 را دانلود کنید. (دانلود پلاگین تقویم شمسی MD.PersianDateTimePicker)
  • بعد از دانلود پلاگین، پوشه دانلود شده را در wwwroot و در پوشه lib کپی کنید. به تصویر زیر دقت کنید.

پلاگین تاریخ شمسی در Core

 

  • در Layout پروژه فایل css و js مربوط به پلاگین MD.PersianDateTimePicker را به پروژه لینک کنید.

در قسمت Javascript

<script src="~/lib/MdPersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.js"></script>

در قسمت css

<link href="~/lib/MdPersiandatetimepicker/dist/jquery.md.bootstrap.datetimepicker.style.css" rel="stylesheet" />

 

  • خب حالا می تونید به راحتی در هر کدام از View ها که بخواید از این پلاگین استفاده کنید.

نحوه استفاده در View

@{
    ViewData["Title"] = "Home Page";
}

<div class="col-md-3">
    <input type="text" id="calender" class="form-control" />
</div>

@section Scripts{
    <script>
        $('#calender').MdPersianDateTimePicker({
            targetTextSelector: '#calender',
        });
    </script>
}

 

به این ترتیب می تونید از پلاگین تاریخ شمسی نسخه به روز شده با بوت استرپ 4.3 هم استفاده کنید.

منبع

دانلود سورس

ویرایش شده در جمعه 15 مرداد 1400 ساعت 13:26:43
به این پاسخ امتیاز بدهید    0
امتیاز: 1664 رتبه: 1
2 نظر
frisat : مهندس الان پلاگین به درستی نمایش داده میشه ولی وقتی تاریخ رو انتخاب میکنم تاریخ در تکست باکس قرار نمیگیره.نوع داده هم String هست
امتیاز کاربر : ‎−2   رتبه کاربر : 7135   تاریخ ثبت : 12:36 1400/05/15
حذف
saedbfd : اصلاح شد
امتیاز کاربر : 1664   رتبه کاربر : 1   تاریخ ثبت : 01:25 1400/05/15
حذف
آخرین سوالات ثبت ‌شده
سوالات مرتبط
آموزش های پرطرفدار
آموزش ساخت اتوماسیون اداری تحت وب
مدیر سایت 449٬000 تومان
آموزش ساخت سیستم فروش و انبارداری وب
مدیر سایت 419٬000 تومان
آموزش ساخت سیستم حقوق و دستمزد وب با سینکفیوژن
مدیر سایت 599٬000 تومان
آموزش ساخت سیستم آزمونگیر آنلاین
مدیر سایت 399٬000 تومان
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود