Typy wejściowe HTML5 są świetne, nowy wbudowany moduł wyboru daty w Operze to pestka, a Chrome przynajmniej obsługuje nowy typ wprowadzania za pomocą implementacji pokrętła.
Ale czy jest jakiś sposób, aby ustawić domyślną wartość pola daty na dzisiejszą datę? W Operze mogę wybrać opcję „Dzisiaj” z selektora dat, a gdy tylko kliknę jeden z przycisków kroków w Chrome, zwiększy / zmniejszy od dzisiejszej daty.
Nie wstydzę się kodować rozwiązania tego drobnego problemu, ale wydaje mi się głupie, że obie przeglądarki są w pełni świadome aktualnej daty, ale nie automatycznie po prostu wstawiają ją (przynajmniej jako symbol zastępczy).
Odpowiedzi:
Podobnie jak każde pole wejściowe HTML, przeglądarka pozostawi je puste, chyba że
value
atrybut określi wartość domyślną .Niestety HTML5 nie zapewnia sposobu na określenie „dzisiaj” w
value
atrybucie (który widzę), a jedynie na poprawnej dacie RFC33392011-09-29
.TL; DR Użyj
YYYY-MM-DD
formatu daty, bo inaczej się nie wyświetliźródło
DateTime.now.strftime("%Y-%m-%d")
date('Y-m-d')
ponieważ wymaga wiodącego zera?myDate.toLocaleDateString('en-CA')
robi lewęObiekt JavaScript Date zapewnia wystarczającą wbudowaną obsługę wymaganego formatu, aby uniknąć robienia tego ręcznie:
Dodaj to, aby uzyskać poprawną obsługę strefy czasowej:
jQuery:
Pure JS:
źródło
local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
Najpierw będziesz chciał dostosować za pomocą (jak ta odpowiedź ostatecznie się pojawi).valueAsDate
( pomija IE, Firefox, może Safari, w zasadzie wszystko oprócz Chrome, Opera, Edge i niektóre przeglądarki mobilne). Wszystko obsługujevalue
właściwość, z której korzysta moje rozwiązanie, nawet jeśli wprowadzanie daty wraca do wprowadzania tekstu w nieobsługiwanych przeglądarkach, inne rozwiązanie będzie zawierać błąd lub błąd.input[type=datetime-local]
i zmieniając ją naslice(0,19)
HTHto działa dla mnie:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
źródło
valueAsDate
. html.spec.whatwg.org/multipage/forms.html#dom-input-valueasdatevalueAsDate
nanew Date()
wartość pola zostanie ustawiony na 2018-03-28. Zobacz austinfrance.wordpress.com/2012/07/09/…Poniższy kod działa dobrze:
Zauważ, że zależy to od PHP.
źródło
<?php echo date('Y-m-d', strtotime(date('Y/m/d'))); ?>
na<?php echo date('Y-m-d'); ?>
Możesz wypełnić wartość domyślną za pomocą javascript, jak widać tutaj: http://jsfiddle.net/7LXPq/
Prawdopodobnie poświęciłbym trochę dodatkowego czasu, aby sprawdzić, czy miesiąc i data są jednocyfrowe i poprzedzić je dodatkowym zerem ... ale to powinno dać ci pomysł.
EDYCJA: Dodano sprawdzenie dodatkowego zera
źródło
Postępuj zgodnie ze standardowym formatem Ymd, jeśli używasz PHP
źródło
HTML
JS
próbny
Jeśli nie chcesz używać jQuery, możesz zrobić coś takiego
HTML
JS
próbny
źródło
W HTML5 jako takim nie ma możliwości ustawienia domyślnej wartości pola daty na dzisiejszą datę? Jak pokazano w innych odpowiedziach, wartość można ustawić za pomocą JavaScript i jest to zwykle najlepsze podejście, jeśli chcesz ustawić domyślną wartość na podstawie aktualnej daty dla użytkownika, gdy strona jest ładowana.
HTML5 definiuje
valueAsDate
właściwośćinput type=date
elementów, a korzystając z niej można ustawić wartość początkową bezpośrednio z obiektu utworzonego npnew Date()
. Przez . Jednak np. IE 10 nie zna tej właściwości. (Brakuje również prawdziwego wsparciainput type=date
, ale to inny problem).Więc w praktyce musisz ustawić
value
właściwość i musi ona być zgodna z normą ISO 8601. Obecnie można to zrobić dość łatwo, ponieważ możemy się spodziewać, że obecnie używane przeglądarki będą obsługiwać tętoISOString
metodę:źródło
= new Date().toISOString().split('T')[0];
Jeśli robisz cokolwiek związanego z datą i godziną w przeglądarce, chcesz użyć Moment.js :
moment()
zwraca obiekt reprezentujący bieżącą datę i godzinę. Następnie wywołujesz jego.format()
metodę, aby uzyskać reprezentację ciągu zgodnie z określonym formatem. W tym wypadkuYYYY-MM-DD
.Pełny przykład:
źródło
użyj moment.js, aby rozwiązać ten problem w 2 wierszach, typ danych daty HTML5 akceptuje tylko ten format „RRRR-MM-DD”. W ten sposób rozwiązuję mój problem.
jest to najprostszy sposób rozwiązania tego problemu.
źródło
JavaScript
Jquery
Inna opcja
Jeśli chcesz dostosować datę, miesiąc i rok, po prostu zrób sumę lub wartość podrzędną zgodnie z życzeniem 😎 Dla miesiąca rozpoczyna się od 0, dlatego musisz zsumować 1 z miesiącem.
Zastosuj funkcję Today
źródło
Bardzo proste, wystarczy użyć języków po stronie serwera, takich jak PHP, ASP, JAVA lub nawet javascript.
Oto rozwiązanie
źródło
źródło
jeśli chcesz wypełnić wejściową datę / godzinę, możesz użyć tego:
źródło
W przypadku NodeJS (Express z szablonami SWIG):
źródło
Najprostsze rozwiązania wydają się przeoczyć, że wykorzystany zostanie czas UTC, w tym te, które zostały wysoko ocenione. Poniżej znajduje się usprawniona, ES6, nie-jQuery wersja kilku istniejących odpowiedzi:
źródło
value
czyvalueAsDate
? Wygląda dobrze.Właśnie to zrobiłem w kodzie, właśnie przetestowałem i działało dobrze, typ wejściowy = "data" nie obsługuje automatycznego ustawiania curdate, więc sposobem, w jaki przezwyciężyłem to ograniczenie, było użycie kodu PHP takiego prostego kodu jak ten .
Mam nadzieję, że to pomoże!
źródło
Obie najlepsze odpowiedzi są nieprawidłowe.
Krótki linijka, która używa czystego JavaScript, uwzględnia lokalną strefę czasową i nie wymaga definiowania dodatkowych funkcji:
Pobiera bieżącą datę i godzinę w milisekundach (od epoki) i stosuje przesunięcie strefy czasowej w milisekundach (minuty * 60 000 minut na milisekundę).
Możesz ustawić datę za pomocą,
element.valueAsDate
ale wtedy masz dodatkowe wywołanie doDate()
konstruktora.źródło
Jest to coś, co naprawdę musisz zrobić po stronie serwera, ponieważ lokalny format czasu każdego użytkownika jest inny, nie wspominając już o tym, że każda przeglądarka zachowuje się inaczej.
Html Wartość wejściowa daty powinna mieć następujący format: rrrr-mm-dd, w przeciwnym razie wartość nie będzie wyświetlana.
Wyjście z dzisiejszej daty: 08.02.2019
Następnie w swoim html:
<input type="date" value="<% =get_date %>"
po prostu użyj tego:
<input type="date" value="<?= date("Y-m-d"); ?>">
źródło
Jest to bardzo proste, stosując następujący kod: Korzystanie
PHP
Funkcja daty zwróci bieżącą datę, biorąc datę w
time()
.źródło
przez Javascript:
źródło
źródło
Jeśli używasz rubinu, możesz użyć tego, aby ustawić domyślną wartość na dzisiejszą datę i godzinę:
źródło
Proste rozwiązanie:
źródło
document.querySelector('.set-today').value=new Date().toISOString().substr(0,10);
Ponieważ nie ma domyślnej metody ustawiania wartości na dzisiejszą datę, powiedziałbym, że powinno to zależeć od jej zastosowania. Jeśli chcesz zmaksymalizować ekspozycję publiczności na wybór daty, użyj skryptu po stronie serwera (PHP, ASP itp.), Aby ustawić wartość domyślną.
Jeśli jednak jest to konsola administracyjna CMS i wiesz, że użytkownik zawsze będzie miał JS na swojej stronie lub twoja strona zaufana, możesz bezpiecznie użyć JS do wypełnienia wartości domyślnej, zgodnie z jlbruno.
źródło
Miałem ten sam problem i naprawiłem go prostym JS. Dane wejściowe:
JS
Ważne: skrypt JS powinien znajdować się w ostatnim wierszu kodu lub później, aby go wprowadzić, ponieważ jeśli umieścisz ten kod wcześniej, skrypt nie znajdzie danych wejściowych.
źródło
W samym HTML nie ma domyślnej metody wstawiania dzisiejszej daty w pole wejściowe. Jednak, jak każde inne pole wejściowe, zaakceptuje wartość.
Możesz użyć PHP, aby pobrać dzisiejszą datę i wprowadzić ją do pola wartości elementu formularza.
Pole wartości przyjmuje format YYYY-MM-DD jako dane wejściowe, więc po prostu tworząc zmienną
$date_string
w tym samym formacie, w którym wartość wejściowa akceptuje i wypełnia ją rokiem, miesiącem i dniem pobranym od dzisiejszej daty i voila! Masz wybraną datę!Mam nadzieję że to pomoże :)
Edytować:
Jeśli chcesz, aby pole wejściowe było zagnieżdżone w HTML zamiast w PHP, możesz wykonać następujące czynności.
Zdaję sobie sprawę, że to pytanie zostało zadane jakiś czas temu (2 lata temu), ale nadal zajęło mi trochę czasu znalezienie ostatecznej odpowiedzi w Internecie, więc służy to każdemu, kto szuka odpowiedzi, kiedy tylko może, i mam nadzieję bardzo pomaga wszystkim :)
Kolejna edycja:
Prawie zapomniałem, czymś, co było dla mnie królewskim bólem w przeszłości, jest zawsze zapominanie o ustawianiu domyślnej strefy czasowej przy każdym tworzeniu skryptu w PHP, który korzysta z funkcji date ().
Składnia jest następująca
date_default_timezone_set(...);
. Dokumentację można znaleźć tutaj na PHP.net, a listę obsługiwanych stref czasowych do wstawienia do funkcji można znaleźć tutaj . To zawsze było denerwujące, ponieważ jestem w Australii, wszystko jest zawsze odsunięte o 10 godzin, jeśli nie ustawiłem tego poprawnie, ponieważ domyślnie jest to UTC + 0000, gdzie potrzebuję UTC + 1000, więc bądź ostrożny :)źródło
Dzięki Peter, teraz zmieniam kod.
źródło
I dla tych, którzy używają ASP VBScript
A potem w ciele twój element powinien wyglądać mniej więcej tak
Twoje zdrowie!
źródło
Nawet po tak długim czasie może to komuś pomóc. To proste rozwiązanie JS.
JS
HTML
Podobne rozwiązanie działa w Angular bez dodatkowej biblioteki do konwersji formatu daty. W przypadku Angulara (kod jest skrócony ze względu na wspólny kod komponentu):
źródło