Condividi tramite

Guida introduttiva: Aggiunta di un controllo DatePicker (HTML)

  • Articolo

[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]

Se vuoi permettere agli utenti di impostare una data nella tua app, ad esempio per pianificare un appuntamento o annotare la data di scadenza di una carta di credito, puoi usare un controllo DatePicker, che fa parte della libreria Windows per JavaScript. Il controllo DatePicker visualizza tre controlli: uno per il mese, uno per il giorno e uno per l'anno. Questi controlli sono facilmente utilizzabili con il supporto per il tocco ed è possibile definirne stile e configurazione in molti modi diversi. (Solo Windows)

Obiettivo: Dimostrare come si usa un controllo DatePicker.

Prerequisiti

Partiamo dal presupposto che tu sappia come creare una semplice app di Windows Runtime in JavaScript. Per istruzioni sulla creazione della tua prima app, vedi Creazione della prima app di Windows Runtime scritta in JavaScript.

Istruzioni

1. Creare un semplice controllo DatePicker

Come accade con la maggior parte dei controlli WinJS, puoi creare un controllo DatePicker in modo dichiarativo, cioè come un attributo data-win-control su un elemento <div>, oppure in modo imperativo, cioè come un oggetto in un blocco di codice JavaScript. Affinché il controllo venga visualizzato, devi chiamare la funzione WinJS.UI.processAll. Se usi i modelli di progetto di Visual Studio per le app di Windows Store in JavaScript, questa operazione viene eseguita automaticamente nel gestore eventi activated.

Ecco come impostare un controllo DatePicker in modo dichiarativo:

<!DOCTYPE html>
<html>
<head>
  <title>DatePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
</head>
 <body>
     <section>
         <h1> DatePicker Example</h1>
             <h3>Add a DatePicker Declaratively</h3>
             <div id="date" data-win-control="WinJS.UI.DatePicker"></div>
             <script type="text/javascript">
                 WinJS.UI.processAll();
             </script>
     </section>
 </body>
 
</html>

Ecco come creare un controllo DatePicker nel codice:

<!DOCTYPE html>
<html>
<head>
<head>
  <title>DatePicker Control Example</title>  
  <link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet">
  <script src="//Microsoft.WinJS.2.0/js/base.js"></script>
  <script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
  </head>
    <body>      
        <section>
            <h1> DatePicker Example</h1>
                <h3>Add a DatePicker Imperatively</h3>
            <div id="date"></div>
            <script type="text/javascript">
               var dateDiv = document.getElementById("date");
               var datePicker = new WinJS.UI.DatePicker(dateDiv);
            </script>
        </section>
    </body>
</html>

Quando compili ed esegui la tua soluzione, vedrai un controllo che, per impostazione predefinita, visualizza la data corrente con tre elenchi a discesa per il mese, il giorno e l'anno.

Quando usi il file ui-dark.css, il controllo DatePicker è simile al seguente: Tema scuro di DatePicker

Quando usi il file ui-light.css, il controllo DatePicker è simile al seguente:Tema chiaro di DatePicker

2. Modificare la data predefinita

Puoi impostare una diversa data predefinita in modo dichiarativo:

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{current:'2/20/2011'}"></div>

Puoi impostare la data predefinita anche nel codice:

// "date" is the id of the <div> element
var dateDiv = document.getElementById("date") 
var datePicker = new WinJS.UI.DatePicker(dateDiv, {current: '2/20/2011'});

Puoi formattare la stringa della data in tutti i modi consentiti dall'oggetto JavaScript Date. Ecco alcuni esempi:

  • '20 febbraio 2011'
  • '20/02/2011'
  • 'Domenica, 20 febbraio 2011'

Importante  In questa versione puoi usare qualsiasi calendario.

 

3. Specificare date minime e massime diverse

Per impostazione predefinita, l'anno più lontano nel passato che un utente può selezionare è l'anno corrente meno 100, mentre l'anno più lontano nel futuro è l'anno corrente più 100. Per impostare l'anno più lontano nel passato su 1900 e l'anno più lontano nel futuro su 2300, esegui i passaggi seguenti:

In modo dichiarativo

<div data-win-control="WinJS.UI.DatePicker" data-win-options="{minYear: 1900, maxYear: 2300}"></div>

Nel codice

var datePicker = new WinJS.UI.DatePicker(dateDiv);
datePicker.minYear= 1900;
datePicker.maxYear = 2300;

4. Cambiare il modello per giorno, mese o anno

Puoi cambiare il modello per il giorno, il mese o l'anno. Per impostazione predefinita, il controllo DatePicker visualizza il nome del giorno e il mese e l'anno nei formati a 2 cifre o a 4 cifre in base delle impostazioni locali. Puoi cambiare questa impostazione nei modi seguenti.

Per cambiare la modalità di visualizzazione del mese


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//change the month to an integer
datePicker.monthPattern = "{month.integer}"; 

//change the month to an abbreviation
datePicker.monthPattern = "{month.abbreviated}";

Per cambiare la modalità di visualizzazione del giorno


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//display the day without leading zeros
datePicker.datePattern = "{day.integer(1)}";

//display the day of the week along with the date
datePicker.datePattern = 
    "{day.integer(2)} ({dayofweek.abbreviated})";

Per cambiare la modalità di visualizzazione dell'anno


var datePicker = new WinJS.UI.DatePicker(dateDiv);

//diplay the year with only two digits
 datePicker.yearPattern = "{year.abbreviated}";

