Bagaimana javascript mendeteksi zona waktu?

Di dunia pertama yang luas, virtual, dan jarak jauh ini, tempat kita bekerja, bersosialisasi, dan menjalani hidup kita di berbagai zona waktu, sering kali membantu jika tanggal dan waktu diformat dan diadaptasi menurut lokal dan zona waktu yang berbeda. Menghadiri konferensi virtual di AS tetapi Anda berada di Inggris?

Sayangnya, mengadaptasi tanggal dan waktu menurut zona waktu terbukti sangat rumit. Di atas perhitungan offset zona waktu dari UTC (Coordinated Universal Time) — yang dapat bervariasi meskipun lokasi berada pada garis bujur yang sama (. ) — zona waktu juga berubah di berbagai titik sepanjang tahun karena waktu musim panas. Dan waktu tahun di mana zona waktu bergeser juga bervariasi tergantung lokasi. Dan ini juga dapat berubah 😅. Untungnya, JavaScript memberi kita pustaka alat kecil yang bagus untuk bekerja dengan tanggal dan waktu

Cara mengadaptasi dan melokalkan waktu di browser dengan JavaScript

Untuk menyesuaikan tanggal berdasarkan zona waktu dalam JavaScript, Anda dapat menggunakan objek Tanggal dan metode toLocaleString()

// create a new Date object with the current date and time
var date = new Date();

// use the toLocaleString() method to display the date in different timezones
const easternTime = date.toLocaleString("en-US", {timeZone: "America/New_York"}));
const londonTime = date.toLocaleString("en-GB", {timeZone: "Europe/London"}));

Anda juga dapat menggunakan metode Intl.DateTimeFormat() untuk melokalkan tanggal dan waktu dan memformatnya dengan cara tertentu, seperti menggunakan format 24 jam atau menampilkan singkatan zona waktu

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

Masalah dengan mengadaptasi dan melokalkan waktu di browser

Meskipun menggunakan JavaScript di browser adalah solusi yang baik, ada — seperti biasa. - beberapa kekurangan. Terutama, pengguna mungkin melihat sekilas konten yang tidak dipersonalisasi (FLUNP™️ — kirimkan semua kredit untuk akronim lucu ini ke Phil Hawksworth) sebelum JavaScript dimulai, atau mereka mungkin tidak melihat tanggal yang dilokalkan sama sekali jika JavaScript gagal memuat

Solusi tradisional untuk masalah ini adalah dengan melakukan logika kondisional apa pun pada server dan mengirimkan tanggal dan waktu yang disesuaikan dan diformat ke klien pada waktu permintaan. Namun, jika Anda membuat situs yang sebagian besar statis, Anda mungkin tidak ingin memperkenalkan server hanya untuk tujuan menghindari potensi kelemahan sisi klien.

Tapi aku punya berita bagus untukmu. Data zona waktu kini tersedia di Netlify Edge Functions, menghilangkan kebutuhan untuk menggunakan JavaScript sisi klien agar berhasil melokalkan tanggal dan waktu atau memperkenalkan server yang lengkap. Dan terlebih lagi, Anda dapat menggunakan semua API Tanggal asli JavaScript yang sudah Anda kenal di dalam kode fungsi tepi

Jika Anda belum terbiasa dengan Netlify Edge Functions, lanjutkan ke tutorial sebelumnya yang menunjukkan cara menambahkan personalisasi ke proyek HTML statis menggunakan fungsi edge dari awal. Ada juga proyek template praktis yang dapat Anda terapkan ke Netlify dengan mengklik tombol

Sisa dari posting ini menganggap Anda sudah familiar dengan Netlify Edge Functions dan Anda menggunakan CLI Netlify untuk mengembangkan dan menguji kode Anda secara lokal. Mari kita lakukan 😎

Dapatkan data zona waktu dari permintaan HTTP

Dalam proyek baru atau yang sudah ada, buat file fungsi edge baru dan konfigurasikan di netlify Anda. file toml. Dalam contoh ini, saya ingin kode fungsi edge dijalankan pada index.html

// netlify/edge-functions/localize-time.js

export default async (request, context) => {
 
};

# netlify.toml

[[edge_functions]]
  path = "/"
  function = "localize-time"

Sama seperti di browser, kami akan menggunakan metode Tanggal JavaScript toLocaleString() untuk mengadaptasi tanggal dan waktu. Kami membutuhkan dua bit informasi untuk ini. lokal dan zona waktu. Tetapkan

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

  // netlify/edge-functions/localize-time.js
 
  export default async (request, context) => {
+   const locale = request.headers["accept-language"] || "en-GB";
+   const { timezone } = context.geo;
  };

Siapkan HTML yang akan dimodifikasi

Di HTML tempat Anda menampilkan tanggal dan/atau waktu saat ini, tambahkan atribut data —

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

// create a new Date object with the current date and time
var date = new Date();

// create a DateTimeFormat object with specific options
var dateFormat = new Intl.DateTimeFormat("en-US", {
	timeZone: "America/New_York",
	timeZoneName: "short"
});

// use the format() method to display the date and time in the specified format
// (e.g. "12/8/2020, EST")
const formatted = dateFormat.format(date);

<!-- index.html -->

<span data-time="2022-12-09T12:00:00Z">2022-12-09T12:00:00Z</span>

Format dan lokalkan tanggal dengan JavaScript di Deno

Impor HTMLRewriter di bagian atas fungsi tepi Anda, dan tambahkan kode berikut untuk mengubah dan mengembalikan HTML. Sesuaikan hasil tanggal/waktu dengan preferensi Anda menggunakan

  // netlify/edge-functions/localize-time.js

+ import { HTMLRewriter } from "https://ghuc.cc/worker-tools/html-rewriter/index.ts";
 
  export default async (request, context) => {
    const locale = request.headers["accept-language"] || "en-GB";
    const { timezone } = context.geo;
 
+   // capture the HTTP response so we can modify it
+   const response = await context.next();
+
+   return new HTMLRewriter()
+     .on("[data-time]", {
+       element(element) {
+         // get the date value as a string from the HTML data attribute
+         const dateString = element.getAttribute("data-time");
+
+         // convert the string to a JavaScript date
+         const date = new Date(dateString);
+
+         // use toLocaleString() with the locale from the request
+         // and the timezone from context.geo
+         const localizedTime = date.toLocaleString(locale, {
+           timeZone: timezone,
+           hour: "numeric",
+           minute: "numeric",
+           day: "numeric",
+           weekday: "short",
+           month: "short",
+         });
+
+         // modify the HTML element
+         element.setInnerContent(`${localizedTime}`);
+       },
+     })
+     // transform the original response!
+     .transform(response);
  };

Bagaimana saya mempersonalisasi zona waktu di situs web saya dengan Fungsi Edge

Saya menggunakan kode dalam postingan ini di beranda situs web pribadi saya, tempat saya melokalkan waktu streaming Twitch saya berikutnya sehingga pemirsa tahu kapan harus menonton

Pelajari lebih lanjut tentang personalisasi situs web menggunakan Edge Functions

Jelajahi lebih banyak ide dan kasus penggunaan personalisasi untuk Netlify Edge Functions di blog dan jelajahi pustaka contoh untuk mendapatkan inspirasi di situs Contoh Fungsi Edge kami. Selamat mengkode. 👩🏻‍💻

Bagaimana cara mendapatkan zona waktu UTC dalam JavaScript?

Bagaimana cara mendapatkan stempel waktu dengan zona waktu di JavaScript?

Bagaimana cara mendapatkan zona waktu objek tanggal di JavaScript?

Bagaimana cara mendapatkan waktu GMT di JavaScript?