Jak ustawić wartość domyślną daty wejścia na dzisiaj?

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).

Podobnie jak każde pole wejściowe HTML, przeglądarka pozostawi je puste, chyba że valueatrybut określi wartość domyślną .

Niestety HTML5 nie zapewnia sposobu na określenie „dzisiaj” w valueatrybucie (który widzę), a jedynie na poprawnej dacie RFC33392011-09-29 .

TL; DR Użyj YYYY-MM-DDformatu daty, bo inaczej się nie wyświetli

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:

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});

jQuery:

$(document).ready( function() {
    $('#datePicker').val(new Date().toDateInputValue());
});​

Pure JS:

document.getElementById('datePicker').value = new Date().toDateInputValue();

to działa dla mnie:

document.getElementById('datePicker').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Poniższy kod działa dobrze:

<input type="date" value="<?php echo date('Y-m-d'); ?>" />

Zauważ, że zależy to od PHP.

Możesz wypełnić wartość domyślną za pomocą javascript, jak widać tutaj: http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = "0" + month;
    if (day < 10) 
        day = "0" + day;
    var today = now.getFullYear() + '-' + month + '-' + day;
    $('#datePicker').val(today);
});

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

Postępuj zgodnie ze standardowym formatem Ymd, jeśli używasz PHP

<input type="date" value="<?php echo date("Y-m-d"); ?>">

HTML

<input type="date" id="theDate">

JS

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;

    var today = year + "-" + month + "-" + day;       
    $("#theDate").attr("value", today);
});

próbny

Jeśli nie chcesz używać jQuery, możesz zrobić coś takiego

HTML

<input type="date" id="theDate">

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;

var today = year + "-" + month + "-" + day;       
document.getElementById("theDate").value = today;

próbny

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 valueAsDatewłaściwość input type=dateelementów, a korzystając z niej można ustawić wartość początkową bezpośrednio z obiektu utworzonego np new Date(). Przez . Jednak np. IE 10 nie zna tej właściwości. (Brakuje również prawdziwego wsparcia input type=date, ale to inny problem).

Więc w praktyce musisz ustawić valuewł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ę toISOStringmetodę:

<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>

Jeśli robisz cokolwiek związanego z datą i godziną w przeglądarce, chcesz użyć Moment.js :

moment().format('YYYY-MM-DD');

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 wypadku YYYY-MM-DD.

Pełny przykład:

<input id="today" type="date">
<script>
document.getElementById('today').value = moment().format('YYYY-MM-DD');
</script>

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.

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

jest to najprostszy sposób rozwiązania tego problemu.

JavaScript

document.getElementById('date-field').value = new Date().toISOString().slice(0, 10);

Jquery

$('#date-field').val(new Date().toISOString().slice(0, 10));

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.

function today() {
        let d = new Date();
        let currDate = d.getDate();
        let currMonth = d.getMonth()+1;
        let currYear = d.getFullYear();
        return currYear + "-" + ((currMonth<10) ? '0'+currMonth : currMonth )+ "-" + ((currDate<10) ? '0'+currDate : currDate );
    }

Zastosuj funkcję Today

document.getElementById('date-field').value = today();

$('#date-field').val(today());

Bardzo proste, wystarczy użyć języków po stronie serwera, takich jak PHP, ASP, JAVA lub nawet javascript.

Oto rozwiązanie

<?php
  $timezone = "Asia/Colombo";
  date_default_timezone_set($timezone);
  $today = date("Y-m-d");
?>
<html>
  <body>
    <input type="date" value="<?php echo $today; ?>">
  </body>
</html>

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

