Add the links in header
<script type=’text/javascript’ src=’http://cdnjs.cloudflare.com/ajax/libs/webfont/1.6.27/webfontloader.js’></script>
<script src=”http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.js”></script>
<script src=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js”></script>
<link rel=”stylesheet” href=” http://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.css”>
 
Add the HTML code in product page top of “Add to cart button”
<p class=”line-item-property__field”>
<label for=”date”>Date</label>
<input required class=”required” id=”datepicker” type=”text” name=”properties[Date]” data-date-format=”DD/MM/YYYY”>
</p>
<p class=”line-item-property__field”>
<label for=”time”>time</label>
<input class=”required timenew” id=”timepickernn” type=”text” name=”properties[Time]”>
<input class=”required” id=”timepickernnd” type=”text” name=”properties[Delivery Time]” style=”display:none”;>
</p>
 
Add the js code in .js file
<script>
$(window).load(function() {
setTimeout(function(){
$(“.doubly-wrapper .list li:nth-child(2)”).trigger(‘click’);
},3000 );
$(‘#datepicker’).datepicker({
numberOfMonths: 1,
minDate: 0,
dateFormat: ‘dd-M-yy’
}).attr(‘readonly’, ‘readonly’);
$(“#datepicker”).on(“change”,function(){
var selected = $(this).val();
var dt = new Date();
var nd =dt.toLocaleString([], { hour: ‘2-digit’, minute: ‘2-digit’ });
var today = formatDate(dt);
if(today == selected && (nd > ‘{{ settings.startime }}’)){
$(‘#timepickernnd’).hide();
$(‘#timepickernnd’).val(”);
$(‘#timepickernn’).show();
dt.setMinutes(dt.getMinutes() + {{ settings.deltime }} );
nd = dt.toLocaleString([], { hour: ‘2-digit’, minute: ‘2-digit’ });
test(nd);
}else{
$(‘#timepickernn’).hide();
$(‘#timepickernn’).val(”);
$(‘#timepickernnd’).show();
test1(‘{{ settings.startime }}’);
}
});
function formatDate(date) {
var monthNames = [
“Jan”, “Feb”, “Mar”,
“Apr”, “May”, “Jun”, “Jul”,
“Aug”, “Sep”, “Oct”,
“Nov”, “Dec”
];
var day = date.getDate();
var monthIndex = date.getMonth();
var year = date.getFullYear();
return day + ‘-‘ + monthNames[monthIndex] + ‘-‘ + year;
}
function test(nd){
$(‘#timepickernn’).timepicker({
timeFormat: ‘h:mm p’,
‘minTime’: nd,
‘maxTime’: ‘{{ settings.endtime }}’,
dynamic: false,
dropdown: true,
scrollbar: true,
interval: 15
});
}
function test1(nd){
// alert(nd);
$(‘#timepickernnd’).timepicker({
timeFormat: ‘h:mm p’,
‘minTime’: nd,
‘maxTime’: ’11:59PM’,
dynamic: false,
dropdown: true,
scrollbar: true,
interval: 15
});
}
});
</script>

Open chat