impostare la data nel tipo di input data


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

imposterò la data odierna in datepicker tipo di input data in chrome.

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

ma non funziona

Modifica questo jsFiddle - Prova in Chrome.


2
Se scegli una data sul violino e controlli il frame dei risultati, fai un $('#datePicker').val();dato "2012-09-10"e questo non è il formato che usi per impostare la data

Funziona in cromo dalla mia parte .. Cosa intendi esattamente con its not working?
AdityaParab

prova { currentText: "Now" }
:,

lavorando su di me ... qual è il problema?
Netorica

1
@JigarPandya fr_FR (@ user108, puoi anche stackoverflow.com/a/3496622/180100 )

Risposte:


159

Collegamento violino: http://jsfiddle.net/7LXPq/93/

Due problemi in questo:

  1. Il controllo della data in HTML 5 accetta il formato Anno - mese - giorno che usiamo in SQL
  2. Se il mese è 9, deve essere impostato come 09 non 9 semplicemente. Quindi vale anche per il campo giorno.

Segui il link del violino per la 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
Risposta post-2012: controlla la mia risposta per una soluzione supportata in una riga di codice.
Oliv Utilo

@ OlivUtilo — certo, ma la tua risposta fornirà risultati errati alcune volte.
RobG

Mi hai risparmiato tempo amico, grazie mille
Dip Surani

128

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

dovrebbe funzionare.


6
Questa è la migliore soluzione che ho trovato finora: funziona su Android 4.0.3
Ben Clayton

6
Sicuramente sembra più pulito della risposta accettata ... grazie
Skipjack

1
Ho scoperto che questo non funziona in Safari per qualche motivo :(
james_alvarez

Testato in Chrome e Edge e trovato che funziona bene. Come ha detto @Skipjack, è una risposta fantastica!
Arun

Sembra la soluzione corretta, tuttavia in Safari (13.1.2) la chiamata genera un'eccezione di stato non valido. Non sei sicuro del perché ...?
fbitterlich

23

Aggiornamento: lo sto facendo con date.toISOString().substr(0, 10). Fornisce lo stesso risultato della risposta accettata e ha un buon supporto.


2
Lavora in safari
james_alvarez

4
Nota: questo fornisce una data nel fuso orario UTC. Al contrario, la risposta in alto utilizza l'ora locale.
Qwertie

@Qwertie - entrambi operano sullo stesso Dateoggetto (creato con il nuovo Date o Date.now, che ereditano il fuso orario dal browser). usando toISOString o le funzioni getDate (credo) risolverà lo stesso; quindi penso che questo dovrebbe avere il comportamento desiderato ...
Oliv Utilo

1
@ OlivUtilo: no, non lo fanno per il periodo di offset del fuso orario per l'host.
RobG

Come dice Qwertie, questo potenzialmente dà la risposta sbagliata se stai usando una data senza un orario. ad esempio, sabato 1 settembre 2018 00:00:00 GMT + 0100 viene convertito in "2018-08-31"
havlock

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

Il codice sopra funzionerà.


12

per me il modo più breve per risolvere questo problema è usare moment.js e risolverlo in sole 2 righe.

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

1
sì proprio come $ ('# datePicker'). val (moment (). format ('AAAA-MM-GG'));
Umair Khalid

2
Per le persone che non hanno familiarità con Moment, se desideri formattare un oggetto Date Javascript arbitrario con moment (): var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD'); $('#datePicker').val(yourFormattedDate);
veuncent


1

Di solito creo queste due funzioni di supporto quando utilizzo gli input di data:

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

È quindi possibile impostare il valore di input della data come:

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

E recupera il valore selezionato in questo modo

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

0

Datetimepicker ha sempre bisogno del formato di input AAAA-MM-GG, non si preoccupa del formato di visualizzazione del tuo modello o del tuo datetime del sistema locale. Ma il formato di output del selettore di data e ora è quello desiderato (il tuo sistema locale). C'è un semplice esempio nel mio post .


0

È possibile utilizzare solo la data nell'input type="date"come nel formatoYYYY-MM-DD

Ho implementato l'helper come formatDatein NODE.js express-handlebars, non devi preoccuparti ... usa semplicemente il formato come descritto nella prima riga.

per esempio:

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

-5

Versione Jquery

var currentdate = new Date();

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

4
$.datepickernon è jQuery predefinito. Stai usando un plugin e senza dire quale, questa risposta è inutile.
Emile Bergeron
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.