如何使用datetimepicker在jquery中设置am / pm格式

Question

这是我的jquery code.eventdatpicker只是显示日期，但occasionStartTime和occasionEndTime只显示24小时格式，如何将此格式更改为am / pm格式？

$(function() {
    $('#occasionStartTime').datetimepicker({
        datepicker : false,
        format : 'H:i'
    });
    $('#occasionEndTime').datetimepicker({
        datepicker : false,
        format : 'H:i'

    });
    $('#eventDatePicker').datetimepicker({
        timepicker : false,
        format : 'd.m.Y'
    });
});

Answer 1

尝试

$('#occasionStartTime').datetimepicker({
    datepicker : false,
    ampm: true, // FOR AM/PM FORMAT
    format : 'g:i A'
});

Answer 2

$('#occasionStartTime').datetimepicker({
        format: 'Y/m/d A g:i',
        formatTime: 'A g:i',
    });

Answer 3

$('#StartDate').datetimepicker(
                {
                    format: 'DD MMM YYYY hh:mm A'

                });

其中startDate是divId

    <div class="input-group date form_datetime" id="StartDate">
         <input type="text" class="form-control input-lg" placeholder="From" name="StartDate" id="txtStartDate" required /> 
<span class="input-group-addon">
<span class="glyphicon-calendar glyphicon"></span></span>
 </div>

这将为您提供如下格式：2016年3月25日01:08

Answer 4

使用Bootstrap Datepicker3的MVC默认日期格式 - 对于初学者非常有用

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Content/datepicker/moment.js"></script>
<link href="~/Content/datepicker/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/Content/datepicker/bootstrap-datetimepicker.js"></script>

    $(function () {
        $('.datetime').datetimepicker({
            format: 'DD-M-YYYY hh:mm A'
        });

    });

</script>

Answer 5

使用此插件可以不显眼地向表单添加datetimepicker，datepicker或timepicker下拉列表。它可以轻松自定义选项。

您可以下载插件：Download

将js和css添加到head标签：

<link rel="stylesheet" type="text/css" href="./js/jquery.datetimepicker.css" />
<script src="./js/jquery.datetimepicker.js"></script>

将此代码添加到您想要的show：

$(function () {
    $('#video_schedule').datetimepicker({
        step:5,
        minDate:0,
        formatTime:'H:i'
    });
});

Answer 6

如果您只有时间字段而不是日期时间字段 - 您可以使用

设置AM / PM格式

 $("#yourTimeField").timepicker({
        showPeriod: true
 });

Answer 7

将datatimepicker格式值设置为format: 'hh:mm A'

工作示例。

$(function() {
  $('#datetimepicker1').datetimepicker({
      format: 'hh:mm A',
  });
  $('#datetimepicker2').datetimepicker({
      format: 'DD/MM/YYYY hh:mm A',
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <span>Select 12 hour time format</span>
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
        <br/>
        <span>Select 12 hour time format with date</span>
        <div class='input-group date' id='datetimepicker2'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

Related answer

Answer 8

在现在的版本中，2021 / 1 / Jan 您必须输入例如：

        $('#dateTimePicker').datetimepicker({
            .....,
            formatTime:'g:iA',
            format: 'Y.m.d hh:mm A',
            .....
        }

大功告成