<input type="week">

Gli elementi <input type="week"> creano campi di input che consentono di inserire facilmente un anno più il numero della settimana ISO 8601 durante quell'anno

L'interfaccia utente del controllo varia da browser a browser; il supporto cross-browser è attualmente un po' limitato, con solo Chrome/Opera e Microsoft Edge che lo supportano in questo momento. Nei browser non di supporto, il controllo degrada in modo regolare per funzionare in modo identico a <input type="text">.

Valore

Una stringa che rappresenta il valore della settimana/anno immesso nell'input.

Puoi impostare un valore predefinito per l'input includendo un valore all'interno dell'attributo value, in questo modo:

<label for="week">Da quale settimana preferisci iniziare?</label>
<input id="week" type="week" name="week" value="2017-W01">

Una cosa da notare è che il formato visualizzato può differire da quello effettivo value, che è sempre formattato yyyy-Www. Quando il valore precedente viene inviato al server, ad esempio, i browser possono visualizzarlo come Week 01, 2017, ma il valore inviato sarà sempre simile a week=2017-W01.

Puoi anche ottenere e impostare il valore in JavaScript usando la proprietà value dell'elemento di input, ad esempio:

var weekControl = document.querySelector('input[type="week"]);
weekControl.value = '2017-W45';

Attributi aggiuntivi

Oltre agli attributi comuni agli elementi <input>, gli input settimanali offrono i seguenti attributi.

max

L'ultimo numero (in termini temporali) dell'anno e della settimana, nel formato stringa discusso nella sezione Valore sopra, da accettare. Se il valore immesso nell'elemento supera questo valore, l'elemento non supera la convalida del vincolo . Se il valore dell'attributo max non è una stringa di una settimana valida, l'elemento non ha un valore massimo.

Questo valore deve essere maggiore o uguale all'anno e alla settimana specificati dall'attributo min.

min

Il primo anno e la prima settimana da accettare. Se il valore dell'elemento è inferiore a questo, l'elemento non supera la convalida del vincolo . Se viene specificato un valore min che non è una stringa di una settimana valida, l'input non ha un valore minimo.

Questo valore deve essere minore o uguale al valore dell'attributo max.

readonly

Un attributo booleano che, se presente, significa che questo campo non può essere modificato dall'utente. Tuttavia, value può ancora essere modificato dal codice JavaScript impostando direttamente la proprietà HTMLInputElement value.

step

L'attributo step è un numero che specifica la granularità a cui deve attenersi il valore o il valore speciale any, descritto di seguito. Sono validi solo i valori che sono uguali alla base per lo stepping (min se specificato, value altrimenti, e un valore predefinito appropriato se nessuno di questi è fornito).

Un valore stringa di any significa che non è implicito alcun passaggio e qualsiasi valore è consentito (salvo altri vincoli, come min e max).

Per gli <input type="week">, il valore di stepè espresso in settimane, con un fattore di scala di 604.800.000 (poiché il valore numerico sottostante è in millisecondi). Il valore predefinito di stepè 1, che indica 1 settimana. La base stepping predefinita è -259.200.000, ovvero l'inizio della prima settimana del 1970 ("1970-W01").

Utilizzo di <input type="week">

Gli input settimanali sembrano convenienti a prima vista, poiché forniscono un'interfaccia utente semplice per la scelta delle settimane e normalizzano il formato dei dati inviati al server, indipendentemente dal browser o dalle impostazioni locali dell'utente. Tuttavia, ci sono problemi con <input type="week"> perché il supporto del browser non è garantito su tutti i browser.

L'uso più semplice di <input type="week"> prevede una combinazione di base <input> ed <label>, come mostrato di seguito:

<form>
<label for="week">Da quale settimana preferisci iniziare?</label>
<input id="week" type="week" name="week" value="2017-W01">
</form>

Convalida

Per impostazione predefinita, <input type="week"> non applica alcuna convalida ai valori immessi. Le implementazioni dell'interfaccia utente in genere non ti consentono di specificare nulla che non sia una settimana/anno valido, il che è utile, ma è comunque possibile inviare con il campo vuoto e potresti voler limitare l'intervallo di settimane selezionabili.

Impostazione delle settimane minime e massime

È possibile utilizzare gli attributi min e max per limitare le settimane valide che possono essere scelte dall'utente. Nell'esempio seguente impostiamo un valore minimo di Week 01, 2017e un valore massimo di Week 52, 2017:

<form>
  <label for="week">Da quale settimana preferisci iniziare?</label>
  <input id="week" type="week" name="week"
  min="2017-W01" max="2017-W52">
</form>