How to format date with hours, minutes and seconds when using jQuery UI Datepicker?

问题

Is it possible to format a date with jQuery UI Datepicker as to show hours, minutes and seconds?

This is my current mockup:

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

When I call .datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }) the returned value is:

201313-07-03 HH:July:ss

Here is a JSFiddle.

回答1:

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

For the time picker, you should add timepicker to Datepicker, and it would be formatted with one equivalent command.

EDIT

Use this one that extend jQuery UI Datepicker. You can pick up both date and time.

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

回答2:

Try this 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);
        }
    });
});

回答3:

Using jQuery UI in combination with the excellent datetimepicker plugin from http://trentrichardson.com/examples/timepicker/

You can specify the dateFormat and timeFormat

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

回答4:

Or, using datetimepicker plugin.

Ref: DateTimePicker AM/PM Dropdown

Ref: http://xdsoft.net/jqplugins/datetimepicker/

回答5:

I added this code

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

回答6:

If don't like to add time picker, we can use just javascript for time part.

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

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

回答7:

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

来源：https://stackoverflow.com/questions/17438857/how-to-format-date-with-hours-minutes-and-seconds-when-using-jquery-ui-datepick

标签

javascript

jquery

datepicker

jquery-ui-datepicker