Es posible dar formato a una fecha con jQuery UI Datepicker como para mostrar las horas, minutos y segundos?

Esta es mi maqueta:

JS:

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

HTML:

<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 .datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }) el valor devuelto es:

201313-07-03 HH:julio:ss

Aquí es un JSFiddle.

  • El selector de fecha sólo le permite seleccionar una fecha, no una vez, por lo que el formato de horas, minutos y segundos no ser compatibles. Usted sólo puede anexar 00:00:00 a ti mismo.
  • var curTime = new Date(). Usted puede utilizar las bibliotecas como momento a el formato que usted desee.

7 Comentarios

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

    Para el selector de hora, se debe agregar timepicker a Datepicker, y que iba a tener el formato de un comando equivalente.

    EDITAR

    El uso de este uno que se extienden jQuery UI Datepicker. Usted puede recoger tanto la fecha y la hora.

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

    • yo intento más para encontrar una respuesta acerca de esto, pero por fin he encontrado la respuesta en el pasado.me gustaría sugerir que su respuesta objeto de retorno de datepicker lo puedo modificar en mi codificación como este.Gracias … $(«#datepicker»).datepicker(«option», «dateFormat», «dd-mm-yy»).val();
    • ¿Qué acerca de la fecha y el tiempo juntos? No parece que permite este formato: yyyy-mm-dd HH:mm:ss en el link de la biblioteca que usted proporcionó.
  2. 37

    Probar este el 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);
            }
        });
    });
    • gran solución, pero no agrega ceros a la izquierda. Usted puede agregar como este: ('0'+d.getHours()).slice(-2) Y es mejor aplicar un nuevo valor a $(this) en lugar de $('#datepicker'). Puede ser útil si usted tiene más de uno de los elementos de la selección, como $('.datepicker').datepicker(...)
    • ¿cómo podemos demostrar AM/PM también?
    • Su trabajo para mí, gracias 🙂
  3. 29

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

    Puede especificar el dateFormat y timeFormat

    $('#datepicker').datetimepicker({
        dateFormat: "yy-mm-dd",
        timeFormat:  "hh:mm:ss"
    });
    • A partir de ahora, esto no parece estar funcionando
    • ¿cuál es el problema? Esto es de hecho una mayor respuesta. Puedo actualizarla si usted me puede decir lo que está mal?
    • su me funciona , gracias
  4. 1

    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>
  5. 0

    Si no les gusta agregar selector de hora, se puede utilizar sólo de javascript para la parte del 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);

Dejar respuesta

Please enter your comment!
Please enter your name here