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

how to set am/pm format in jquery using datetimepicker

提问by nmkkannan

this is my jquery code.eventdatpicker is display date only,but occasionStartTime and occasionEndTime it display 24 hours format only how to change this format to am/pm format?

这是我的 jquery 代码。eventdatpicker 仅显示日期，但偶尔开始时间和场合结束时间仅显示 24 小时格式如何将此格式更改为上午/下午格式？

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

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

回答by Jef

Try

尝试

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

回答by Chirag Gardhariya

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

                });

where startDate is a divId

其中 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>

This will give you format like: 25 Mar 2016 01:08 PM

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

回答by Pirata21

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

回答by Arun Prasad E S

MVC Default Dateformat using Bootstrap Datepicker3 - very useful for beginers

使用 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>

回答by Deepu Reghunath

Set your datatimepicker format value as format: 'hh:mm A'

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

Working example.

工作示例。

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

相关回答

回答by IT Vlogs

Use this plugin to unobtrusively add a datetimepicker, datepicker or timepicker dropdown to your forms. It's easy to customize options.

使用此插件可以在表单中不显眼地添加 datetimepicker、datepicker 或 timepicker 下拉列表。自定义选项很容易。

You can download Plugin: Download

您可以下载插件：下载

add js and css to head tag:

将 js 和 css 添加到 head 标签：

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

add this code to you want show:

将此代码添加到您要显示的内容中：

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

回答by Abhi Rampal

If you've only got a time field instead of a datetime field - you can set AM/PM format using

如果您只有时间字段而不是日期时间字段 - 您可以使用设置 AM/PM 格式

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