بوت استرپ انتخابگر تاریخ و زمان
<div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">نمونه های پایه</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_1"/> <div class="input-group-append" data-target="#kt_datetimepicker_1" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">نمونه دیگر</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_2" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_2"/> <div class="input-group-append" data-target="#kt_datetimepicker_2" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> <span class="form-text text-muted pt-2">استفاده محلی <a href="https://momentjs.com/">https://momentjs.com/</a></span> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">فقط تاریخ</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group input-group-solid date" id="kt_datetimepicker_3" data-target-input="nearest"> <input type="text" class="form-control form-control-solid datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_3"/> <div class="input-group-append" data-target="#kt_datetimepicker_3" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">فقط زمان </label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group input-group-solid date" id="kt_datetimepicker_4" data-target-input="nearest"> <input type="text" class="form-control form-control-solid datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_4"/> <div class="input-group-append" data-target="#kt_datetimepicker_4" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-clock"></i> </span> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">بدون آیکون</label> <div class="col-lg-4 col-md-9 col-sm-12"> <input type="text" class="form-control form-control-solid datetimepicker-input" id="kt_datetimepicker_5" placeholder="انتخاب تاریخ & time" data-toggle="datetimepicker" data-target="#kt_datetimepicker_5"/> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">تاریخ فعال و غیرفعال</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_6" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_6"/> <div class="input-group-append" data-target="#kt_datetimepicker_6" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">انتخاب گرهای لینک شده</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="row"> <div class="col"> <div class="input-group date" id="kt_datetimepicker_7_1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="تاریخ شروع" data-target="#kt_datetimepicker_7_1"/> <div class="input-group-append" data-target="#kt_datetimepicker_7_1" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> <div class="col"> <div class="input-group date" id="kt_datetimepicker_7_2" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="تاریخ انتها" data-target="#kt_datetimepicker_7_2"/> <div class="input-group-append" data-target="#kt_datetimepicker_7_2" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">خطی</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div id="kt_datetimepicker_8" class="w-300px mb-2"></div> <span class="form-text text-muted">دکمه های روشن امروز را فعال کنید</span> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">نمونه مودال</label> <div class="col-lg-4 col-md-9 col-sm-12"> <a href="#" class="btn font-weight-bold btn-light-primary" data-toggle="modal" data-target="#kt_datetimepicker_modal">راه اندازی نمونه مودال</a> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">پایه نمونه</label> <div class="col-lg-9 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_9" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_9"/> <div class="input-group-append" data-target="#kt_datetimepicker_9" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">انتخابگر تاریخ</label> <div class="col-lg-9 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_10" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_10"/> <div class="input-group-append" data-target="#kt_datetimepicker_10" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">انتخابگر زمان</label> <div class="col-lg-9 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_11" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_11"/> <div class="input-group-append" data-target="#kt_datetimepicker_11" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> </div> </div> </div>
// نسخه ی نمایشی 1 دلار('#kt_datetimepicker_1').datetimepicker(); // نسخه ی نمایشی 2 دلار('#kt_datetimepicker_2').datetimepicker({ locale: 'de' }); // نسخه ی نمایشی 3 دلار('#kt_datetimepicker_3').datetimepicker({ format: 'L' }); // نسخه ی نمایشی 4 دلار('#kt_datetimepicker_4').datetimepicker({ format: 'LT' }); // نسخه ی نمایشی 5 دلار('#kt_datetimepicker_5').datetimepicker(); // نسخه ی نمایشی 6 دلار('#kt_datetimepicker_6').datetimepicker({ defaultتاریخ: '11/1/2020', disabledتاریخs: [ moment('12/25/2020'), new تاریخ(2020, 11 - 1, 21), '11/22/2022 00:53' ] }); // نسخه ی نمایشی 7 دلار('#kt_datetimepicker_7_1').datetimepicker(); دلار('#kt_datetimepicker_7_2').datetimepicker({ useفعلی: false }); دلار('#kt_datetimepicker_7_1').on('change.datetimepicker', function(e) { دلار('#kt_datetimepicker_7_2').datetimepicker('minتاریخ', e.date); }); دلار('#kt_datetimepicker_7_2').on('change.datetimepicker', function(e) { دلار('#kt_datetimepicker_7_1').datetimepicker('maxتاریخ', e.date); }); // نسخه ی نمایشی 8 دلار('#kt_datetimepicker_8').datetimepicker({ inline: true, }); // نسخه ی نمایشی 9 دلار('#kt_datetimepicker_9').datetimepicker(); // نسخه ی نمایشی 10 دلار('#kt_datetimepicker_10').datetimepicker({ locale: 'de' }); // نسخه ی نمایشی 11 دلار('#kt_datetimepicker_11').datetimepicker({ format: 'L' });
<div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">وضعیت معتبر</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_12" data-target-input="nearest"> <input type="text" class="form-control is-valid datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_12"/> <div class="input-group-append" data-target="#kt_datetimepicker_12" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> <div class="valid-feedback"> موفقیت! شما"ve done it. </div> </div> <span class="form-text text-muted">می توانید توضیحات راهنما را اینجا قرار دهید.</span> </div> </div> <div class="form-group row"> <label class="col-form-label text-right col-lg-3 col-sm-12">Invalid استان</label> <div class="col-lg-4 col-md-9 col-sm-12"> <div class="input-group date" id="kt_datetimepicker_12" data-target-input="nearest"> <input type="text" class="form-control is-invalid datetimepicker-input" placeholder="انتخاب تاریخ & time" data-target="#kt_datetimepicker_12"/> <div class="input-group-append" data-target="#kt_datetimepicker_12" data-toggle="datetimepicker"> <span class="input-group-text"> <i class="ki ki-calendar"></i> </span> </div> <div class="invalid-feedback"> Sorry, the date is taken. Try another date? </div> </div> <span class="form-text text-muted">می توانید توضیحات راهنما را اینجا قرار دهید.</span> </div> </div>
// نسخه ی نمایشی 12 دلار('#kt_datetimepicker_12').datetimepicker();
