2013-07-03 8 views
40

Czy można sformatować datę z numerem jQuery UI Datepicker, aby wyświetlać godziny, minuty i sekundy?Jak sformatować datę za pomocą godzin, minut i sekund, używając jQuery UI Datepicker?

To jest mój obecny makieta:

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

Kiedy zadzwonić .datepicker({ dateFormat: 'yyy-dd-mm HH:MM:ss' }) zwrócona wartość jest:

201313-07-03 GG: Lipiec: ss

Oto a JSFiddle.

+1

Selektor daty pozwala tylko wybrać datę, a nie czas, więc formatowanie godzin, minut i sekund nie będzie obsługiwane. Możesz samodzielnie dodać 00:00:00. –

+1

'var curTime = new Date()'. Możesz używać bibliotek takich jak [moment] (http://momentjs.com/) do formatowania, jak chcesz. –

Odpowiedz

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

Dla selektora czasu należy dodać timepicker do Datepikera, a zostanie on sformatowany za pomocą jednego równoważnego polecenia.

EDIT

Użyj tego jednego, które rozciągają jQuery UI Datepicker. Możesz wybrać datę i godzinę.

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

+0

Próbuję więcej, aby znaleźć odpowiedź na ten temat, ale w końcu znalazłem odpowiedź w last.i lubię sugerować, że twoja odpowiedź zwraca obiekt datepicker, więc modyfikuję w moim kodowaniu w ten sposób. Dziękuję ... $ ("# datepicker ") datepicker (" opcja "," dateFormat "," dd-mm-rr "). val(); – Ashish4434

+0

Co z datą i czasem razem? Wygląda na to, że nie zezwala na ten format: "rrrr-mm-dd GG: mm: ss" w podanym linku do biblioteki. – Si8

33

spróbować tej 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

świetne rozwiązanie, ale nie dodaje zer wiodących. Możesz dodać je tak: '('0' + d.getHours()) slice (-2)' I lepiej jest zastosować nową wartość do '$ (this)' zamiast '$ (”. #datepicker ') '. Pomocne może być, jeśli masz więcej niż jeden element w selektorze, np. '$ (" Datepicker ") datepicker (...)' – Amazzing

+0

jak możemy wyświetlić AM/PM również? –

+0

To działa dla mnie dzięki :) –

27

jQuery UI w połączeniu z doskonałą wtyczkę DateTimePicker z http://trentrichardson.com/examples/timepicker/

Można określić dateformat i TimeFormat

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

W tej chwili wydaje się, że to nie działa – dctucker

+0

@ Ducucker, o co chodzi? To rzeczywiście jest starsza odpowiedź. Mogę to zaktualizować, jeśli możesz mi powiedzieć, co się dzieje? – Notflip

+1

jego prace dla mnie, dzięki –

Powiązane problemy