I need to add time in a daterangepicker using jQuery and JavaScript. I am explaining my code below.
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="" onfocus="removeBorder('stdate')">
$('input[name="startgroupdate"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
Here only the date is ing from the calendar, but I need to add also the time, so the result should be like "03/04/2017 12 10 PM".
I need to add time in a daterangepicker using jQuery and JavaScript. I am explaining my code below.
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="" onfocus="removeBorder('stdate')">
$('input[name="startgroupdate"]').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
Here only the date is ing from the calendar, but I need to add also the time, so the result should be like "03/04/2017 12 10 PM".
Share Improve this question edited Apr 5, 2017 at 12:57 Paul Roub 36.4k27 gold badges86 silver badges95 bronze badges asked Apr 5, 2017 at 11:50 user5443928user5443928 03 Answers
Reset to default 7Check this out..You need to add time property and daterangepicker js
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link data-require="bootstrap@*" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script type="text/javascript" src="https://netdna.bootstrapcdn./bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<link href="daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<script src="moment.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<input class="form-control" name="startgroupdate" id="stdate" type="text" placeholder="">
<script>
$(function() {
$('input[name="startgroupdate"]').daterangepicker({
timePicker: true,
locale: {
format: 'MM/DD/YYYY h:mm A'
},
singleDatePicker: true,
showDropdowns: true,
drops: "down",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});
});
</script>
</body>
</html>
Yo have to add property
timePicker: true
may this links helps https://www.daterangepicker./#example2
You need to add the timepicker flag to daterangepicker.
$('input[name="startgroupdate"]').daterangepicker({
timePicker: true,
timePickerIncrement: 30,
singleDatePicker: true,
showDropdowns: true
drops: "up",
minDate: '01/01/2012',
maxDate: '12/31/2017'
});