انتخابگر تاریخ
شمسی
انتخاب گر تاریخ jQuery تبدیل شده به تاریخ شمسی. صفحه پلاگین.
<!-- Css -->
<link rel="stylesheet" href="vendors/datepicker-jalali/bootstrap-datepicker.min.css" type="text/css">
<!-- Javascript -->
<script src="vendors/datepicker-jalali/bootstrap-datepicker.min.js"></script>
<script src="vendors/datepicker-jalali/bootstrap-datepicker.fa.min.js"></script>
انتخاب گر تاریخ ساده
<input type="text" name="date-picker-shamsi" class="form-control text-left" dir="ltr">
$('input[name="date-picker-shamsi"]').datepicker({
dateFormat: "yy/mm/dd",
showOtherMonths: true,
selectOtherMonths: false
});
انتخاب گر تاریخ با نمایش لیست
<input type="text" name="date-picker-shamsi-list" class="form-control text-left" dir="ltr">
$('input[name="date-picker-shamsi-list"]').datepicker({
dateFormat: "yy/mm/dd",
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showButtonPanel: true
});
انتخاب گر تاریخ محدود
<input type="text" name="date-picker-shamsi-limited" class="form-control text-left" dir="ltr">
$('input[name="date-picker-shamsi-limited"]').datepicker({
dateFormat: "yy/mm/dd",
showOtherMonths: true,
selectOtherMonths: true,
minDate: 0,
maxDate: "+14D"
});
میلادی
یک کامپوننت جاوا اسکریپت برای انتخاب تاریخ و زمان. صفحه پلاگین.
<!-- Css -->
<link rel="stylesheet" href="vendors/datepicker/daterangepicker.css" type="text/css">
<!-- Javascript -->
<script src="vendors/datepicker/daterangepicker.js"></script>
انتخاب گر تاریخ تکی
<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true
});
انتخاب گر بازه تاریخی ساده
<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker();
انتخاب گر بازه تاریخی ساده با یک Callback
<input type="text" name="daterangepicker" class="form-control">
$('input[name="daterangepicker"]').daterangepicker({
opens: 'left'
}, function (start, end, label) {
swal("A new date selection was made", start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'), "success")
});
انتخاب گر بازه تاریخی با ساعت
<input type="text" name="datetimes" class="form-control">
$('input[name="datetimes"]').daterangepicker({
timePicker: true,
startDate: moment().startOf('hour'),
endDate: moment().startOf('hour').add(32, 'hour'),
locale: {
format: 'M/DD hh:mm A'
}
});
فیلد خالی در ابتدا
<input type="text" name="datefilter" class="form-control">
var datefilter = $('input[name="datefilter"]');
datefilter.daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
datefilter.on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});