¿Cómo formatear la fecha con horas, minutos y segundos cuando se utiliza jQuery UI Datepicker?


¿Es posible formatear una fecha con jQuery UI Datepicker para mostrar horas, minutos y segundos?

Esta es mi maqueta actual:

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

Cuando llamo a .datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }) el valor devuelto es:

201313-07-03 HH: Julio: ss

Aquí hay un JSFiddle.

Author: Axel, 2013-07-03

6 answers

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

Para el selector de tiempo, debe agregar timepicker a Datepicker, y se formateará con un comando equivalente.

EDITAR

Utilice este que extiende jQuery UI Datepicker. Puedes recoger tanto la fecha como la hora.

Http://trentrichardson.com/examples/timepicker /

 37
Author: scel.pi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-29 12:40:25

Pruebe este violín

$(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);
    }
});
});
 36
Author: Arunu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-03 19:33:36

Usando jQuery UI en combinación con el excelente plugin datetimepicker de http://trentrichardson.com/examples/timepicker /

Puede especificar el dateFormat y timeFormat

$('#datepicker').datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat:  "hh:mm:ss"
});
 29
Author: Notflip,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-04 14:17:20
 8
Author: Cray Kao,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 12:26:35

Si no nos gusta agregar el selector de tiempo, podemos usar solo javascript para la parte de tiempo.

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

  console.log(date," ",time);
 0
Author: vusan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-04-11 16:10:56

He añadido este código

 <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>
 0
Author: مهدی عابدی برنامه نویس و مشاور,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-19 17:41:02