jQuery timepicker time format not working
Question
I have a timepicker form element:
<input type="text" name="start_time" class="timepicker" placeholder="Start Time*" required>
which I'm trying to format but it's not working:
I followed the documentation and added timeFormat like so:
$('input.timepicker').timepicker({
interval: 30,
minTime: '8:00 am',
maxTime: '11:30 pm',
startTime: '8:00 am',
timeFormat: 'h:mm p',
dynamic: true,
dropdown: true,
scrollbar: true
});
So I don't understand why it's not working. Any help would be appreciated!
5 answers
solution1
4 ACCPTED 2017-05-12 20:13:43
The documentation posted by you it's not the same as in jquery-timepicker documentation . Then your timeFormat should be: timeFormat: 'h:i a' .
Somewhere on that documentation is written that the format uses the php date format: php date
solution2
2 2018-03-28 18:25:40
For me i what worked was using tt for the format of the time. All others were not rendering on my page no matter what i did it was 24hr format. Here each element has a class of timepicker
<script type="text/javascript">
$(function () {
$('.timepicker').timepicker({
timeFormat: 'h:mm tt',
startTime: '8:00 am',
dynamic: true,
dropdown: true,
scrollbar: true
});
});
</script>
solution3
0 2017-05-12 20:22:12
Here is an example of what you want I believe:
<!DOCTYPE html> <html> <head> <title>Untitled Document</title> <meta charset="UTF-8"> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> </head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script> <script> $(document).ready(function(){ $('.timepicker').timepicker({ timeFormat: 'h:mm p', interval: 30, minTime: '8', maxTime: '11:30pm', startTime: '08:00', dynamic: true, dropdown: true, scrollbar: true }); }); </script> <body> <input type="text" name="start_time" class="timepicker" placeholder="Start Time*" required> </body> </html>
solution4
0 2019-03-16 02:55:13
None of the solutions suggested anywhere worked for me, so I checked the source of the timepicker I`m using (listed as jquery.timePicker.min.js) and find the formating is done with: show24Hours: true/false ie
$('.weekdays').timePicker({
startTime: "08:00",
endTime: "22:00",
show24Hours: false,
step: 30
});
There appears to be no option in this timePicker to avoid leading zeros.
solution5
0 2020-01-10 12:53:01
$(document).ready({
$('input.timepicker').timepicker({
change: function(time) {
// the input field
var element = $(this), text;
// get access to this Timepicker instance
var timepicker = element.timepicker();
text = 'Selected time is: ' + timepicker.format(time);
element.siblings('span.help-line').text(text);
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.