Come impostare il valore predefinito della data del tipo di input su oggi?

I tipi di input HTML5 sono fantastici, il nuovo selettore di date incorporato di Opera è un gioco da ragazzi e Chrome ha almeno supportato il nuovo tipo di input con un'implementazione con rotellina.

Ma c'è un modo per impostare il valore predefinito del campo data sulla data odierna? Con Opera, posso scegliere "Oggi" dal selettore della data e non appena faccio clic su uno dei pulsanti di passaggio in Chrome, aumenta / diminuisce rispetto alla data odierna.

Non sono timido nel programmare una soluzione a questo piccolo problema, ma mi sembra sciocco che entrambi i browser siano pienamente consapevoli della data corrente, ma non la inseriranno automaticamente (almeno come segnaposto).

Come qualsiasi campo di input HTML, il browser lo lascerà vuoto a meno che non venga specificato un valore predefinito con l' valueattributo.

Sfortunatamente HTML5 non fornisce un modo per specificare "oggi" valuenell'attributo (che posso vedere), solo una data valida come RFC33392011-09-29 .

TL; DR Utilizza il YYYY-MM-DDformato data o non verrà visualizzato

L'oggetto JavaScript Date fornisce un supporto integrato sufficiente per il formato richiesto per evitare di farlo manualmente:

Aggiungi questo per il corretto supporto del fuso orario:

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

JS puro:

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

questo funziona per me:

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

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

Il seguente codice funziona bene:

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

Nota che questo si basa su PHP.

È possibile inserire il valore predefinito tramite JavaScript come visto qui: 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);
});

Vorrei probabilmente dedicare un po 'di tempo extra per vedere se il mese e la data sono cifre singole e prefissarle con lo zero aggiuntivo ... ma questo dovrebbe darti un'idea.

EDIT: aggiunto controllo per lo zero extra

Segui il formato Ymd standard, se stai utilizzando 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);
});

dimostrazione

Se non vuoi usare jQuery puoi fare qualcosa del genere

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;

dimostrazione

In HTML5 come tale, non c'è modo di impostare il valore predefinito del campo data sulla data odierna? Come mostrato in altre risposte, il valore può essere impostato tramite JavaScript e di solito questo è l'approccio migliore se si desidera impostare il valore predefinito in base alla data corrente dell'utente al momento del caricamento della pagina.

HTML5 definisce la valueAsDateproprietà per gli input type=dateelementi e, utilizzandolo, è possibile impostare il valore iniziale direttamente da un oggetto creato ad es new Date(). Tuttavia, ad esempio IE 10 non conosce quella proprietà. (Manca anche di supporto genuino input type=date, ma questo è un problema diverso.)

Quindi, in pratica, è necessario impostare la valueproprietà e deve essere in notazione conforme ISO 8601. Oggi questo può essere fatto piuttosto facilmente, poiché possiamo aspettarci che i browser attualmente utilizzati supportino il toISOStringmetodo:

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

Se stai facendo qualcosa di correlato alla data e all'ora nel browser, vuoi usare Moment.js :

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

moment()restituisce un oggetto che rappresenta la data e l'ora correnti. Quindi si chiama il suo .format()metodo per ottenere una rappresentazione di stringa in base al formato specificato. In questo caso YYYY-MM-DD,.

Esempio completo:

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

usa moment.js per risolvere questo problema in 2 righe, html5 tipo di input data accetta solo "AAAA-MM-GG" in questo formato. Risolvo il mio problema in questo modo.

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

questo è il modo più semplice per risolvere questo problema.

Javascript

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

jquery

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

Un'altra opzione

Se desideri personalizzare la data, il mese e l'anno, fai semplicemente la somma o il sottotitolo come desideri 😎 Per iniziare il mese dal modulo 0, ecco perché devi sommare 1 con il mese.

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

Appy la funzione oggi

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

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

Molto semplice, basta usare le lingue lato server come PHP, ASP, JAVA o anche tu puoi usare javascript.

Ecco la soluzione

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

se è necessario compilare il datetime di input, è possibile utilizzare questo:

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

Per NodeJS (Express con modelli SWIG):

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

Le soluzioni più semplici sembrano trascurare il fatto che verrà utilizzato il tempo UTC, compresi quelli altamente votati. Di seguito è una versione semplificata, ES6, non jQuery di un paio di risposte esistenti:

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

