انتخابگر تاریخ

شمسی

انتخاب گر تاریخ 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'));
});