jQuery timepicker time format not working

Question

jQuery timepicker time format not working

15.1k views Asked by 14wml At 14 September 2024 at 17:36

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!

JSFiddle

Original Q&A

There are 5 answers

zb22 On 12 May 2017 at 20:22

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>

Matt On 16 March 2019 at 02:55

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 i.e.

                         $('.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.

Mike On 28 March 2018 at 18:25

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>

sandeep agarwal On 10 January 2020 at 12:53

$(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);
        }
    });
});

**Edwin** · Accepted Answer · 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

TechQA.

jQuery timepicker time format not working

There are 5 answers

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in JQUERY-UI-TIMEPICKER

Popular Questions

Popular Tags

Trending Questions