jQuery timepicker 时间格式不起作用答案

【问题标题】：jQuery timepicker time format not workingjQuery timepicker 时间格式不起作用
【发布时间】：2017-05-12 19:40:40
【问题描述】：

我有一个时间选择器表单元素：

<input type="text" name="start_time" class="timepicker" placeholder="Start Time*" required>

我正在尝试格式化但它不起作用：

我关注了documentation并添加了timeFormat，如下所示：

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

所以我不明白为什么它不起作用。任何帮助将不胜感激！

JSFiddle

【问题讨论】：

标签： javascript jquery jquery-ui-timepicker

【解决方案1】：

您发布的文档与jquery-timepicker documentation 中的不同。那么你的 timeFormat 应该是：timeFormat: 'h:i a'。

该文档的某处写明该格式使用 php 日期格式：php date

【讨论】：

我想分别选择小时和分钟，它有半小时的时间间隔我不想要这个，我怎么能做到这一点。

【解决方案2】：

对我来说，我的工作是使用 tt 作为当时的格式。无论我做什么，所有其他人都没有在我的页面上呈现，它是 24 小时格式。这里每个元素都有一个timepicker类

  <script type="text/javascript">
        $(function () {
            $('.timepicker').timepicker({
               timeFormat: 'h:mm tt',
                startTime: '8:00 am',
                dynamic: true,
                dropdown: true,
                scrollbar: true
            });
        });                      
    </script>

【讨论】：

【解决方案3】：

这是我相信你想要的一个例子：

<!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>

【讨论】：

【解决方案4】：

任何地方建议的解决方案都不适合我，所以我检查了我正在使用的时间选择器的来源（列为 jquery.timePicker.min.js）并发现格式化完成了：show24Hours: true/false ie

                         $('.weekdays').timePicker({   
                                startTime: "08:00", 
                                endTime: "22:00",
                                show24Hours: false,
                                step: 30                  
                        });

这次似乎没有选项可以避免前导零。

【讨论】：

【解决方案5】：

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

【讨论】：

您好，sandeep agarwal，欢迎您。请考虑添加更多信息。