DateTimePicker时间选择器如何在24小时制下显示但以12小时制显示?

Question

我正在使用来自http://eonasdan.github.io/bootstrap-datetimepicker/的Bootstrap日期时间选择器，它工作得很好，但有一个问题。我只设置了一个时间选择器，如下所示：

$(function () {
    $('#startTime, #endTime').datetimepicker({
        format: 'hh:mm',
        pickDate: false,
        pickSeconds: false,
        pick12HourFormat: false            
    });
});

这将选择器设置为24小时制，以便我可以选择19:00作为时间。但是当我选择此时间时，它会在输入框中显示为07:00。以下是显示选择器的设置：

    <div class="input-group date timePicker" id="endTime">
        <input type='text' class="form-control" readonly="true"
            id="endTimeContent" /> <span class="input-group-addon"><span
            class="glyphicon glyphicon-time"></span> </span>
    </div>

我可以在输入框中使用特定的数据格式来表示24小时吗？

- RegDHunter

---

删除这个pick12HourFormat并检查。 - Karthick Kumar

Answer 1

由于选择器脚本使用moment.js解析格式字符串，因此您可以在那里阅读文档以获取适当的格式字符串。

但对于24小时制时间，请在格式中使用HH而不是hh。

$(function () {
    $('#startTime, #endTime').datetimepicker({
        format: 'HH:mm',
        pickDate: false,
        pickSeconds: false,
        pick12HourFormat: false            
    });
});

- Benjam

Answer 2

为了显示正确的24小时格式，例如，只需放置

。

$(function () {
    $('#date').datetimepicker({
         format: 'DD/MM/YYYY HH:mm',
    });

});

- Piccin

Answer 3

$(function () {
    $('#startTime, #endTimeContent').datetimepicker({
        format: 'HH:mm',
        pickDate: false,
        pickSeconds: false,
        pick12HourFormat: false            
    });
});

你的选择器似乎有误，请检查一下。

- Karthick Kumar

---

非常简单，我只是假设那部分都正常工作了，因为我在时间选择器中看到了正确的24小时格式。 - RegDHunter

Answer 4

就这样！

$(function () {
    $('#date').datetimepicker({
         format: 'H:m',
    });

});

我使用v4版本，效果很好！

- Gustavo Miño

Answer 5

我不明白为什么其他人告诉你使用HH，但是经过我多次测试后，正确的24小时时间格式应该是：

hh

。

我从这里看到的：http://www.malot.fr/bootstrap-datetimepicker/

我不知道为什么他们不使用常见的HH表示24小时制.....

我希望有人可以告诉我是否正确.....

- qakmak

---

这是正确且可接受的答案。 - Aditya

Answer 6

瞬间完成！

$('.Timestamp').datetimepicker({
    format: 'DD/MM/YYYY HH:mm:ss'
});

为了跳过未来的日期：

若要跳过未来的日期：

$(function () {
    var date = new Date();
    var currentMonth = date.getMonth();
    var currentDate = date.getDate();
    var currentYear = date.getFullYear();
    $('#datetimepicker,#datetimepicker1').datetimepicker({
        pickTime: false,
        format: "DD-MM-YYYY",  
        maxDate: new Date(currentYear, currentMonth, currentDate + 1)
    });
});

- Pranesh Janarthanan

Answer 7

“Meridian”指的是上午/下午时间，将其设置为false表示您不想要上午/下午时间，因此您隐含地需要24小时制钟表。

$('#timepicker1').timepicker({showMeridian:false});

- Aaska Patel

---

请描述该修复是什么。StackOverflow 不喜欢仅包含代码的答案，因为这使得人们更难理解意图，以及是否值得学习代码。如果您说明它是什么以及它如何解决问题，那么人们可以确定他们是否想在您的答案中投入时间。我明白对您和对我来说，这一行代码的作用似乎很明显，但并不是所有查看答案的人都会明白。 - clearlight

Answer 8

我知道这个问题已经问了一段时间。然而，如果有帮助的话，这对我起作用了。

 $(function() {
    $('.datetimepicker').datetimepicker({
        format: 'MM-DD-YYYY HH:mm '
    });
});

- Sagar Nair

Answer 9

您也可以使用参数 "use24hours" 和 "language" 来实现此功能，具体如下：

$(function () {
    $('.datetime').datetimepicker({
        language: 'pt-br',
        use24hours: true,
    });
});

- William Rodrigues

Answer 10

'DD/MM/YYYY hh:mm A' => 12 小时制 'DD/MM/YYYY HH:mm A' => 24 小时制

- Jegan

---

虽然这段代码片段可能是解决方案，但包括解释真的有助于提高您的帖子质量。请记住，您正在回答未来读者的问题，而这些人可能不知道您的代码建议原因。 - Matheus Cuba