使用 jQuery UI Datepicker 时如何用小时、分钟和秒格式化日期？答案

【问题标题】：How to format date with hours, minutes and seconds when using jQuery UI Datepicker?使用 jQuery UI Datepicker 时如何用小时、分钟和秒格式化日期？
【发布时间】：2013-06-30 14:29:39
【问题描述】：

是否可以使用jQuery UI Datepicker 格式化日期以显示小时、分钟和秒？

这是我目前的模型：

$(function() {
    $('#datepicker').datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }).val();
});

<html>
<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <title>snippet</title>
</head>
<body>

  <input type="text" id="datepicker">

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

当我调用.datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }) 时，返回值为：

201313-07-03 HH:July:ss

这是JSFiddle。

【问题讨论】：

日期选择器只允许您选择日期，而不是时间，因此不支持格式化小时、分钟和秒。您可以自己附加 00:00:00。
var curTime = new Date()。您可以使用 moment 之类的库来随意格式化。

标签： javascript jquery datepicker jquery-ui-datepicker

【解决方案1】：

试试这个fiddle

$(function() {
    $('#datepicker').datepicker({
        dateFormat: 'yy-dd-mm',
        onSelect: function(datetext) {
            var d = new Date(); // for now

            var h = d.getHours();
            h = (h < 10) ? ("0" + h) : h ;

            var m = d.getMinutes();
            m = (m < 10) ? ("0" + m) : m ;

            var s = d.getSeconds();
            s = (s < 10) ? ("0" + s) : s ;

            datetext = datetext + " " + h + ":" + m + ":" + s;

            $('#datepicker').val(datetext);
        }
    });
});

【讨论】：

很好的解决方案，但它不添加前导零。您可以像这样添加它们：('0'+d.getHours()).slice(-2) 最好将新值应用于$(this) 而不是$('#datepicker')。如果选择器中有多个元素，例如$('.datepicker').datepicker(...)，这可能会有所帮助
有用，但它会禁用“更改”事件。我在onSelect末尾添加了$(this).trigger('change')

【解决方案2】：

$("#datepicker").datepicker("option", "dateFormat", "yy-mm-dd ");

对于时间选择器，你应该将时间选择器添加到日期选择器中，它会被一个等效的命令格式化。

编辑

使用这个扩展 jQuery UI Datepicker。您可以选择日期和时间。

http://trentrichardson.com/examples/timepicker/

【讨论】：

我尝试更多以找出有关此问题的答案，但最后我在最后找到了您的答案。我想建议您您的答案返回 datepicker 对象，所以我像这样修改我的编码。谢谢... $("#datepicker").datepicker("option", "dateFormat", "dd-mm-yy").val();
日期和时间在一起怎么样？它似乎不允许这种格式：yyyy-mm-dd HH:mm:ss 在您提供的库链接中。

【解决方案3】：

结合使用 jQuery UI 和来自 http://trentrichardson.com/examples/timepicker/ 的优秀 datetimepicker 插件

您可以指定dateFormat和timeFormat

$('#datepicker').datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat:  "hh:mm:ss"
});

【讨论】：

【解决方案4】：

或者，使用 datetimepicker 插件。

参考：DateTimePicker AM/PM Dropdown

参考：http://xdsoft.net/jqplugins/datetimepicker/

【讨论】：

【解决方案5】：

如果不喜欢添加时间选择器，我们可以只使用javascript作为时间部分。

  var dateObj=new Date();
  var date = $.datepicker.formatDate('dd M yy', dateObj);
  var time  = dateObj.getHours()+":"+dateObj.getMinutes()+":"+dateObj.getSeconds(); 

  console.log(date," ",time);

【讨论】：

【解决方案6】：

我添加了这段代码

<input class="form-control input-small hasDatepicker" id="datepicker6" name="expire_date" type="text" value="2018-03-17 00:00:00">

<script src="/assets/js/datepicker/bootstrap-datepicker.js"></script>
<script>
        $(document).ready(function() {
            $("#datepicker6").datepicker({
                isRTL: true,
                dateFormat: "yy/mm/dd 23:59:59",
                changeMonth: true,
                changeYear: true

            });
        });
</script>

【讨论】：

【解决方案7】：

format: 'YYYY-MM-DD HH:mm:ss',

【讨论】：

【解决方案8】：

$(function() {
    $('#datepicker').datepicker({ dateFormat: 'yy-d-m ' }).val();
});

<html>
<head>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
  <title>snippet</title>
</head>
<body>

  <input type="text" id="datepicker">

  <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
  <script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>

【讨论】：

【解决方案9】：

开始使用 从 npm 安装：

npm install imask 并导入或要求：

从“imask”导入 IMask；

或使用 CDN：

var dateMask = IMask(element, {
  mask: Date,  // enable date mask

  // other options are optional
  pattern: 'Y-`m-`d',  // Pattern mask with defined blocks, default is 'd{.}`m{.}`Y'
  // you can provide your own blocks definitions, default blocks for date mask are:
  blocks: {
    d: {
      mask: IMask.MaskedRange,
      from: 1,
      to: 31,
      maxLength: 2,
    },
    m: {
      mask: IMask.MaskedRange,
      from: 1,
      to: 12,
      maxLength: 2,
    },
    Y: {
      mask: IMask.MaskedRange,
      from: 1900,
      to: 9999,
    }
  },
  // define date -> str convertion
  format: function (date) {
    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (day < 10) day = "0" + day;
    if (month < 10) month = "0" + month;

    return [year, month, day].join('-');
  },
  // define str -> date convertion
  parse: function (str) {
    var yearMonthDay = str.split('-');
    return new Date(yearMonthDay[0], yearMonthDay[1] - 1, yearMonthDay[2]);
  },

  // optional interval options
  min: new Date(2000, 0, 1),  // defaults to `1900-01-01`
  max: new Date(2020, 0, 1),  // defaults to `9999-01-01`

  autofix: true,  // defaults to `false`

  // also Pattern options can be set
  lazy: false,

  // and other common options
  overwrite: true  // defaults to `false`
});

【讨论】：

【解决方案10】：

这对我来说很好用：

        $('#myelement').datetimepicker({
            dateFormat: "yy-mm-dd",
            timeFormat:  "hh:mm:ss"
        });

【讨论】：