ustaw datę w typie wejścia date


104
<input id="datePicker" type="date" />​

Ustawię dzisiejszą datę w datepicker input type w chrome.

$(document).ready( function() {
    var now = new Date();
    var today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    alert(today);
    $('#datePicker').val(today);
});​

ale to nie działa

Edytuj to jsFiddle - Spróbuj w przeglądarce Chrome.


2
Jeśli wybierzesz datę na skrzypce i sprawdzać ramkę wynik, robi $('#datePicker').val();daje "2012-09-10"i nie jest to format używać do ustawiania daty

To działa w chrome z mojej strony .. Co dokładnie masz na myśli its not working?
AdityaParab

spróbuj: { currentText: "Now" }zobacz instrukcję
diEcho,

pracuje na mnie ... na czym polega problem?
Netorica,

1
@JigarPandya fr_FR (@ user108, ​​zobacz także stackoverflow.com/a/3496622/180100 )

Odpowiedzi:


159

Link do skrzypiec: http://jsfiddle.net/7LXPq/93/

Dwa problemy w tym:

  1. Kontrola daty w HTML 5 akceptuje format rok - miesiąc - dzień, jak używamy w SQL
  2. Jeśli miesiąc jest 9, należy go ustawić na 09, a nie po prostu na 9. Dotyczy to również pola dziennego.

Skorzystaj z linku skrzypcowego, aby zobaczyć demo:

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

$('#datePicker').val(today);

4
Odpowiedź po 2012 roku: sprawdź moją odpowiedź na obsługiwane rozwiązanie w jednej linii kodu.
Oliv Utilo

@ OlivUtilo - jasne, ale Twoja odpowiedź czasami przyniesie nieprawidłowe wyniki.
RobG

Zaoszczędziłeś mi czasu stary, wielkie dzięki
Dip Surani

128

document.getElementById("datePicker").valueAsDate = new Date()

powinno działać.


6
To najlepsze rozwiązanie, jakie do tej pory znalazłem - działa na Androidzie 4.0.3
Ben Clayton

6
Zdecydowanie wydaje się czystsza niż zaakceptowana odpowiedź ... dzięki
Skipjack

1
Odkryłem, że z jakiegoś powodu to nie działa w Safari :(
james_alvarez

Przetestowano w Chrome i Edge i stwierdzono, że działa dobrze. Jak powiedział @Skipjack, jest niesamowita odpowiedź!
Arun

Wygląda na to, że jest to właściwe rozwiązanie, jednak w przeglądarce Safari (13.1.2) wywołanie powoduje wyświetlenie wyjątku dotyczącego nieprawidłowego stanu. Nie pewny dlaczego...?
fbitterlich

23

Aktualizacja: robię to z date.toISOString().substr(0, 10). Daje taki sam wynik jak zaakceptowana odpowiedź i ma dobre wsparcie.


2
Działa w safari
james_alvarez

4
Uwaga: podaje datę w strefie czasowej UTC. Z kolei najczęstsza odpowiedź używa czasu lokalnego.
Qwertie,

@Qwertie - oba działają na tym samym Dateobiekcie (utworzonym z nową datą lub Date.now, które dziedziczą strefę czasową z przeglądarki). użycie funkcji toISOString lub getDate rozwiąże (myślę) to samo; więc myślę, że powinno to mieć pożądane zachowanie ...
Oliv Utilo

1
@ OlivUtilo - Nie, nie dotyczą okresu przesunięcia strefy czasowej dla hosta.
RobG

Jak mówi Qwertie, potencjalnie daje to złą odpowiedź, jeśli używasz daty bez godziny. np. sob. 01 września 2018 r. 00:00:00 GMT + 0100 jest konwertowane na „2018-08-31”
havlock

14
var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

Powyższy kod zadziała.


12

dla mnie najkrótszym sposobem rozwiązania tego problemu jest użycie momentu.js i rozwiązanie tego problemu w zaledwie 2 wierszach.

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);

1
tak, tak jak $ ('# datePicker'). val (moment (). format ('RRRR-MM-DD'));
Umair Khalid,

2
Dla osób niezaznajomionych z Momentem, jeśli chcesz sformatować dowolny obiekt Javascript Date za pomocą funkcji moment (): var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate);
veuncent


1

Zwykle tworzę te dwie funkcje pomocnicze podczas korzystania z danych wejściowych:

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

Następnie możesz ustawić wartość wejściową daty jako:

$('#datePicker').val(dateToInput(new Date()));

I w ten sposób pobierz wybraną wartość

const dateVal = inputToDate($('#datePicker').val())

0

Datetimepicker zawsze potrzebuje formatu wejściowego RRRR-MM-DD, nie obchodzi go format wyświetlania twojego modelu ani lokalna data i godzina systemu. Ale format wyjściowy selektora daty i godziny jest taki, jaki chcesz (twój system lokalny). W moim poście jest prosty przykład .


0

Możesz używać tylko daty type="date"jako wejścia w formacieYYYY-MM-DD

Zaimplementowałem pomocnika jak formatDatew NODE.js express-handlebars, nie musisz się martwić ... po prostu użyj formatu jak opisano w pierwszej linii.

na przykład:

< input type="date" id="date" name="date" class="form-control" value="{{formatDate invoice.date 'YYYY-MM-DD'}}" />

-5

Wersja jquery

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

4
$.datepickernie jest domyślnym jQuery. Używasz wtyczki i nie mówiąc, która z nich, ta odpowiedź jest bezużyteczna.
Emile Bergeron
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.