استفاده از تقویم شمسی سازگار با بوت استرپ در وب
سلام
دنبال یه تقویم شمسی که با bootstrap 4 به بعد کار کنه و در همه مرورگرها جواب بده هستم..
از kendoDatePicker استفاده کردم ولی در همه مرورگرها درست ج نداد..
از persiandatepicker هم من نتونستم توی bootstrap 4 استفاده کنم...
یا همین ها اگه ورژن جدید که مشکل حل شده هست ممنون میشم معرفی کنید..
کد استفاده شده با persiandatepicker این هست :
<link href="~/persiandatepicker/jquery.Bootstrap-PersianDateTimePicker.css" rel="stylesheet" />
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input class="form-control circleInput"
placeholder="تاریخ شروع " id="stDate" name="stDate"
data-MdDateTimePicker="true" data-trigger="click" data-targetselector="#stDate" data-groupid="group1"
data-formdate="true" data-enabletimepicker="false" data-placement="bottom" />
</div>
@section PanelScripts
{
<script src="~/persiandatepicker/calendar.js"></script>
<script src="~/persiandatepicker/jquery.Bootstrap-PersianDateTimePicker.js"></script>
}
درحالت کلیک روی تاریخ به ابن صورت میشود
توی قسمت کنسول لاگ هم خطایی ایجاد نمی شه ...
در صورتی که bootstrap 3.5 را ایمپورت کنم مشکل تاریخ حل میشه ولی خوب دیزاین صفحه ام میریزه به هم...
پاسخ هوش مصنوعی
برای استفاده از تقویم شمسی سازگار با Bootstrap 4، شما می توانید از برخی کتابخانه های جدیدتر که به روز شده اند استفاده کنید. یکی از گزینه ها کتابخانه pDatePicker است که به خوبی با Bootstrap 4 سازگار است.
در زیر نمونه ای از نحوه استفاده از این کتابخانه ارایه شده است:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/xsoh/persian-datepicker/1.0.0/dist/css/persian-datepicker.min.css" rel="stylesheet" />
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" class="form-control" id="stDate" placeholder="تاریخ شروع" />
</div>و این کد JavaScript برای فعال سازی تقویم شمسی:
$(document).ready(function() {
$('#stDate').persianDatepicker({
format: 'YYYY/MM/DD',
// دیگر تنظیمات خود را اینجا اضافه کنید
});
});شما باید jQuery و persian-datepicker را به پروژه خود اضافه کنید. در اینجا نحوه اضافه کردن آنها به صفحه شما آمده است:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.rawgit.com/xsoh/persian-datepicker/1.0.0/dist/js/persian-datepicker.min.js"></script>با این روش، شما باید قادر باشید از تقویم شمسی در Bootstrap 4 بدون مشکلات قبلی استفاده کنید.
سلام
مشکل شما در استفاده از کامپوننت persiandatepicker چی هست؟ چون این کامپوننت جی کوئری هست و نباید با بوت استرپ مشکلی داشته باشه.
لطفا اگر براتون مقدوره سوال رو ویرایش کنید و کدهای خودتون رو برای استفاده از این کامپوننت قرار بدید و احیانا اگر خطایی هم براتون به وجود اومده متن خطا یا تصویر خطا رو قرار بدید تا بشه بهتر راهنمایی کرد
سلام
توی گوگل سرچ کنید
persian datetimepicker bootstrap 4
نتایج زیادی رو براتون میاره که می تونید استفاده کنید
یکی از dateTimepicker هایی که میتونه براتون مفید باشه رو در این لینک با نحوه استفاده معرفی کرده
- آموزش استفاده از پلاگین گردونه شانس در Asp.net core به همراه سورس
- نمایش متن به صورت فرمت شده در CkEditor
- آموزش استفاده از SignalR در Asp.net Core با مثال عملی
- ادغام چند گزارش استیمول سافت بصورت پی دی اف در یک فایل
- نحوه تغییر استایل کامپوننت select2 چگونه است ؟
- چگونه امنیت پروژه را در Asp.net Core افزایش دهیم ؟
- ارسال پارامتر در دستور window.open جی کویری
- ارسال پارامتر از طریق جاوااسکریپت با کلیک روی تگ a
- خطای 500 زمان اجرا شدن پروژه روی هاست
- کویری نویسی در استیمول سافت جهت فیلتر اطلاعات
- کار با CkEditor با قابلیت آپلود عکس
- خطا در ایجاد migration در Asp.net core
- تفاوت های Asp.net core و Asp.net mvc چیه؟
- دلیل اسپم شدن ایمیل های ارسالی از سرور
- نحوه لایه بندی پروژه Core و اضافه کردن به IIS
- ارسال ایمیل در Asp.net core
- آیا میشه در mvc core از کامپونت استفاده کرد
- آپلود فایل در Asp.net core چگونه است؟
- حذف کامل یک رکورد در جدول ریلیشن شده
- اشکال در آپلود فایل ویدیو در mvc core 2
