2013-07-03 8 views
40

E 'possibile formattare una data con jQuery UI Datepicker come per mostrare ore, minuti e secondi?Come formattare la data con ore, minuti e secondi quando si utilizza jQuery UI Datepicker?

Questo è il mio mockup corrente:

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

Quando chiamo .datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }) il valore restituito è:

201313-07-03 HH: Luglio: ss

Ecco qui a JSFiddle.

+1

Il selettore di date ti consente solo di selezionare una data, non un'ora, pertanto la formattazione di ore, minuti e secondi non sarebbe supportata. Puoi semplicemente aggiungere 00:00:00 da solo. –

+1

'var curTime = new Date()'. Puoi usare librerie come [moment] (http://momentjs.com/) per formattare come vuoi. –

risposta

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

Per il momento picker, si dovrebbe aggiungere TimePicker a Datepicker, e sarebbe formattato con un comando equivalente.

EDIT

Utilizzare questa che si estendono jQuery UI Datepicker. Puoi ritirare sia la data che l'ora.

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

+0

proverò di più a trovare una risposta a questo proposito ma alla fine ho trovato la tua risposta. Mi piacerebbe suggerirti che la tua risposta restituisca l'oggetto di datepicker quindi modifico nel mio codice come questo.Grazie ... $ ("# datepicker "). datepicker (" option "," dateFormat "," dd-mm-yy "). val(); – Ashish4434

+0

E riguardo la data e l'ora insieme? Non sembra che consenta questo formato: 'aaaa-mm-gg HH: mm: ss' nel link della libreria che hai fornito. – Si8

33

provare questo 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); 
    } 
}); 
}); 
+1

ottima soluzione, ma non aggiunge zero iniziali. Puoi aggiungerli in questo modo: '('0' + d.getHours()). Slice (-2)' Ed è meglio applicare un nuovo valore a '$ (this)' invece di '$ (' #datepicker ') '. Potrebbe essere utile se hai più di un elemento nel selettore, come '$ ('. Datepicker'). Datepicker (...)' – Amazzing

+0

come possiamo mostrare anche AM/PM? –

+0

Funziona per me grazie :) –

27

Utilizzando jQuery UI, in combinazione con l'ottimo plug-in datetimepicker da http://trentrichardson.com/examples/timepicker/

È possibile specificare il dateFormat e timeformat

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

A partire da ora, questo non sembra funzionare – dctucker

+0

@dctucker qual è il problema? Questa è davvero una risposta più vecchia. Posso aggiornarlo se puoi dirmi cosa non va? – Notflip

+1

funziona per me, grazie –