Wie setze ich den Standardwert für das Datum des Eingabetyps auf heute?

Die HTML5-Eingabetypen sind großartig, die neue integrierte Datumsauswahl von Opera ist ein Kinderspiel, und Chrome hat den neuen Eingabetyp zumindest mit einer Spin-Wheel-Implementierung unterstützt.

Aber gibt es eine Möglichkeit, den Standardwert des Datumsfelds auf das heutige Datum festzulegen? Mit Opera kann ich in der Datumsauswahl "Heute" auswählen. Sobald ich auf eine der Schrittschaltflächen in Chrome klicke, wird das heutige Datum erhöht / verringert.

Ich bin nicht schüchtern, eine Lösung für dieses kleine Problem zu programmieren, aber es scheint mir albern, dass beide Browser das aktuelle Datum vollständig kennen, es aber nicht automatisch einfach einfügen (zumindest als Platzhalter).

Wie jedes HTML-Eingabefeld lässt der Browser es leer, es sei denn, mit dem valueAttribut wird ein Standardwert angegeben .

Leider bietet HTML5 keine Möglichkeit, "heute" im valueAttribut anzugeben (das ich sehen kann), sondern nur ein gültiges RFC3339- Datum wie 2011-09-29.

TL; DR Verwenden Sie das YYYY-MM-DDDatumsformat, da es sonst nicht angezeigt wird

Das JavaScript-Datumsobjekt bietet ausreichend integrierte Unterstützung für das erforderliche Format, um eine manuelle Ausführung zu vermeiden:

Fügen Sie dies für die korrekte Zeitzonenunterstützung hinzu:

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();

das funktioniert bei mir:

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

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

Der folgende Code funktioniert gut:

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

Beachten Sie, dass dies auf PHP beruht.

Sie können den Standardwert über Javascript eingeben, wie hier dargestellt: 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);
});

Ich würde wahrscheinlich etwas mehr Zeit investieren, um zu sehen, ob der Monat und das Datum einstellig sind, und ihnen die zusätzliche Null voranstellen ... aber dies sollte Ihnen eine Idee geben.

BEARBEITEN: Überprüfung für die zusätzliche Null hinzugefügt

Befolgen Sie das Standard-Ymd-Format, wenn Sie PHP verwenden

<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);
});

Demo

Wenn Sie jQuery nicht verwenden möchten, können Sie so etwas tun

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;

Demo

In HTML5 als solches gibt es keine Möglichkeit, den Standardwert des Datumsfelds auf das heutige Datum festzulegen. Wie in anderen Antworten gezeigt, kann der Wert mithilfe von JavaScript festgelegt werden. Dies ist normalerweise der beste Ansatz, wenn Sie den Standardwert gemäß dem aktuellen Datum festlegen möchten, an dem der Benutzer beim Laden der Seite aktuell ist.

HTML5 definiert die valueAsDateEigenschaft für input type=dateElemente. Mithilfe dieser Eigenschaft können Sie den Anfangswert direkt aus einem Objekt festlegen, das z new Date(). B. von erstellt wurde . Beispielsweise kennt IE 10 diese Eigenschaft jedoch nicht. (Es fehlt auch echte Unterstützung input type=date, aber das ist ein anderes Problem.)

In der Praxis müssen Sie die valueEigenschaft festlegen und sie muss in ISO 8601-konformer Notation vorliegen. Heutzutage ist dies ziemlich einfach, da wir erwarten können, dass derzeit verwendete Browser die toISOStringMethode unterstützen:

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

Wenn Sie im Brower etwas mit Datum und Uhrzeit zu tun haben, möchten Sie Moment.js verwenden :

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

moment()Gibt ein Objekt zurück, das das aktuelle Datum und die aktuelle Uhrzeit darstellt. Anschließend rufen Sie die .format()Methode auf, um eine Zeichenfolgendarstellung gemäß dem angegebenen Format abzurufen. In diesem Fall YYYY-MM-DD.

Vollständiges Beispiel:

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

Verwenden Sie moment.js, um dieses Problem in zwei Zeilen zu lösen. Der HTML5-Datumseingabetyp akzeptiert nur dieses Format "JJJJ-MM-TT". Ich löse mein Problem auf diese Weise.

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

Dies ist der einfachste Weg, um dieses Problem zu lösen.

Javascript

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

Jquery

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

Andere Option

Wenn Sie Datum, Monat und Jahr anpassen möchten, geben Sie einfach die Summe oder Unterzahl nach Ihren Wünschen ein. 😎 Wenn der Monat von 0 aus gestartet wird, müssen Sie 1 mit dem Monat summieren.

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 );
    }

Wenden Sie die Heute-Funktion an

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

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

Sehr einfach, verwenden Sie einfach serverseitige Sprachen wie PHP, ASP, JAVA oder sogar Javascript.

Hier ist die Lösung

<?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" />

Wenn Sie die eingegebene Datumszeit eingeben müssen, können Sie Folgendes verwenden:

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

Für NodeJS (Express mit SWIG-Vorlagen):

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

Die einfachsten Lösungen scheinen zu übersehen, dass die UTC-Zeit verwendet wird, einschließlich der hochstimmigen. Im Folgenden finden Sie eine optimierte ES6-Nicht-jQuery-Version einiger vorhandener Antworten:

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

