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

07:46:00 PM - ۱۴۰۰/۰۵/۱۴

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

<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>

ویرایش شده در پنج شنبه ۱۴ مرداد ۱۴۰۰ ساعت ۲۲:۲۴:۵۳

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

1 نظر

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

حذف امتیاز کاربر : 132 رتبه کاربر : 8 تاریخ ثبت : ۱۰:۲۳ ۱۴۰۰/۰۵/۱۴

پاسخ دهنده : saedbfd 10:59:00 PM - ۱۴۰۰/۰۵/۱۴

دقت کنید شما از چه نسخه ای از بوت استرپ و چه نسخه ای از پلاگین 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 هم استفاده کنید.

منبع

دانلود سورس

ویرایش شده در جمعه ۱۵ مرداد ۱۴۰۰ ساعت ۱۳:۲۶:۴۳