نمایش تقویم شمسی توسط پلاگین 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 رتبه کاربر : 7082

دسته بندی : Asp.net Core Css بوت استرپ Html

نظر ویرایش گزارش نشان

به این سوال امتیاز بدهید 0

تعداد بازدید این سوال : 5657

1 نظر

pedram_khan : از چه نسخه ای از بوت استرپ استفاده می کنید ؟

امتیاز کاربر : 277 رتبه کاربر : 6 تاریخ ثبت : 10:23 1400/05/14

حذف

پاسخ دهنده : 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