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

iezvtpos  于 2023-04-05  发布在  jQuery
关注(0)|答案(9)|浏览(142)

这是我的jquery代码。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'
    });
});
kulphzqa

kulphzqa1#

$('#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 PM

yquaqz18

yquaqz182#

试试看

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

neekobn83#

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

nlejzf6q4#

使用Bootstrap Datepicker 3的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>

hk8txs48

hk8txs485#

使用这个插件可以不引人注意地添加一个日期时间选择器,日期选择器或时间选择器下拉列表到您的表单。很容易自定义选项。
您可以下载Plugin:Download
添加js和css到head标签:

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

将此代码添加到您想要显示的内容:

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

js4nwp546#

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

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

apeeds0o7#

将datatimetepicker格式值设置为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

aemubtdh

aemubtdh8#

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

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

你就完了

webghufk

webghufk9#

没有任何工作对我来说,因为我首先使用的是常见的'bootstrap-datetimepicker',它与bootstrap一起提供:

http://www.malot.fr/bootstrap-datetimepicker(链接失效)

但是这里提到的答案是针对插件的:

https://demos.krajee.com/widget-details/datetimepicker
为我工作的lib:
https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.3/jquery.datetimepicker.css
https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.3/build/jquery.datetimepicker.full.js
JS代码

$('.date-picker-2').datetimepicker({
    format: 'Y-m-d h:i a',
    todayHighlight: 'TRUE',
    autoClose: true,
    orientation: 'bottom right',
    step: 5
});

所述输出

2023-04-04 02:00 am
2023-04-04 07:45 pm

相关问题