Guida introduttiva: Aggiunta di un controllo TimePicker (HTML)

Articolo
03/04/2016

[ 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 selezionare un'ora nella tua app, ad esempio per pianificare un appuntamento o impostare un promemoria, puoi usare un controllo TimePicker, che fa parte della libreria Windows per JavaScript. Il controllo TimePicker visualizza tre controlli: ore, minuti e AM/PM. 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 TimePicker.

Prerequisiti

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

Tempo per il completamento: 15 minuti.

Istruzioni

1. Creare un semplice controllo TimePicker

Come accade con la maggior parte dei controlli WinJS, puoi creare un controllo TimePicker 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 creare un controllo TimePicker in modo dichiarativo:

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker 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>
    <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Declaratively</h3>
                <div id="time" data-win-control="WinJS.UI.TimePicker"></div>
                <script type="text/javascript">
                    WinJS.UI.processAll(document.getElementById("time"));
                </script>
        </section>
    </body>
    
</html>

Per creare un controllo TimePicker in modo imperativo (nel codice), esegui i passaggi seguenti:

<!DOCTYPE html>
<html>
<head>
  <title>TimePicker 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>
   <body>
        <section>
            <h1> TimePicker Example</h1>
                <h3>Add a TimePicker Imperatively</h3>
                <div id="time" ></div>
                <script type="text/javascript">
                    var timeDiv = document.getElementById("time"); 
                    var timePicker = new WinJS.UI.TimePicker(timeDiv);
                </script>
        </section>
    </body>
</html>

Quando compili ed esegui la tua soluzione, vedrai tre controlli che visualizzano l'ora corrente: un controllo per le ore, uno per i minuti e uno per AM o PM.

Ecco l'aspetto del controllo TimePicker ottenuto con il file ui-dark.css: Tema scuro di TimePicker

Ecco l'aspetto del controllo TimePicker ottenuto con il file ui-light.css: Tema chiaro di TimePicker

2. Modificare l'ora predefinita

Puoi impostare un'ora predefinita nei modi seguenti:

In modo dichiarativo

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{current='11:00:00'}"></div>

In modo imperativo

// "time" is the ID of the <div> element
var timeDiv = document.getElementById("time"); 
var timePicker = new WinJS.UI.TimePicker(timeDiv, {current:'11:00:00'});

Puoi formattare la stringa dell'ora in tutti i modi consentiti dall'oggetto JavaScript Date, tranne per i valori UTC. Ecco alcuni esempi:

03:20 pm
15:20:00

3. Specificare gli incrementi dei minuti

Puoi modificare la modalità di visualizzazione dei minuti in un controllo dei minuti TimePicker impostando la proprietà minuteIncrement. Ad esempio, il codice seguente usa il controllo dei minuti per visualizzare multipli di 5 minuti.

<div data-win-control="WinJS.UI.TimePicker" data-win-options="{minuteIncrement:5}"></div>

4. Modificare la modalità di visualizzazione di minuti e ore

Puoi cambiare il formato per i minuti e le ore. Per impostazione predefinita, il controllo TimePicker visualizza l'ora e i minuti nei formati a 2 cifre e l'indicatore AM/PM in base alle impostazioni locali. Puoi cambiare questa impostazione nei modi seguenti.

Per cambiare la modalità di visualizzazione dei minuti

var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.minutePattern = "{minute.integer(1)}";

Per cambiare la modalità di visualizzazione delle ore


var timePicker = WinJS.UI.TimePicker(timeDiv);

//does not display leading zeros
timePicker.hourPattern = "{hour.integer(1)}";

Per specificare le ore nel formato a 12 ore o a 24 ore

var timePicker = WinJS.UI.TimePicker(timeDiv);

//displays a 24-hour clock
timePicker.clock = "24HourClock";

//displays a 12-hour clock, plus "AM" or "PM"
timePicker.clock = "12HourClock";

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

{minute.integer} | {minute.integer(n)}
{hour.integer} | {hour.integer(n)}

5. Disabilitare un controllo TimePicker

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

var timePicker = new WinJS.UI.TimePicker(timeDiv);
timePicker.disabled = true;

6. Rispondere all'evento di modifica

Puoi usare l'evento change per modificare il comportamento nella tua applicazione:

timePicker.onchange = hourChangeHandler; 

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

7. Modificare l'aspetto di un controllo TimePicker

In generale, per modificare l'aspetto del controllo TimePicker puoi usare gli stili CSS

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

e specificare un elenco a discesa TimePicker usando una delle classi CSS seguenti:

win-timepicker
win-timepicker-hour
win-timepicker-minute
win-timepicker-ampm

Ad esempio puoi cambiare il colore del bordo dell'elenco a discesa dell'ora:

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

L'elenco a discesa dell'ora verrà visualizzato con un bordo blu: Elenco a discesa dell'ora di TimePicker con bordo blu

Puoi cambiare il colore del bordo dell'elenco a discesa del periodo (AM/PM):

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

L'elenco a discesa del periodo verrà visualizzato con un bordo blu: Elenco a discesa del periodo di TimePicker con bordo blu

Puoi specificare tutti e tre i controlli TimePicker 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-timepicker"] { color:red; }

8. Mostrare e nascondere i controlli

Puoi specificare se un controllo specifico sia visualizzato o meno impostando il relativo attributo display su none:

.win-timepicker-minute { display:none; }

Se vuoi nascondere un controllo in una sola istanza di un controllo TimePicker, devi inserire un riferimento all'ID dell'elemento <div> associato. Se ad esempio vuoi nascondere i minuti solo per il controllo TimePicker visualizzato nell'elemento <div> con un ID "time", ecco come fare:

#time *.win-timepicker-minute { display: none; }

9. Visualizzare i controlli TimePicker verticalmente

Se vuoi che i controlli per ore, minuti e AM/PM siano visualizzati verticalmente invece che orizzontalmente, devi impostare l'attributo CSS display sui controlli. Devi inoltre impostare display per il blocco sull'elemento DIV stesso.


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

Puoi visualizzare i controlli 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) {
#time {display:block;}
*[class^="win-timepicker"] { display: block; }
}

10. Uso delle pseudoclassi per definire lo stile di TimePicker

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

win-timepicker:hover. L'utente posiziona il cursore sul controllo di selezione ma non lo attiva facendo clic. Elenco a discesa dell'ora al passaggio del mouse.
win-timepicker: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.
win-timepicker:focus. Il controllo di selezione è evidenziato per indicare che accetta input da tastiera.
win-timepicker:disabled. Il controllo di selezione non accetta interazioni utente. Per questa pseudoclasse è necessario impostare su true la proprietà disabled del controllo di selezione.