Nell'elenco seguente sono riportati i possibili valori per i formati che puoi usare in un controllo DatePicker:

  • {day.integer} | day.integer(n)}
  • {dayofweek.full} | {dayofweek.abbreviated} | {dayofweek.abbreviated(n)}
  • {dayofweek.solo.full} | {dayofweek.solo.abbreviated} | {dayofweek.solo.abbreviated(n)}
  • {month.full} | {month.abbreviated} | {month.abbreviated(n)}
  • {month.solo.full} | {month.solo.abbreviated} | {month.solo.abbreviated(n)}
  • {month.integer} | {month.integer(n)}
  • {year.full} | {year.full(n)} | {year.abbreviated} | {year.abbreviated(n)}
  • {era.abbreviated} | {era.abbreviated(n)}

5. Cambiare il calendario

Puoi cambiare il calendario usato dal controllo DatePicker.

  • Cambia il calendario in uno dei valori seguenti:

    • "GregorianCalendar"

    • "HijriCalendar"

    • "HebrewCalendar"

    • "JapaneseCalendar"

    • "KoreanCalendar"

    • "ThaiCalendar"

    • "TaiwanCalendar"

    • "UmAlQuraCalendar"

    • "JulianCalendar"

    
datePicker.calendar = "ThaiCalendar";

6. Disabilitare un controllo DatePicker

Puoi disabilitare un controllo DatePicker impostando la relativa proprietà disabled su true. Di conseguenza, il controllo sarà visualizzato in grigio e non sarà disponibile per l'utente.

datePicker.disabled = true;

7. Rispondere all'evento di modifica

Puoi modificare il comportamento nella tua applicazione gestendo l'evento change. Questo evento viene generato quando l'utente cambia una data, non quando la data viene modificata a livello di programmazione.


datePicker.onchange = dateChangeHandler;

function dateChangeHandler(event) {
    // Insert code here.
    }

8. Modificare l'aspetto di un controllo DatePicker

In generale, per modificare l'aspetto di un controllo DatePicker puoi usare gli stili CSS Puoi usare gli stili border-color e background-color per dare maggiore risalto al controllo DatePicker.

<style id="text/css">
    [class="win-datepicker"] {background-color:LightBlue; }
</style>

Per specificare parti specifiche di un controllo DatePicker, puoi usare le classi CSS seguenti:

  • win-datepicker
  • win-datepicker-date
  • win-datepicker-month
  • win-datepicker-year

Ad esempio puoi cambiare il colore del bordo dell'elenco a discesa della data.


 .win-datepicker-date
{
    border: 3px solid rgb(28, 160, 218);
}

In questo modo, usando il file ui-light.css l'elenco a discesa della data verrà visualizzato con un bordo blu:Un controllo DatePicker con stili

Puoi specificare tutti e tre gli elenchi a discesa DatePicker usando la sintassi del prefisso del selettore di attributi CSS (^=), che consente di trovare tutti gli attributi il cui nome inizia con la stringa specificata:

[class^="win-datepicker"] {border:red; }

9. Visualizzare e nascondere i controlli

Puoi specificare se desideri visualizzare o nascondere il giorno e/o l'anno impostando l'attributo display dell'elenco a discesa specifico su none:

.win-datepicker-year { display:none; }

Se vuoi nascondere un elenco a discesa per una sola istanza di un controllo DatePicker, devi specificare l'ID dell'elemento <div>. Se ad esempio vuoi nascondere la data solo per il controllo DatePicker visualizzato nell'elemento <div> che ha un ID "date", ecco come fare:

#date *.win-datepicker-date { display: none; }

10. Visualizzare gli elenchi a discesa di DatePicker verticalmente

Se vuoi che gli elenchi a discesa per il mese, il giorno e l'anno siano visualizzati verticalmente invece che orizzontalmente, puoi impostare l'attributo CSS display sui controlli. Devi inoltre impostare display per il blocco sull'elemento DIV stesso.


#date {display:block;}
#date *[class^="win-datepicker"]{ display:block; }

Puoi visualizzare gli elenchi a discesa verticalmente in modo condizionale, ad esempio solo quando la larghezza della schermata è inferiore a un determinato limite. Nella media query CSS seguente è specificato che i controlli devono essere visualizzati verticalmente per tutte le larghezze fino a 320 pixel.

@media all and (max-width:320px) {
#date {display:block;}
*[class^="win-datepicker"] { display: block; }
}

11. Usare stili diversi per istanze diverse del controllo DatePicker

Puoi usare stili diversi per un'istanza specifica del controllo DatePicker specificando l'elemento <div> associato a tale istanza. Se ad esempio hai un controllo DatePicker in un elemento <div> che ha un ID "start-date" e un altro in un elemento <div> che ha un ID "end-date", puoi impostare colori diversi per il carattere dei controlli DatePicker della data iniziale e della data finale:

#start-date [class^="win-datepicker"] { color:red; }
#end-date [class^="win-datepicker"] { color:blue; }

12. Uso delle pseudoclassi per definire lo stile di DatePicker

Il controllo DatePicker supporta le pseudoclassi seguenti che puoi usare come selettori per visualizzare determinati stili quando il controllo si trova in stati specifici.

  • win-datepicker:hover. L'utente posiziona il cursore sul controllo di selezione ma non lo attiva facendo clic. Elenco a discesa del mese al passaggio del mouse. DatePicker al passaggio del mouse

  • win-datepicker:active. Il controllo di selezione è attivo dopo che l'utente ha premuto il controllo per aprire l'elenco a discesa e prima che selezioni un'opzione.DatePicker nello stato attivo

  • win-datepicker:focus. Il controllo di selezione è evidenziato per indicare che accetta input da tastiera.DatePicker evidenziato

  • win-datepicker:disabled. Il controllo di selezione non accetta interazioni utente. Per questa pseudoclasse è necessario impostare su true la proprietà disabled del controllo di selezione.DatePicker disabilitato

In questo argomento hai imparato a creare un controllo DatePicker.