1. css
<![CDATA[
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-datetime-picker@2.5.11/jquery.datetimepicker.min.css">
<link rel="stylesheet" href="public/admin/plugins/daterangepicker/daterangepicker.css">
]]>
2. js
<![CDATA[
<script src="https://cdn.jsdelivr.net/npm/jquery-datetime-picker@2.5.11/build/jquery.datetimepicker.full.min.js"></script>
]]>
3. script
<![CDATA[
//datepicker time
DATE_TIME_PICKER_FORMAT='d-m-Y H:i';
DATE_TIME_PICKER_LANG='en';
DATE_TIME_PICKER_TIMES=[
'00:00',
'00:15',
'00:30',
'00:45',
'01:00',
'01:15',
'01:30',
'01:45',
'02:00',
'02:15',
'02:30',
'02:45',
'03:00',
'03:15',
'03:30',
'03:45',
'04:00',
'04:15',
'04:30',
'04:45',
'05:00',
'05:15',
'05:30',
'05:45',
'06:00',
'06:15',
'06:30',
'06:45',
'07:00',
'07:15',
'07:30',
'07:45',
'08:00',
'08:15',
'08:30',
'08:45',
'09:00',
'09:15',
'09:30',
'09:45',
'10:00',
'10:15',
'10:30',
'10:45',
'11:00',
'11:15',
'11:30',
'11:45',
'12:00',
'12:15',
'12:30',
'12:45',
'13:00',
'13:15',
'13:30',
'13:45',
'14:00',
'14:15',
'14:30',
'14:45',
'15:00',
'15:15',
'15:30',
'15:45',
'16:00',
'16:15',
'16:30',
'16:45',
'17:00',
'17:15',
'17:30',
'17:45',
'18:00',
'18:15',
'18:30',
'18:45',
'19:00',
'19:15',
'19:30',
'19:45',
'20:00',
'20:15',
'20:30',
'20:45',
'21:00',
'21:15',
'21:30',
'21:45',
'22:00',
'22:15',
'22:30',
'22:45',
'23:00',
'23:15',
'23:30',
'23:45'
];
// for date and time
$('.datetimepicker_time').datetimepicker({
dayOfWeekStart : 0,
lang:DATE_TIME_PICKER_LANG,
format:'d-m-Y H:i:s',
timepicker:true,
// datepicker:false,
//minDate:DATE_TIME_PICKER_MINDATE,
allowTimes:DATE_TIME_PICKER_TIMES,
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
});
//for date only
$('.datetimepicker').datetimepicker({
dayOfWeekStart : 0,
lang:DATE_TIME_PICKER_LANG,
format:'d-m-Y',
timepicker:false,
// datepicker:false,
//minDate:DATE_TIME_PICKER_MINDATE,
allowTimes:DATE_TIME_PICKER_TIMES,
});
]]>
4. html
<![CDATA[
<input type="text" name="" value="" class="form-control datetimepicker_time " >
<input type="text" name="" value="" class="form-control datetimepicker " >
]]>
functions : onShow()
<![CDATA[
jQuery(function(){
jQuery('#date_timepicker_start').datetimepicker({
allowTimes:DATE_TIME_PICKER_TIMES,
format:'d-m-Y H:i',
onShow:function( ct ){
this.setOptions({
maxDate:jQuery('#date_timepicker_end').val()?jQuery('#date_timepicker_end').val():false
})
},
timepicker:true
});
jQuery('#date_timepicker_end').datetimepicker({
allowTimes:DATE_TIME_PICKER_TIMES,
format:'d-m-Y H:i',
onShow:function( ct ){
console.log(jQuery('#date_timepicker_start').val());
var d=jQuery('#date_timepicker_start').val();
console.log(moment(d, 'DD-MM-YYYY').format('MM/DD/YYYY'));
d= moment(d, 'DD-MM-YYYY').format('YYYY-MM-DD');
this.setOptions({
minDate:d,
maxDate:d,
//maxTime:'11:00'
});
},
timepicker:true
});
});
]]>
function : onChangeDateTime()
<![CDATA[
$('.start_date').datetimepicker({
dayOfWeekStart : 0,
lang:DATE_TIME_PICKER_LANG,
format:DATE_TIME_PICKER_FORMAT,
onShow:function( ct ){
var job_scheduled_date=$('#job_scheduled_date').val();
var job_reported_date=$('#job_reported_date').val();
var mindate=job_scheduled_date?job_scheduled_date:job_reported_date;
mindate=moment(mindate,'DD-MM-YYYY').format('YYYY-MM-DD');
var maxdate=new Date();
console.log(mindate);
this.setOptions({
//maxDate:$(".start_date").val()?$(".start_date").val():false,
minDate:mindate,
maxDate:maxdate,
})
},
timepicker:true,
allowTimes:DATE_TIME_PICKER_TIMES,
});
$('.end_date').datetimepicker({
dayOfWeekStart : 0,
lang:DATE_TIME_PICKER_LANG,
format:DATE_TIME_PICKER_FORMAT,
onShow:function( ct ){
var mindate=moment($('.start_date').val(),'DD-MM-YYYY').format('YYYY-MM-DD');
var maxdate=new Date();
//console.log(mindate);
this.setOptions({
//maxDate:$(".start_date").val()?$(".start_date").val():false,
minDate:mindate,
maxDate:maxdate,
})
},
timepicker:true,
onChangeDateTime:function(dp,$input){
// alert($input.val())
let starttime=moment($('.start_date').val(),'DD-MM-YYYY').format('YYYY-MM-DD');
let mintime = new Date(starttime);
let maxtime = new Date();
if(mintime>maxtime){
$('.end_date').val('');
}
},
allowTimes:DATE_TIME_PICKER_TIMES,
});
]]>
<![CDATA[
$('#demo').datetimepicker({
ownerDocument: document,
contentWindow: window,
value: '',
rtl: false,
format: 'Y/m/d H:i',
formatTime: 'H:i',
formatDate: 'Y/m/d',
// new Date(), '1986/12/08', '-1970/01/05','-1970/01/05',
startDate: false,
step: 60,
monthChangeSpinner: true,
closeOnDateSelect: false,
closeOnTimeSelect: true,
closeOnWithoutClick: true,
closeOnInputClick: true,
openOnFocus: true,
timepicker: true,
datepicker: true,
weeks: false,
// use formatTime format (ex. '10:00' for formatTime: 'H:i')
defaultTime: false,
// use formatDate format (ex new Date() or '1986/12/08' or '-1970/01/05' or '-1970/01/05')
defaultDate: false,
minDate: false,
maxDate: false,
minTime: false,
maxTime: false,
minDateTime: false,
maxDateTime: false,
allowTimes: [],
opened: false,
initTime: true,
inline: false,
theme: '',
touchMovedThreshold: 5,
// callbacks
onSelectDate: function () {},
onSelectTime: function () {},
onChangeMonth: function () {},
onGetWeekOfYear: function () {},
onChangeYear: function () {},
onChangeDateTime: function () {},
onShow: function () {},
onClose: function () {},
onGenerate: function () {},
withoutCopyright: true,
inverseButton: false,
hours12: false,
next: 'xdsoft_next',
prev : 'xdsoft_prev',
dayOfWeekStart: 0,
parentID: 'body',
timeHeightInTimePicker: 25,
timepicker<a href="https://www.jqueryscript.net/tags.php?/Scroll/">Scroll</a>bar: true,
todayButton: true,
prevButton: true,
nextButton: true,
defaultSelect: true,
scrollMonth: true,
scrollTime: true,
scrollInput: true,
lazyInit: false,
mask: false,
validateOnBlur: true,
allowBlank: true,
yearStart: 1950,
yearEnd: 2050,
monthStart: 0,
monthEnd: 11,
style: '',
id: '',
fixed: false,
roundTime: 'round', // ceil, floor
className: '',
weekends: [],
highlightedDates: [],
highlightedPeriods: [],
allowDates : [],
allowDateRe : null,
disabledDates : [],
disabledWeekDays: [],
yearOffset: 0,
beforeShowDay: null,
enterLikeTab: true,
showApplyButton: false,
insideParent: false,
});
]]>
MANVIA BLOG