Sapevi che ogni volta che regoli l’orologio in avanti o indietro per l’ora legale (supponendo che la tua regione lo segua), stai eseguendo una conversione del fuso orario? Nel mio caso, sto convertendo tra Eastern Standard Time (EST) e Eastern Daylight Time (EDT). In effetti, è proprio di questo che si tratta la conversione del fuso orario: regolare l’orologio o gli orologi in base a un fuso orario diverso. È lo stesso processo che segui quando viaggi tra i fusi orari. Devi chiederti: “che ore sono adesso dove sto andando?”

Usando Luxon, ci sono davvero due modi per farlo: puoi impostare la data e l’ora sul nuovo fuso orario oppure puoi determinare la differenza tra i due fusi orari e regolarti di conseguenza. Mentre la seconda opzione può sembrare l’opzione più difficile, in JavaScript, in realtà non lo è. Lo dimostrerò prendendo la demo su cui abbiamo lavorato nel Analisi di date e orari utilizzando Luxon tutorial e modificarlo per passare dal fuso orario locale dell’utente a quello degli eventi elencati, che si svolgono a Londra, Inghilterra.

Impostazione dell’ora su un oggetto DateTime Luxon

Prima di cambiare fuso orario, aiuta se hai tempo per cambiare! A tal fine, ho aggiunto le date di fine a ciascun evento in modo che possiamo vedere sia le date di inizio che di fine nel nostro fuso orario locale. Puoi vedere un esempio nell’immagine qui sotto, insieme al pulsante che alterna tra il fuso orario locale e quello di Londra:

L’impostazione dell’ora avviene in due passaggi:

1. Innanzitutto, l’ora viene analizzata utilizzando la stringa di formato dell’ora “h:mm a”.
2. Quindi, i tempi vengono combinati con le date di inizio e fine tramite il versatile setter di Luxon.

Ecco uno snippet di codice che mostra come vengono impostate le date e le ore di inizio e fine:

var dayFormat    = "ccc, dd",
    inputFormat  = dayFormat + " LLL yyyy",
    timeFormat   = "h:mm a",
    $eventDates  = $('.eventDates'),
    startDates   = new Array($eventDates.length), 
    endDates     = new Array($eventDates.length),
    luxon        = luxon.DateTime,
    LONDON_TIMEZONE = 'Europe/London';

$eventDates.each(function(index) {
  var $this      = $(this),
      eventTimes = $this.siblings('span').text().split(' - '),
             // remove extra newlines and spaces in source
      eventDates = $this.text().replace(/ns+/,' ').split(' - '),
      startTime  = luxon.fromString(
                     eventTimes[0].trim(), timeFormat, {zone: LONDON_TIMEZONE}
                   ),
      startDate;

  // check if date range
  if (eventDates.length === 1) {
    startDate = eventDates[0];
  } else if (eventDates.length === 2) {
    startDate   = eventDates[1].replace(/[a-zA-Z]{3}, d{2}/, eventDates[0]);
    var endTime = luxon.fromString(
                    eventTimes[1].trim(), timeFormat, {zone: LONDON_TIMEZONE}
                  );
    
    endDates[index] = 
      luxon.fromFormat(eventDates[1], inputFormat, {zone: LONDON_TIMEZONE})
        .set({hour: endTime.hour, minute: endTime.minute});
  }
  startDates[index] = 
      luxon.fromFormat(startDate, inputFormat, {zone: LONDON_TIMEZONE})
        .set({hour: startTime.hour, minute: startTime.minute});
});

Osservando il codice sopra, noterai che stiamo utilizzando il fuso orario “Europa/Londra”. Ho scelto specificamente eventi nell’area di Londra, pensando che sarebbero stati in UTC. Mi sbagliavo perché, come la mia provincia natale in Ontario, Canada, Londra osserva l’ora legale. Quindi, mentre è identico all’UTC in inverno, Londra ha un offset GMT di +1 durante l’estate.

Localizzare una data Luxon

Dopo aver creato le nostre date con il fuso orario corretto “Europa/Londra”, ora possiamo cambiare i fusi orari con quello locale. Nel gestore dei clic del pulsante, possiamo quindi controllare il fuso orario corrente di ciascuna data di inizio:

$('#btnTimezone').click(function() {
  if (startDates[0].zoneName === LONDON_TIMEZONE) {
    $(this).text("View Dates in Your Time Zone ('" + startDates[0].zoneName + "')");
    //convert event dates to local time zone...
  } else {
    $(this).text("View Dates in Original Time Zone ('" + startDates[0].zoneName + "')");
    //convert event dates to London time zone...
  }
});

Visualizzazione di date e ore nel fuso orario specificato

Anche l’aggiornamento delle date e degli orari dell’evento sulla pagina Web consiste in due passaggi. Sono:

1. Converti le date da e verso i fusi orari locali e di Londra.
2. Visualizzali nello stesso formato in cui sono stati originariamente analizzati.

Il primo passo è sorprendentemente facile; date e orari locali possono essere acquistati tramite Luxon’s aLocale() metodo, mentre setZone() può essere utilizzato per convertire a Appuntamento opporsi a qualsiasi fuso orario passando la stringa del fuso orario (‘Europe/London’ nel nostro caso).

Per quanto riguarda il secondo passaggio, non è molto più difficile perché la stessa stringa di formato che abbiamo usato per analizzare le date e gli orari può essere riutilizzata da da formattare().

In effetti, il codice di conversione è così simile nel complesso che l’ho inserito nella sua funzione chiamata toggleTimezone(). Accetta due argomenti: uno obbligatorio, l’altro facoltativo. Il primo argomento è la funzione di conversione, aka aLocale() o setZone(). La seconda è la stringa del fuso orario, richiesta solo per la conversione all’ora di Londra. Ecco il completo toggleTimezone() codice:

function toggleTimezone(conversionFunction, timezone) {
  // wrap the timezone in an array
  timezone = Array.prototype.slice.call(arguments, 1);
  $eventDates.each(function(index) {
    var $eventDays = $(this),
        startDate  = conversionFunction.apply(startDates[index], timezone),
        $startEndTimes = $eventDays.siblings('span'),
        dateText="",
        timeText = startDate.toFormat(timeFormat);

    //update the start date
    startDates[index] = startDate;

    if(endDates[index]) 
      var endDate = conversionFunction.apply(endDates[index], timezone);
      dateText  = startDate.toFormat(dayFormat)
        + " - " 
        + endDate.toFormat(inputFormat);
      timeText += " - " + endDate.toFormat(timeFormat);
      //update the end date
      endDates[index] = endDate;
    } else {
      dateText = startDate.toFormat(inputFormat);
    }
    $eventDays.text(dateText);
    $startEndTimes.text(timeText);
  });
}

La funzione JavaScript applicare() viene impiegato per richiamare la funzione di conversione Luxon fornita. Il fuso orario l’argomento è racchiuso in un array usando Array fetta() da applicare() richiede che i suoi argomenti vengano passati come un array.

Conclusione

In questo tutorial, abbiamo migliorato la demo su cui abbiamo lavorato nel Analisi di date e orari con Luxon tutorial modificandolo per passare dal fuso orario locale dell’utente a quello degli eventi elencati, che si svolgono a Londra, Inghilterra.

Puoi vedere la penna Dimostrazione del fuso orario di Luxon di Rob Gravelle (@blackjacques) su CodePen.