Questo è quello che ho fatto nel mio codice, ho appena testato e ha funzionato bene, input type = "date" non supporta l'impostazione automatica della cagliata, quindi il modo in cui ho usato per superare questa limitazione era usare il codice PHP con un codice semplice come questo .

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

Spero che sia d'aiuto!

Entrambe le risposte principali sono errate.

Un breve one-liner che utilizza JavaScript puro, tiene conto del fuso orario locale e non richiede alcuna funzione aggiuntiva da definire:

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

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

Ciò ottiene il datetime corrente in millisecondi (dall'epoca) e applica l'offset del fuso orario in millisecondi (minuti * 60k minuti per millisecondo).

Puoi impostare la data usando element.valueAsDatema poi hai una chiamata extra al Date()costruttore.

Questo è qualcosa che devi davvero fare sul lato server poiché il formato dell'ora locale di ogni utente differisce, per non parlare del comportamento diverso di ogni browser.

Il valore degli input data HTML deve essere in questo formato: aaaa-mm-gg altrimenti non mostrerà un valore.

ASP CLASSIC, O 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

Uscita della data odierna: 2019-02-08

Quindi nel tuo HTML: <input type="date" value="<% =get_date %>"

PHP

basta usare questo: <input type="date" value="<?= date("Y-m-d"); ?>">

Questo è molto semplice applicando il seguente codice, Utilizzo PHP

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

La funzione Data restituirà la data corrente, prendendo la data in time().

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

Se stai usando ruby ​​puoi usarlo per impostare il valore predefinito alla data e ora di oggi:

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

Una soluzione semplice:

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

Poiché non esiste un metodo predefinito per impostare il valore alla data odierna, direi che questo dovrebbe dipendere dalla sua applicazione. Se stai cercando di massimizzare l'esposizione del tuo pubblico al selettore di date, usa uno script lato server (PHP, ASP, ecc.) Per impostare il valore predefinito.

Tuttavia, se è per la console di amministrazione del CMS e sai che l'utente avrà sempre JS su o il tuo sito attendibile, allora puoi tranquillamente usare JS per riempire il valore predefinito, come da jlbruno.

Ho avuto lo stesso problema e l'ho risolto con un semplice JS. L'input:

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

il JS

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

Importante: lo script JS dovrebbe essere nell'ultima riga di codice o dopo l'input, poiché se si inserisce questo codice prima, lo script non troverà l'input.

Non esiste un metodo predefinito all'interno dello stesso HTML per inserire la data odierna nel campo di input. Tuttavia, come qualsiasi altro campo di input, accetta un valore.

Puoi usare PHP per recuperare la data odierna e inserirla nel campo valore dell'elemento modulo.

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

Il campo valore accetta il formato AAAA-MM-GG come input creando semplicemente una variabile $date_string nello stesso formato che accetta il valore di input e riempilo con l'anno, il mese e il giorno recuperati dalla data e dal voilá di oggi! Hai una data preselezionata!

Spero che sia di aiuto :)

Modificare:

Se desideri che il campo di input sia nidificato in HTML anziché in PHP, puoi procedere come segue.

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

Mi rendo conto che questa domanda è stata posta un po 'di tempo fa (2 anni fa) ma mi ci è voluto ancora un po' per trovare una risposta definitiva su Internet, quindi questo va a servire chiunque cerchi la risposta ogni volta che può essere e lo spero aiuta notevolmente tutti :)

Un'altra modifica:

Quasi dimenticato, qualcosa che è stato un dolore reale per me in passato dimentica sempre di impostare il fuso orario predefinito ogni volta che si crea uno script in PHP che utilizza la funzione date ().

La sintassi è date_default_timezone_set(...);. La documentazione è disponibile qui su PHP.net e l'elenco dei fusi orari supportati da inserire nella funzione è disponibile qui . Questo è sempre stato fastidioso da quando sono in Australia, tutto viene sempre respinto di 10 ore se non l'ho impostato correttamente in quanto per impostazione predefinita è UTC + 0000 dove ho bisogno di UTC + 1000 quindi fai attenzione :)

Grazie Peter, ora cambio il mio codice.

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

E per quelli che usano 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
%>

E poi nel corpo, il tuo elemento dovrebbe assomigliare a questo

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

Saluti!

Anche dopo tutto questo tempo, potrebbe aiutare qualcuno. Questa è una soluzione JS semplice.

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>

Una soluzione simile funziona in angolare senza alcuna libreria aggiuntiva per convertire il formato della data. Per Angolare (il codice è abbreviato a causa del codice componente comune):

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