Dies ist, was ich in meinem Code getan habe, ich habe es gerade getestet und es hat gut funktioniert. Der Eingabetyp = "Datum" unterstützt das automatische Festlegen von curdate nicht. Die Art und Weise, wie ich diese Einschränkung überwunden habe, war die Verwendung von PHP-Code, einem einfachen Code wie diesem .

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

Ich hoffe es hilft!

Beide Top-Antworten sind falsch.

Ein kurzer Einzeiler, der reines JavaScript verwendet, die lokale Zeitzone berücksichtigt und keine zusätzlichen Funktionen definiert werden muss:

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

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

Dadurch wird die aktuelle Datumszeit in Millisekunden (seit der Epoche) abgerufen und der Zeitzonenversatz in Millisekunden (Minuten * 60.000 Minuten pro Millisekunde) angewendet.

Sie können das Datum mit festlegen element.valueAsDate, haben dann aber einen zusätzlichen Aufruf an den Date()Konstruktor.

Dies ist etwas, das Sie wirklich serverseitig tun müssen, da das lokale Zeitformat jedes Benutzers unterschiedlich ist, ganz zu schweigen davon, dass sich jeder Browser anders verhält.

Der HTML-Datumseingabewert sollte in diesem Format vorliegen: JJJJ-MM-TT. Andernfalls wird kein Wert angezeigt .

ASP CLASSIC ODER 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

Ausgabe des heutigen Datums: 2019-02-08

Dann in Ihrem HTML: <input type="date" value="<% =get_date %>"

PHP

benutze einfach das: <input type="date" value="<?= date("Y-m-d"); ?>">

Dies ist sehr einfach, indem Sie den folgenden Code anwenden: Using PHP

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

Die Datumsfunktion gibt das aktuelle Datum zurück, indem das Datum eingegeben wird time().

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

Wenn Sie Ruby verwenden, können Sie damit den Standardwert auf das heutige Datum und die heutige Uhrzeit setzen:

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

Eine einfache Lösung:

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

Da es keine Standardmethode zum Festlegen des Werts auf das heutige Datum gibt, würde ich sagen, dass dies von der Anwendung abhängen sollte. Wenn Sie die Aufmerksamkeit Ihrer Zielgruppe für die Datumsauswahl maximieren möchten, verwenden Sie ein serverseitiges Skript (PHP, ASP usw.), um den Standardwert festzulegen.

Wenn es sich jedoch um die Administrationskonsole des CMS handelt und Sie wissen, dass der Benutzer immer JS aktiviert hat oder Ihre Site vertrauenswürdig ist, können Sie JS verwenden, um den Standardwert gemäß jlbruno sicher zu füllen.

Ich hatte das gleiche Problem und habe es mit einfachem JS behoben. Die Eingabe:

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

die JS

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

Wichtig: Das JS-Skript sollte sich in der letzten Codezeile oder nach der Eingabe befinden, da das Skript Ihre Eingabe nicht findet, wenn Sie diesen Code vorher eingeben.

In HTML selbst gibt es keine Standardmethode zum Einfügen des heutigen Datums in das Eingabefeld. Wie jedes andere Eingabefeld akzeptiert es jedoch einen Wert.

Mit PHP können Sie das heutige Datum abrufen und in das Wertefeld des Formularelements eingeben.

<?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' />";
?>

Das Wertefeld akzeptiert das Format JJJJ-MM-TT als Eingabe. Erstellen Sie also einfach eine Variable $date_stringim selben Format, das der Eingabewert akzeptiert, und füllen Sie sie mit dem Jahr, dem Monat und dem Tag, die vom heutigen Datum und Voilá abgerufen wurden. Sie haben selbst ein vorausgewähltes Datum!

Hoffe das hilft :)

Bearbeiten:

Wenn Sie möchten, dass das Eingabefeld nicht in PHP, sondern in HTML verschachtelt ist, können Sie Folgendes tun.

<?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>

Mir ist klar, dass diese Frage vor einiger Zeit gestellt wurde (vor 2 Jahren), aber ich habe noch eine Weile gebraucht, um eine eindeutige Antwort im Internet zu finden. Dies dient also jedem, der nach einer Antwort sucht, wann immer es sein mag, und hoffe es hilft allen sehr :)

Noch eine Bearbeitung:

Fast vergessen, etwas, das in der Vergangenheit für mich ein königlicher Schmerz war, ist immer zu vergessen, die Standardzeitzone festzulegen, wenn ein Skript in PHP erstellt wird, das die Funktion date () verwendet.

Die Syntax lautet date_default_timezone_set(...);. Die Dokumentation finden Sie hier auf PHP.net und die Liste der unterstützten Zeitzonen, die in die Funktion eingefügt werden sollen, finden Sie hier . Das war immer ärgerlich, da ich in Australien bin. Alles wird immer 10 Stunden zurückgeschoben, wenn ich dies nicht richtig eingestellt habe, da es standardmäßig UTC + 0000 ist, wo ich UTC + 1000 benötige. Sei also vorsichtig :)

Danke Peter, jetzt ändere ich meinen Code.

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

Und für diejenigen, die ASP VBScript verwenden

<%
'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
%>

Und dann sollte Ihr Element im Körper ungefähr so ​​aussehen

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

Prost!

Selbst nach all dieser Zeit könnte es jemandem helfen. Dies ist eine einfache JS-Lösung.

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>

Eine ähnliche Lösung funktioniert in Angular ohne zusätzliche Bibliothek zum Konvertieren des Datumsformats. Für Angular (Code wird aufgrund des allgemeinen Komponentencodes verkürzt):

//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"  />