مترونیک | بوت استرپ انتخابگر تاریخ

بوت استرپ انتخابگر تاریخ

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

نمونه انتخابگر تاریخ

جی اس
جی اس


        				<div class="card card-custom">
        					<div class="card-header">
        						<h3 class="card-title">
        							نمونه انتخابگر تاریخ
        						</h3>
        					</div>
        					<!--begin::Form-->
        					<form class="form">
        						<div class="card-body">
        							<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" readonly placeholder="انتخاب تاریخ"/>
        								</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">
        										<input type="text" class="form-control" readonly  placeholder="انتخاب تاریخ"/>
        										<div class="input-group-append">
        											<span class="input-group-text">
        												<i class="la la-calendar-check-o"></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" >
        										<input type="text" class="form-control" readonly  value="05/20/2017" id="kt_datepicker_3"/>
        										<div class="input-group-append">
        											<span class="input-group-text">
        												<i class="la la-calendar"></i>
        											</span>
        										</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">موقعیت</label>
        								<div class="col-lg-4 col-md-9 col-sm-12">
        									<div class="input-group date mb-2" >
        										<input type="text" class="form-control" placeholder="بالا راست" id="kt_datepicker_4_1"/>
        										<div class="input-group-append">
        										<span class="input-group-text">
        											<i class="la la-bullhorn"></i>
        											</span>
        										</div>
        									</div>

        									<div class="input-group date mb-2">
        										<input type="text" class="form-control" placeholder="بالا چپ" id="kt_datepicker_4_2"/>
        										<div class="input-group-append">
        											<span class="input-group-text">
        											<i class="la la-clock-o"></i>
        											</span>
        										</div>
        									</div>

        									<div class="input-group date mb-2">
        										<input type="text" class="form-control" placeholder="پایین راست"  id="kt_datepicker_4_3"/>
        										<div class="input-group-append">
        											<span class="input-group-text">
        											<i class="la la-check"></i>
        											</span>
        										</div>
        									</div>

        									<div class="input-group date">
        										<input type="text" class="form-control" placeholder="پایین چپ" id="kt_datepicker_4_4"/>
        										<div class="input-group-append">
        											<span class="input-group-text">
        											<i class="la la-check-circle-o"></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-daterange input-group" id="kt_datepicker_5">
        										<input type="text" class="form-control" name="start"/>
        										<div class="input-group-append">
        											<span class="input-group-text"><i class="la la-ellipsis-h"></i></span>
        										</div>
        										<input type="text" class="form-control" name="end"/>
        									</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">
        									<div class id="kt_datepicker_6"></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">
        									<a href="#" class="btn font-weight-bold btn-light-primary" data-toggle="modal" data-target="#kt_datepicker_modal">اجرا مودال</a>
        								</div>
        							</div>
        						</div>
        						<div class="card-footer">
        							<div class="form-group row">
        								<div class="col-lg-9 ml-lg-auto">
        									<button type="reset" class="btn btn-primary mr-2">ارسال</button>
        									<button type="reset" class="btn btn-secondary">لغو</button>
        								</div>
        							</div>
        						</div>
        					</form>
        					<!--end::Form-->
        				</div>


        				// کلاس definition

        				var KTبوت استرپانتخابگر تاریخ = function () {

        					var arrows;
        					if (KTUtil.isRTL()) {
        						arrows = {
        							leftArrow: '<i class="la la-angle-right"></i>',
        							rightArrow: '<i class="la la-angle-left"></i>'
        						}
        					} else {
        						arrows = {
        							leftArrow: '<i class="la la-angle-left"></i>',
        							rightArrow: '<i class="la la-angle-right"></i>'
        						}
        					}

        					// خصوصی functions
        					var demos = function () {
        						// minimum setup
        						دلار('#kt_datepicker_1').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayسلامghlight: true,
        							orientation: "bottom left",
        							templates: arrows
        						});

        						// minimum setup for modal demo
        						دلار('#kt_datepicker_1_modal').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayسلامghlight: true,
        							orientation: "bottom left",
        							templates: arrows
        						});

        						// input group layout
        						دلار('#kt_datepicker_2').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayسلامghlight: true,
        							orientation: "bottom left",
        							templates: arrows
        						});

        						// input group layout for modal demo
        						دلار('#kt_datepicker_2_modal').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayسلامghlight: true,
        							orientation: "bottom left",
        							templates: arrows
        						});

        						// enable clear button
        						دلار('#kt_datepicker_3, #kt_datepicker_3_validate').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayBtn: "linked",
        							clearBtn: true,
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						// enable clear button for modal demo
        						دلار('#kt_datepicker_3_modal').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayBtn: "linked",
        							clearBtn: true,
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						// orientation
        						دلار('#kt_datepicker_4_1').datepicker({
        							rtl: KTUtil.isRTL(),
        							orientation: "top left",
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						دلار('#kt_datepicker_4_2').datepicker({
        							rtl: KTUtil.isRTL(),
        							orientation: "top right",
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						دلار('#kt_datepicker_4_3').datepicker({
        							rtl: KTUtil.isRTL(),
        							orientation: "bottom left",
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						دلار('#kt_datepicker_4_4').datepicker({
        							rtl: KTUtil.isRTL(),
        							orientation: "bottom right",
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						// range picker
        						دلار('#kt_datepicker_5').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayسلامghlight: true,
        							templates: arrows
        						});

        						 // inline picker
        						دلار('#kt_datepicker_6').datepicker({
        							rtl: KTUtil.isRTL(),
        							todayسلامghlight: true,
        							templates: arrows
        						});
        					}

        					return {
        						// public functions
        						init: function() {
        							demos();
        						}
        					};
        				}();

        				jQuery(document).ready(function() {
        					KTبوت استرپانتخابگر تاریخ.init();
        				});

حداقل

اینپوت گروهی

با دکمه

دکمه های روشن امروز را فعال کنید

موقعیت

انتخابگر

رنج تاریخ با انتخابگرهای لینک شده

خطی

مودال

اجرا مودال

اعتبارسنجی

جی اس
جی اس


						<div class="card card-custom">
							<div class="card-header">
								<h3 class="card-title">
									اعتبارسنجی
								</h3>
							</div>
							<!--begin::Form-->
							<form class="form">
								<div class="card-body">
									<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">
												<input type="text" class="form-control is-valid" readonly  placeholder="انتخاب تاریخ"/>
												<div class="input-group-append">
													<span class="input-group-text">
													<i class="la la-calendar-check-o"></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">حالت نامتعبر</label>
										<div class="col-lg-4 col-md-9 col-sm-12">
											<div class="input-group date" >
												<input type="text" class="form-control is-invalid" readonly  placeholder="انتخاب تاریخ"/>
												<div class="input-group-append">
													<span class="input-group-text">
													<i class="la la-calendar-check-o"></i>
													</span>
												</div>
												<div class="invalid-feedback">
													با عرض پوزش ، تاریخ گرفته شده است. تاریخ دیگری را امتحان کنید؟
												</div>
											</div>
											<span class="form-text text-muted">نمونه متنی راهنما که بدون تغییر است.</span>
										</div>
									</div>
								</div>
								<div class="card-footer">
									<div class="form-group row">
										<div class="col-lg-9 ml-lg-auto">
											<button type="reset" class="btn btn-primary mr-2">ارسال</button>
											<button type="reset" class="btn btn-secondary">لغو</button>
										</div>
									</div>
								</div>
							</form>
							<!--end::Form-->
						</div>


						// کلاس definition

						var KTبوت استرپانتخابگر تاریخ = function () {

							var arrows;
							if (KTUtil.isRTL()) {
								arrows = {
									leftArrow: '<i class="la la-angle-right"></i>',
									rightArrow: '<i class="la la-angle-left"></i>'
								}
							} else {
								arrows = {
									leftArrow: '<i class="la la-angle-left"></i>',
									rightArrow: '<i class="la la-angle-right"></i>'
								}
							}

							// خصوصی functions
							var demos = function () {
								// minimum setup
								دلار('#kt_datepicker_1_validate').datepicker({
									rtl: KTUtil.isRTL(),
									todayسلامghlight: true,
									orientation: "bottom left",
									templates: arrows
								});

								// input group layout
								دلار('#kt_datepicker_2_validate').datepicker({
									rtl: KTUtil.isRTL(),
									todayسلامghlight: true,
									orientation: "bottom left",
									templates: arrows
								});
							}

							return {
								// public functions
								init: function() {
									demos();
								}
							};
						}();

						jQuery(document).ready(function() {
							KTبوت استرپانتخابگر تاریخ.init();
						});

حالت معتبر

با موفقبت انجام شد

نمونه متنی راهنما که بدون تغییر است.

حالت نامتعبر

با عرض پوزش ، تاریخ گرفته شده است. تاریخ دیگری را امتحان کنید؟

نمونه متنی راهنما که بدون تغییر است.

سفارشی

چیدمان

کراد

امکانات

گزارش کارها

حاشیه های سود

مدیریت نیروی انسانی

ابزارها

اعلان های کاربر 23 جدید

اقدامات سریع

بوت استرپ انتخابگر تاریخ

نمونه انتخابگر تاریخ

اعتبارسنجی

پروفایل کاربر 12 پیام

آخرین اعلان ها

سبد خرید

پیام های سیستم

اعلان ها

مراقبت از مشتری

گزارشات

اعضا

انتخاب نسخه ی نمایشی

نسخه ی نمایشی 1

نسخه ی نمایشی 2

نسخه ی نمایشی 3

نسخه ی نمایشی 4

نسخه ی نمایشی 5

نسخه ی نمایشی 6

نسخه ی نمایشی 7

نسخه ی نمایشی 8

نسخه ی نمایشی 9

نسخه ی نمایشی 10

نسخه ی نمایشی 11

نسخه ی نمایشی 12

نسخه ی نمایشی 13

نسخه ی نمایشی 14

نسخه ی نمایشی 15

نسخه ی نمایشی 16

نسخه ی نمایشی 17

نسخه ی نمایشی 18

نسخه ی نمایشی 19

نسخه ی نمایشی 20

نسخه ی نمایشی 21

نسخه ی نمایشی 22

نسخه ی نمایشی 23

نسخه ی نمایشی 24

نسخه ی نمایشی 25

نسخه ی نمایشی 26

نسخه ی نمایشی 27

نسخه ی نمایشی 28

نسخه ی نمایشی 29

نسخه ی نمایشی 30