$(document).ready( function() {
    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);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="datePicker" type="date" />

jeśli chcesz wypełnić wejściową datę / godzinę, możesz użyć tego:

<input type="datetime-local" name="datetime" 
       value="<?php echo date('Y-m-d').'T'.date('H:i'); ?>" />

W przypadku NodeJS (Express z szablonami SWIG):

<input type="date" id="aDate" name="aDate" class="form-control" value="{{ Date.now() | date("Y-m-d") }}" />

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:

const today = (function() {
    const now = new Date();
    const month = (now.getMonth() + 1).toString().padStart(2, '0');
    const day = now.getDate().toString().padStart(2, '0');
    return `${now.getFullYear()}-${month}-${day}`;
})();
console.log(today); // as of posting this answer: 2019-01-24

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 .

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo "<label for='submission_date'>Data de submissão</label>";
                echo "<input type='date' name='submission_date' min='2012-01-01' value='" . date('Y-m-d') . "' required/>";
            ?>
        </form>
    </body>
</html>

Mam nadzieję, że to pomoże!

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:

const element = document.getElementById('date-input');
element.valueAsNumber = Date.now()-(new Date()).getTimezoneOffset()*60000;

<input id='date-input' type='date'>

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.valueAsDateale wtedy masz dodatkowe wywołanie do Date()konstruktora.

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.

ASP CLASSIC LUB VBSCRIPT:

current_year = DatePart("yyyy",date) 
current_month = DatePart("m",date) 
current_day = DatePart("d",date) 

IF current_month < 10 THEN
current_month = "0"&current_month
END IF
IF current_day < 10 THEN
current_day = "0"&current_day
END IF

get_date = current_year&"-"&current_month&"-"&current_day
Response.Write get_date

Wyjście z dzisiejszej daty: 08.02.2019

Następnie w swoim html: <input type="date" value="<% =get_date %>"

PHP

po prostu użyj tego: <input type="date" value="<?= date("Y-m-d"); ?>">

Jest to bardzo proste, stosując następujący kod: Korzystanie PHP

<input type="date" value="<?= date('Y-m-d', time()); ?>" />

Funkcja daty zwróci bieżącą datę, biorąc datę w time().

przez Javascript:

var today = new Date();

document.getElementById("theDate").value = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2);

new Date().getFullYear()+"-"+ ((parseInt(new Date().getMonth())+1+100)+"").substring(1)

Jeśli używasz rubinu, możesz użyć tego, aby ustawić domyślną wartość na dzisiejszą datę i godzinę:

<input type="datetime-local" name="time" value="<%= Time.now.strftime('%Y-%m-%dT%H:%M') %>" />

Proste rozwiązanie:

<input class="set-today" type="date">
<script type="text/javascript">
    window.onload= function() {
        document.querySelector('.set-today').value=(new Date()).toISOString().substr(0,10));
    }
</script>

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.

Miałem ten sam problem i naprawiłem go prostym JS. Dane wejściowe:

<input type="date" name="dateOrder" id="dateOrder"  required="required">

JS

<script language="javascript">
document.getElementById('dateOrder').value = "<?php echo date("Y-m-d"); ?>";
</script>

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.

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.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";

    // Send to the browser the input field with the value set with the date string
    echo "<input type='date' value='$date_string' />";
?>

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.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = "$year-$month-$day";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type="date" value="<?php print($date_string); ?>" />
        </form>
    </body>
</html>

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 :)

Dzięki Peter, teraz zmieniam kod.

<input type='date' id='d1' name='d1'>

<script type="text/javascript">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1="0"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = "0"+dt1;
var d2 = y1+"-"+m1+"-"+dt1;
document.getElementById('d1').value=d2;
</script>

I dla tych, którzy używają ASP VBScript

<%
'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart("d", strDate)
strMonth = DatePart("m", strDate)
strYear = DatePart("yyyy", strDate)
If strDay < 10 Then
  strDay = "0" & strDay
End If
If strMonth < 10 Then
  strMonth = "0" & strMonth
End If
GetFormattedDate = strYear & "-" & strMonth & "-" & strDay
End Function
%>

A potem w ciele twój element powinien wyglądać mniej więcej tak

<input name="today" type="date" value="<%= GetFormattedDate(now) %>" />

Twoje zdrowie!

Nawet po tak długim czasie może to komuś pomóc. To proste rozwiązanie JS.

JS

  let date = new Date();
  let today = date.toISOString().substr(0, 10);
  //console.log("Today: ", today);//test
  document.getElementById("form-container").innerHTML =
    '<input type="date" name="myDate" value="' + today + '" >';//inject field

HTML

 <form id="form-container"></form>

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):

//so in myComponent.ts 
//Import.... @Component...etc...
date: Date = new Date();
today: String; //<- note String
//more const ...
export class MyComponent implements OnInit {
   //constructor, etc.... 
   ngOnInit() {
      this.today = this.date.toISOString().substr(0, 10);
   }
}
//so in component.html 
<input type="date" [(ngModel)]="today"  />