ส่วนหลัง

คำแนะนำขั้นสุดท้ายสำหรับการจัดการวันที่และเวลา

ในฐานะนักพัฒนาซอฟต์แวร์คุณไม่สามารถหลีกหนีจากการปรับแต่งวันที่ได้ เกือบทุกแอปที่นักพัฒนาสร้างขึ้นจะมีองค์ประกอบบางอย่างที่ผู้ใช้ต้องได้รับวันที่ / เวลาเก็บไว้ในฐานข้อมูลและแสดงกลับไปยังผู้ใช้

ถามโปรแกรมเมอร์เกี่ยวกับประสบการณ์ในการจัดการวันที่และเขตเวลาและพวกเขาอาจจะแบ่งปันเรื่องราวสงคราม การจัดการฟิลด์วันที่และเวลาไม่ใช่วิทยาศาสตร์จรวด แต่มักจะน่าเบื่อและเกิดข้อผิดพลาดได้ง่าย

มีบทความหลายร้อยบทความในหัวข้อนี้อย่างไรก็ตามส่วนใหญ่เป็นเรื่องวิชาการเกินไปโดยเน้นที่รายละเอียดที่เป็นสาระสำคัญหรือไม่สม่ำเสมอเกินไปโดยให้ข้อมูลโค้ดสั้น ๆ โดยไม่มีคำอธิบายมากนัก คู่มือเชิงลึกเกี่ยวกับการจัดการ DateTime นี้จะช่วยให้คุณเข้าใจแนวคิดการเขียนโปรแกรมและแนวทางปฏิบัติที่ดีที่สุดที่เกี่ยวข้องกับเวลาและวันที่โดยไม่ต้องเรียกดูข้อมูลในหัวข้อนี้



ในบทความนี้ฉันจะช่วยให้คุณคิดอย่างชัดเจนเกี่ยวกับฟิลด์วันที่และเวลาและแนะนำแนวทางปฏิบัติที่ดีที่สุดที่จะช่วยให้คุณหลีกเลี่ยงวันที่ / เวลาได้ ที่นี่เราจะสำรวจแนวคิดหลักบางประการที่จำเป็นสำหรับการจัดการค่าวันที่และเวลาอย่างถูกต้องรูปแบบที่สะดวกในการจัดเก็บค่า DateTime และถ่ายโอนผ่าน API และอื่น ๆ

สำหรับผู้เริ่มต้นคำตอบที่ถูกต้องสำหรับโค้ดการผลิตคือการใช้ไลบรารีที่เหมาะสมแทนที่จะใช้ไลบรารีของคุณเอง ปัญหาที่อาจเกิดขึ้นกับการคำนวณ DateTime ที่กล่าวถึงในบทความนี้เป็นเพียงส่วนเล็ก ๆ ของภูเขาน้ำแข็ง แต่ก็ยังมีประโยชน์ที่ควรทราบโดยมีหรือไม่มีห้องสมุด

DateTime Libraries ช่วยได้ถ้าคุณเข้าใจอย่างถูกต้อง

ไลบรารีวันที่ช่วยได้หลายวิธีในการทำให้ชีวิตของคุณง่ายขึ้น ช่วยลดความซับซ้อนของการแยกวิเคราะห์วันที่การคำนวณวันที่และตรรกะและการจัดรูปแบบวันที่ คุณสามารถค้นหาไลบรารีวันที่ที่เชื่อถือได้สำหรับทั้งส่วนหน้าและส่วนหลังเพื่อทำภาระหนักส่วนใหญ่ให้กับคุณ

อย่างไรก็ตามเรามักใช้ไลบรารีวันที่โดยไม่คิดว่าวันที่ / เวลาทำงานอย่างไร วันที่ / เวลาเป็นแนวคิดที่ซับซ้อน จุดบกพร่องที่เกิดขึ้นเนื่องจากความเข้าใจที่ไม่ถูกต้องอาจเป็นเรื่องยากมากที่จะเข้าใจและแก้ไขแม้จะใช้ไลบรารีวันที่ก็ตาม ในฐานะโปรแกรมเมอร์คุณต้องเข้าใจพื้นฐานและสามารถเข้าใจปัญหาที่ห้องสมุดแก้ไขเพื่อใช้ประโยชน์สูงสุดจากปัญหาเหล่านี้

นอกจากนี้ไลบรารีวันที่ / เวลาสามารถพาคุณไปได้ไกล ไลบรารีวันที่ทั้งหมดทำงานโดยให้คุณเข้าถึงโครงสร้างข้อมูลที่สะดวกเพื่อแสดงวันที่และเวลา หากคุณกำลังส่งและรับข้อมูลผ่าน REST API ในที่สุดคุณจะต้องแปลงวันที่เป็นสตริงและในทางกลับกันเนื่องจาก JSON ไม่มีโครงสร้างข้อมูลเนทีฟที่จะแสดงถึง DateTime แนวคิดที่ฉันได้อธิบายไว้ที่นี่จะช่วยให้คุณหลีกเลี่ยงปัญหาทั่วไปบางอย่างที่อาจเกิดขึ้นเมื่อทำการแปลงวันที่เป็นสตริงและสตริงจนถึงปัจจุบัน

บันทึก: ถึงแม้ว่าจะได้ใช้ JavaScript ในฐานะที่เป็นภาษาโปรแกรมที่กล่าวถึงในบทความนี้เป็นแนวคิดทั่วไปที่นำไปใช้ในระดับใหญ่กับภาษาโปรแกรมแทบทั้งหมดและไลบรารีวันที่ ดังนั้นแม้ว่าคุณจะไม่เคยเขียน JavaScript มาก่อน แต่อย่าลังเลที่จะอ่านต่อเนื่องจากฉันแทบจะไม่ถือว่ามีความรู้เกี่ยวกับ JavaScript มาก่อนในบทความ

การกำหนดเวลาให้เป็นมาตรฐาน

DateTime เป็นช่วงเวลาที่เฉพาะเจาะจงมาก ลองนึกถึงสิ่งนี้ ขณะเขียนบทความนี้นาฬิกาบนแล็ปท็อปจะแสดงวันที่ 21 กรกฎาคม 13:29 น. นี่คือสิ่งที่เราเรียกว่า“ เวลาท้องถิ่น” เวลาที่ฉันเห็นบนนาฬิกาแขวนรอบตัวฉันและนาฬิกาข้อมือ

ให้เวลาหรือใช้เวลาสักครู่ถ้าฉันขอให้เพื่อนไปพบฉันที่ร้านกาแฟใกล้ ๆ เวลา 15:00 น. ฉันคาดว่าจะได้พบเธอที่นั่นในเวลาประมาณนั้น ในทำนองเดียวกันจะไม่มีความสับสนใด ๆ หากฉันพูดแทนเช่น“ พบกันในอีก 1 ชั่วโมงครึ่ง” เรามักพูดถึงเวลาด้วยวิธีนี้กับผู้คนที่อาศัยอยู่ในเมืองหรือเขตเวลาเดียวกัน

ลองนึกถึงสถานการณ์อื่น: ฉันอยากบอกเพื่อนที่อาศัยอยู่ในอุปซอลาประเทศสวีเดนว่าฉันอยากคุยกับเขาตอน 17.00 น. ฉันส่งข้อความถึงเขาว่า“ เฮ้แอนตันมาคุยกันตอน 17.00 น.” ฉันได้รับคำตอบทันทีว่า“ เวลาของคุณหรือเวลาของฉัน”

Anton บอกฉันว่าเขาอาศัยอยู่ในเขตเวลายุโรปกลางซึ่งก็คือ UTC + 01: 00 ฉันอาศัยอยู่ใน UTC + 05: 45 ซึ่งหมายความว่าเมื่อถึงเวลา 17.00 น. ที่ที่ฉันอาศัยอยู่คือ 17:00 น. - 05:45 น. = 11:15 น. UTC ซึ่งแปลเป็น 11:15 น. UTC + 01:00 = 12:15 น. ในอุปซอลาเหมาะสำหรับทั้งคู่ ของเรา.

นอกจากนี้โปรดทราบถึงความแตกต่างระหว่างเขตเวลา (เวลายุโรปกลาง) และการชดเชยเขตเวลา (UTC + 05: 45) ประเทศต่างๆสามารถตัดสินใจเปลี่ยนการชดเชยเขตเวลาของตนสำหรับเวลาออมแสงด้วยเหตุผลทางการเมืองได้เช่นกัน เกือบทุกปีจะมีการเปลี่ยนแปลงกฎในอย่างน้อยหนึ่งประเทศซึ่งหมายความว่าโค้ดใด ๆ ที่มีกฎเหล่านี้จะต้องได้รับการอัปเดตอยู่เสมอคุณควรพิจารณาว่าโค้ดเบสของคุณขึ้นอยู่กับสิ่งใดสำหรับสิ่งนี้สำหรับแอปแต่ละระดับ

วิธีทำพอร์ตโฟลิโอการออกแบบ

นั่นเป็นอีกเหตุผลที่ดีที่เราจะแนะนำให้เฉพาะส่วนหน้าเท่านั้นที่เกี่ยวข้องกับเขตเวลาในกรณีส่วนใหญ่ เมื่อไม่เป็นเช่นนั้นจะเกิดอะไรขึ้นเมื่อกฎที่เครื่องมือฐานข้อมูลของคุณใช้ไม่ตรงกับกฎส่วนหน้าหรือส่วนหลังของคุณ

ปัญหาในการจัดการเวลาสองเวอร์ชันที่แตกต่างกันซึ่งสัมพันธ์กับผู้ใช้และสัมพันธ์กับมาตรฐานที่ยอมรับในระดับสากลเป็นเรื่องยากยิ่งในโลกของการเขียนโปรแกรมที่ความแม่นยำเป็นสิ่งสำคัญและแม้แต่วินาทีเดียวก็สามารถสร้างความแตกต่างได้มาก ขั้นตอนแรกในการแก้ไขปัญหาเหล่านี้คือการจัดเก็บ DateTime ใน UTC

การกำหนดรูปแบบมาตรฐาน

การกำหนดเวลาให้เป็นมาตรฐานนั้นยอดเยี่ยมเพราะฉันต้องการแค่เก็บเวลา UTC และตราบใดที่ฉันรู้เขตเวลาของผู้ใช้ฉันก็สามารถแปลงเป็นเวลาได้ตลอดเวลา ในทางกลับกันถ้าฉันรู้เวลาท้องถิ่นของผู้ใช้และรู้เขตเวลาของพวกเขาฉันสามารถแปลงเป็น UTC ได้

แต่วันที่และเวลาสามารถระบุได้หลายรูปแบบ สำหรับวันที่คุณสามารถเขียนว่า“ 30 ก.ค. ” หรือ“ 30 ก.ค. ” หรือ“ 30 ก.ค. ” (หรือ 30/7 ขึ้นอยู่กับว่าคุณอาศัยอยู่ที่ไหน) ในตอนนี้คุณสามารถเขียนว่า“ 21.30 น.” หรือ“ 2130”

นักวิทยาศาสตร์ทั่วโลกมารวมตัวกันเพื่อจัดการกับปัญหานี้และตัดสินใจเลือกรูปแบบที่จะอธิบายเวลาที่โปรแกรมเมอร์ชอบเพราะมันสั้นและแม่นยำ เราชอบเรียกมันว่า“ รูปแบบวันที่ ISO” ซึ่งเป็นรูปแบบขยาย ISO-8601 แบบเรียบง่ายและมีลักษณะดังนี้:

ภาพที่แสดงรูปแบบขยาย ISO-8601 เวอร์ชันที่เรียบง่ายซึ่งเรียกว่ารูปแบบวันที่ ISO

สำหรับ 00:00 หรือ UTC เราใช้ 'Z' แทนซึ่งหมายถึงเวลาซูลูซึ่งเป็นชื่ออื่นสำหรับ UTC

การจัดการวันที่และเลขคณิตใน JavaScript

ก่อนที่เราจะเริ่มต้นด้วยแนวทางปฏิบัติที่ดีที่สุดเราจะเรียนรู้เกี่ยวกับการปรับแต่งวันที่โดยใช้ JavaScript เพื่อทำความเข้าใจเกี่ยวกับไวยากรณ์และแนวคิดทั่วไป แม้ว่าเราจะใช้ JavaScript แต่คุณสามารถปรับข้อมูลนี้ให้เป็นภาษาโปรแกรมโปรดของคุณได้อย่างง่ายดาย

เราจะใช้การคำนวณวันที่เพื่อแก้ปัญหาทั่วไปเกี่ยวกับวันที่ที่นักพัฒนาส่วนใหญ่เจอ

เป้าหมายของฉันคือทำให้คุณสะดวกในการสร้างวัตถุวันที่จากสตริงและแยกส่วนประกอบออกจากหนึ่ง นี่คือสิ่งที่ไลบรารีวันที่สามารถช่วยคุณได้ แต่ควรทำความเข้าใจว่าเบื้องหลังการทำงานนั้นเป็นอย่างไร

เมื่อเราทำวันที่ / เวลามือของเราสกปรกแล้วการคิดเกี่ยวกับปัญหาที่เราเผชิญดึงแนวทางปฏิบัติที่ดีที่สุดออกมาและดำเนินการต่อได้ง่ายขึ้น หากคุณต้องการข้ามไปยังแนวทางปฏิบัติที่ดีที่สุดอย่าลังเลที่จะทำ แต่อย่างน้อยขอแนะนำให้คุณอ่านส่วนวันที่ - เลขคณิตด้านล่าง

JavaScript Date Object

ภาษาโปรแกรมประกอบด้วยโครงสร้างที่เป็นประโยชน์เพื่อทำให้ชีวิตของเราง่ายขึ้น JavaScript Date วัตถุเป็นสิ่งหนึ่ง มีวิธีการที่สะดวกในการรับวันที่และเวลาปัจจุบันจัดเก็บวันที่ในตัวแปรคำนวณวันที่และจัดรูปแบบวันที่ตามสถานที่ของผู้ใช้

เนื่องจากความแตกต่างระหว่างการใช้งานเบราว์เซอร์และการจัดการเวลาออมแสง (DST) ที่ไม่ถูกต้องจึงไม่แนะนำให้ใช้วัตถุ Date สำหรับแอปพลิเคชันที่มีความสำคัญต่อภารกิจและคุณน่าจะใช้ไลบรารี DateTime เช่น Luxon, date-fns หรือ dayjs . (ไม่ว่าคุณจะใช้อะไรก็ตามให้หลีกเลี่ยง Moment.js ที่เคยเป็นที่นิยมซึ่งมักเรียกกันง่ายๆว่า moment ตามที่ปรากฏในโค้ดเนื่องจากตอนนี้เลิกใช้งานแล้ว)

แต่เพื่อจุดประสงค์ทางการศึกษาเราจะใช้วิธีการที่อ็อบเจ็กต์ Date () ให้ไว้เพื่อเรียนรู้ว่า JavaScript จัดการ DateTime อย่างไร

รับวันที่ปัจจุบัน

const currentDate = new Date();

หากคุณไม่ได้ส่งผ่านอะไรไปยังตัวสร้างวันที่วัตถุวันที่ที่ส่งคืนจะมีวันที่และเวลาปัจจุบัน

จากนั้นคุณสามารถจัดรูปแบบเพื่อแยกเฉพาะส่วนวันที่ได้ดังนี้:

const currentDate = new Date(); const currentDayOfMonth = currentDate.getDate(); const currentMonth = currentDate.getMonth(); // Be careful! January is 0, not 1 const currentYear = currentDate.getFullYear(); const dateString = currentDayOfMonth + '-' + (currentMonth + 1) + '-' + currentYear; // '27-11-2020'

หมายเหตุ: หลุมพราง“ มกราคมเท่ากับ 0” เป็นเรื่องปกติ แต่ไม่เป็นสากล ควรตรวจสอบเอกสารของภาษาใด ๆ อีกครั้ง (หรือรูปแบบการกำหนดค่า: เช่น cron โดยเฉพาะ 1-based) ก่อนที่จะเริ่มใช้งาน

รับการประทับเวลาปัจจุบัน

หากคุณต้องการรับการประทับเวลาปัจจุบันแทนคุณสามารถสร้างวัตถุ Date ใหม่และใช้เมธอด getTime ()

const currentDate = new Date(); const timestamp = currentDate.getTime();

ใน JavaScript การประทับเวลาคือจำนวนมิลลิวินาทีที่ล่วงเลยไปตั้งแต่วันที่ 1 มกราคม 1970

หากคุณไม่ได้ตั้งใจที่จะสนับสนุน

การแยกวิเคราะห์วันที่

การแปลงสตริงเป็นอ็อบเจ็กต์วันที่ของ JavaScript ทำได้หลายวิธี

ตัวสร้างวัตถุ Date ยอมรับรูปแบบวันที่ที่หลากหลาย:

Date.now()

โปรดทราบว่าคุณไม่จำเป็นต้องใส่วันในสัปดาห์เนื่องจาก JS สามารถกำหนดวันในสัปดาห์สำหรับวันที่ใดก็ได้

คุณยังสามารถส่งผ่านปีเดือนวันชั่วโมงนาทีและวินาทีเป็นอาร์กิวเมนต์แยกกันได้:

const date1 = new Date('Wed, 27 July 2016 13:30:00'); const date2 = new Date('Wed, 27 July 2016 07:45:00 UTC'); const date3 = new Date('27 July 2016 13:30:00 UTC+05:45');

แน่นอนคุณสามารถใช้รูปแบบวันที่ ISO ได้ตลอดเวลา:

const date = new Date(2016, 6, 27, 13, 30, 0);

อย่างไรก็ตามคุณอาจประสบปัญหาได้เมื่อคุณไม่ได้ระบุเขตเวลาไว้อย่างชัดเจน!

const date = new Date('2016-07-27T07:45:00Z');

อย่างใดอย่างหนึ่งจะให้คุณในวันที่ 25 กรกฎาคม 2559 00:00:00 น. ตามเวลาท้องถิ่น

หากคุณใช้รูปแบบ ISO แม้ว่าคุณจะระบุเฉพาะวันที่ไม่ใช่เวลาและเขตเวลาก็จะยอมรับเขตเวลาเป็น UTC โดยอัตโนมัติ

ซึ่งหมายความว่า:

const date1 = new Date('25 July 2016'); const date2 = new Date('July 25, 2016');

การจัดรูปแบบวันที่

โชคดีที่ JavaScript สมัยใหม่มีฟังก์ชันสากลที่สะดวกสบายในตัว new Date('25 July 2016').getTime() !== new Date('2016-07-25').getTime() new Date('2016-07-25').getTime() === new Date('2016-07-25T00:00:00Z').getTime() เนมสเปซที่ทำให้การจัดรูปแบบวันที่เป็นการดำเนินการที่ตรงไปตรงมา

สำหรับสิ่งนี้เราจำเป็นต้องมีสองวัตถุ: a Intl และ Date เริ่มต้นด้วยการตั้งค่าเอาต์พุตของเรา สมมติว่าเราต้องการใช้รูปแบบอเมริกัน (M / D / YYYY) จะมีลักษณะดังนี้:

Intl.DateTimeFormat

หากเราต้องการรูปแบบภาษาดัตช์ (D / M / YYYY) แทนเราจะส่งรหัสวัฒนธรรมอื่นไปยัง const firstValentineOfTheDecade = new Date(2020, 1, 14); // 1 for February const enUSFormatter = new Intl.DateTimeFormat('en-US'); console.log(enUSFormatter.format(firstValentineOfTheDecade)); // 2/14/2020 ตัวสร้าง:

DateTimeFormat

หรือรูปแบบอเมริกันที่ยาวขึ้นโดยมีชื่อเดือนสะกดดังนี้

const nlBEFormatter = new Intl.DateTimeFormat('nl-BE'); console.log(nlBEFormatter.format(firstValentineOfTheDecade)); // 14/2/2020

ตอนนี้ถ้าเราต้องการรูปแบบลำดับที่เหมาะสมในวันของเดือนนั่นคือ“ 14” แทนที่จะเป็น“ 14” น่าเสียดายที่ต้องใช้วิธีแก้ปัญหาเล็กน้อยเนื่องจาก const longEnUSFormatter = new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric', }); console.log(longEnUSFormatter.format(firstValentineOfTheDecade)); // February 14, 2020 เป็นเพียงค่าที่ถูกต้องเป็น ของการเขียนนี้คือ day หรือ 'numeric'. การยืม เวอร์ชันของ Flavio Copes ของ รหัสของ Mathias Bynens เพื่อใช้ประโยชน์จากส่วนอื่นของ '2-digit' สำหรับสิ่งนี้เราสามารถปรับแต่งวันของเดือนที่ส่งออกผ่าน Intl:

formatToParts()

น่าเสียดาย const pluralRules = new Intl.PluralRules('en-US', { type: 'ordinal' }) const suffixes = { 'one': 'st', 'two': 'nd', 'few': 'rd', 'other': 'th' } const convertToOrdinal = (number) => `${number}${suffixes[pluralRules.select(number)]}` // At this point: // convertToOrdinal('1') === '1st' // convertToOrdinal('2') === '2nd' // etc. const extractValueAndCustomizeDayOfMonth = (part) => { if (part.type === 'day') { return convertToOrdinal(part.value); } return part.value; }; console.log( longEnUSFormatter.formatToParts(firstValentineOfTheDecade) .map(extractValueAndCustomizeDayOfMonth) .join('') ); // February 14th, 2020 Internet Explorer (IE) ไม่ได้รับการสนับสนุนในขณะที่เขียนนี้ แต่เทคโนโลยีเดสก์ท็อปมือถือและแบ็คเอนด์อื่น ๆ (เช่น Node.js) มีการสนับสนุน . สำหรับผู้ที่ต้องการสนับสนุน IE และต้องการคำสั่งอย่างแน่นอนด้านล่าง (หรือดีกว่าคือไลบรารีวันที่ที่เหมาะสม) ให้คำตอบ

หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าเช่น IE ก่อนเวอร์ชัน 11 การจัดรูปแบบวันที่ใน JavaScript จะยากกว่าเนื่องจากไม่มีฟังก์ชันการจัดรูปแบบวันที่มาตรฐานเช่น formatToParts ใน Python หรือ PHP

ตัวอย่างเช่นใน PHP ฟังก์ชัน strftime ให้คุณ strftime('Today is %b %d %Y %X', mktime(5,10,0,12,30,99)).

คุณสามารถใช้ไฟล์ การรวมกันของตัวอักษรที่แตกต่างกัน นำหน้าด้วย Today is Dec 30 1999 05:10:00 เพื่อรับวันที่ในรูปแบบต่างๆ (ระวังไม่ใช่ทุกภาษาที่กำหนดความหมายเดียวกันให้กับแต่ละตัวอักษรโดยเฉพาะอย่างยิ่ง 'M' และ 'm' อาจมีการสลับเป็นนาทีและเดือน)

หากคุณแน่ใจในรูปแบบที่คุณต้องการใช้ขอแนะนำให้แยกแต่ละบิตโดยใช้ฟังก์ชัน JavaScript ที่เรากล่าวถึงข้างต้นและสร้างสตริงด้วยตัวเอง

%

เราสามารถรับวันที่ในรูปแบบ MM / DD / YYYY เป็น

var currentDate = new Date(); var date = currentDate.getDate(); var month = currentDate.getMonth(); var year = currentDate.getFullYear();

ปัญหาในการแก้ปัญหานี้คือสามารถให้ความยาวของวันที่ที่ไม่สอดคล้องกันได้เนื่องจากบางเดือนและวันของเดือนเป็นตัวเลขหลักเดียวและตัวเลขสองหลักอื่น ๆ ซึ่งอาจเป็นปัญหาได้เช่นหากคุณกำลังแสดงวันที่ในคอลัมน์ของตารางเนื่องจากวันที่ไม่อยู่ในแนวเดียวกัน

jwt ปฏิเสธการพิสูจน์ตัวตนผู้ใช้ล้มเหลว

เราสามารถจัดการสิ่งนี้ได้โดยใช้ฟังก์ชัน 'pad' ที่เพิ่ม 0 นำหน้า

var monthDateYear = (month+1) + '/' + date + '/' + year;

ตอนนี้เราได้รับวันที่ที่ถูกต้องในรูปแบบ MM / DD / YYYY โดยใช้:

function pad(n) { return n<10 ? '0'+n : n; }

หากเราต้องการ DD-MM-YYYY แทนกระบวนการจะคล้ายกัน:

var mmddyyyy = pad(month + 1) + '/' + pad(date) + '/' + year;

มาดูขั้นตอนและลองพิมพ์วันที่ในรูปแบบ“ Month Date, Year” เราจะต้องมีการแมปดัชนีเดือนกับชื่อ:

var ddmmyyyy = pad(date) + '-' + pad(month + 1) + '-' + year;

บางคนต้องการแสดงวันที่เป็น 1 มกราคม 2013 ไม่มีปัญหาสิ่งที่เราต้องการคือฟังก์ชันตัวช่วย var monthNames = [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ]; var dateWithFullMonthName = monthNames[month] + ' ' + pad(date) + ', ' + year; ที่คืนค่า 1 สำหรับ 1, 12 สำหรับ 12 และ 103 สำหรับ 103 เป็นต้นและส่วนที่เหลือนั้นง่ายมาก:

ordinal

เป็นเรื่องง่ายที่จะกำหนดวันในสัปดาห์จากวัตถุวันที่ดังนั้นเรามาเพิ่มสิ่งนั้นใน:

var ordinalDate = ordinal(date) + ' ' + monthNames[month] + ', ' + year;

ประเด็นที่ใหญ่กว่าก็คือเมื่อคุณดึงตัวเลขออกมาจากวันที่ได้แล้วการจัดรูปแบบส่วนใหญ่จะเกี่ยวข้องกับสตริง

การเปลี่ยนรูปแบบวันที่

เมื่อคุณรู้วิธีแยกวิเคราะห์วันที่และจัดรูปแบบแล้วการเปลี่ยนวันที่จากรูปแบบหนึ่งไปเป็นอีกรูปแบบเป็นเพียงการรวมทั้งสองอย่างเข้าด้วยกัน

ตัวอย่างเช่นหากคุณมีวันที่ในรูปแบบวันที่ 21 ก.ค. 2556 และต้องการเปลี่ยนรูปแบบเป็น 21-07-2556 ก็สามารถทำได้ดังนี้

var daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; ordinalDateWithDayOfWeek = daysOfWeek[currentDate.getDay()] + ', ' + ordinalDate;

การใช้ฟังก์ชัน Localization ของ JavaScript Date Object

วิธีการจัดรูปแบบวันที่ที่เรากล่าวถึงข้างต้นควรใช้งานได้ในแอปพลิเคชันส่วนใหญ่ แต่ถ้าคุณต้องการแปลการจัดรูปแบบวันที่จริงๆฉันขอแนะนำให้คุณใช้ const myDate = new Date('Jul 21, 2013'); const dayOfMonth = myDate.getDate(); const month = myDate.getMonth(); const year = myDate.getFullYear(); function pad(n) { return n<10 ? '0'+n : n } const ddmmyyyy = pad(dayOfMonth) + '-' + pad(month + 1) + '-' + year; // '21-07-2013' วัตถุ Date วิธี:

toLocaleDateString()

…ให้สิ่งที่ชอบ const today = new Date().toLocaleDateString('en-GB', { day: 'numeric', month: 'short', year: 'numeric', }); .

การเปลี่ยนภาษาเป็น 'en-US' จะให้ '26 ก.ค. 2016' แทน สังเกตว่าการจัดรูปแบบเปลี่ยนไปอย่างไร แต่ตัวเลือกการแสดงยังคงเหมือนเดิมซึ่งเป็นคุณลักษณะที่มีประโยชน์มาก ดังที่แสดงในส่วนก่อนหน้านี้ 26 Jul 2016 เทคนิคที่ใหม่กว่าจะทำงานคล้ายกันมากกับสิ่งนี้ แต่ให้คุณใช้วัตถุฟอร์แมตเตอร์ซ้ำเพื่อที่คุณจะต้องตั้งค่าตัวเลือกเพียงครั้งเดียว

ด้วย Intl.DateTimeFormat เป็นนิสัยที่ดีในการส่งผ่านตัวเลือกการจัดรูปแบบแม้ว่าผลลัพธ์จะดูดีในคอมพิวเตอร์ของคุณก็ตาม วิธีนี้สามารถป้องกันไม่ให้ UI แตกในภาษาที่ไม่คาดคิดด้วยชื่อเดือนที่ยาวมาก ๆ หรือดูอึดอัดเพราะชื่อสั้น

หากฉันต้องการเดือนทั้งเดือนเป็น“ กรกฎาคม” แทนสิ่งที่ฉันทำคือเปลี่ยนพารามิเตอร์เดือนในตัวเลือกเป็น“ ยาว” JavaScript จัดการทุกอย่างให้ฉัน สำหรับ en-US ตอนนี้ฉันได้รับ 26 กรกฎาคม 2016

หมายเหตุ: หากคุณต้องการให้เบราว์เซอร์ใช้ภาษาของผู้ใช้โดยอัตโนมัติคุณสามารถส่ง 'ไม่ได้กำหนด' เป็นพารามิเตอร์แรก

หากคุณต้องการแสดงวันที่ในรูปแบบตัวเลขและไม่ต้องการยุ่งยากกับ MM / DD / YYYY เทียบกับ DD / MM / YYYY สำหรับภาษาที่แตกต่างกันฉันขอแนะนำวิธีง่ายๆดังต่อไปนี้:

toLocaleDateString()

บนคอมพิวเตอร์ของฉันผลลัพธ์นี้ const today = new Date().toLocaleDateString(undefined, { day: 'numeric', month: 'numeric', year: 'numeric', }); หากคุณต้องการตรวจสอบให้แน่ใจว่าเดือนและวันที่นั้นมีตัวเลขสองหลักให้เปลี่ยนตัวเลือก:

7/26/2016

ผลลัพธ์นี้ const today = new Date().toLocaleDateString(undefined, { day: '2-digit', month: '2-digit', year: 'numeric', }); . สิ่งที่เราต้องการ!

คุณยังสามารถใช้ฟังก์ชันอื่น ๆ ที่เกี่ยวข้องเพื่อกำหนดวิธีการแสดงทั้งเวลาและวันที่:

รหัสเอาต์พุตคำอธิบาย
07/26/2016 '04:21:38 น.' แสดงเฉพาะเวลาที่แปลเป็นภาษาท้องถิ่น
now.toLocaleTimeString() '04: 21: 38 น. ' แสดงเวลาท้องถิ่นตามตัวเลือกที่มีให้
now.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', }); '22/7/2016, 04:21:38 น.' แสดงวันที่และเวลาสำหรับโลแคลของผู้ใช้
now.toLocaleString() '22/7/2016, 04:21 น.' แสดงวันที่และเวลาในท้องถิ่นตามตัวเลือกที่มีให้

การคำนวณวันที่และเวลาสัมพัทธ์

นี่คือตัวอย่างของการเพิ่ม 20 วันใน JavaScript Date (เช่นการหาวันที่ 20 วันหลังจากวันที่ทราบ):

now.toLocaleString(undefined, { day: 'numeric', month: 'numeric', year: 'numeric', hour: '2-digit', minute: '2-digit', });

ตอนนี้ออบเจ็กต์วันที่ดั้งเดิมแทนวันที่ 20 วันหลังจากวันที่ 20 กรกฎาคมและ const myDate = new Date('July 20, 2016 15:00:00'); const nextDayOfMonth = myDate.getDate() + 20; myDate.setDate(nextDayOfMonth); const newDate = myDate.toLocaleString(); มีสตริงที่แปลเป็นภาษาท้องถิ่นแทนวันที่นั้น บนเบราว์เซอร์ของฉัน newDate ประกอบด้วย“ 9/8/2016, 15:00:00 PM”

หากต้องการคำนวณการประทับเวลาสัมพัทธ์ที่มีความแตกต่างที่แม่นยำกว่าทั้งวันคุณสามารถใช้ newDate และ Date.getTime() ในการทำงานกับจำนวนเต็มแทนจำนวนมิลลิวินาทีตั้งแต่ยุคหนึ่งนั่นคือ 1 มกราคม 1970 ตัวอย่างเช่นหากคุณต้องการทราบว่าเมื่อใดที่ผ่านไป 17 ชั่วโมงในตอนนี้:

Date.setTime()

การเปรียบเทียบวันที่

เช่นเดียวกับสิ่งอื่น ๆ ที่เกี่ยวข้องกับวันที่การเปรียบเทียบวันที่มี gotcha ของตัวเอง

ขั้นแรกเราต้องสร้างวัตถุวันที่ โชคดี = ทำงานทั้งหมด ดังนั้นการเปรียบเทียบวันที่ 19 กรกฎาคม 2014 และ 18 กรกฎาคม 2014 จึงง่ายพอ ๆ กับ:

const msSinceEpoch = (new Date()).getTime(); const seventeenHoursLater = new Date(msSinceEpoch + 17 * 60 * 60 * 1000);

การตรวจสอบความเท่าเทียมกันนั้นยุ่งยากกว่าเนื่องจากวัตถุวันที่สองชิ้นที่แสดงวันที่เดียวกันยังคงเป็นวัตถุวันที่ที่ต่างกันสองชิ้นและจะไม่เท่ากัน การเปรียบเทียบสตริงวันที่เป็นความคิดที่ไม่ดีเพราะตัวอย่างเช่น“ 20 กรกฎาคม 2014” และ“ 20 กรกฎาคม 2014” แทนวันที่เดียวกัน แต่มีการแทนค่าสตริงต่างกัน ตัวอย่างด้านล่างแสดงจุดแรก:

const date1 = new Date('July 19, 2014'); const date2 = new Date('July 28, 2014'); if(date1 > date2) { console.log('First date is more recent'); } else { console.log('Second date is more recent'); }

สิ่งนี้จะส่งออก const date1 = new Date('June 10, 2003'); const date2 = new Date(date1); const equalOrNot = date1 == date2 ? 'equal' : 'not equal'; console.log(equalOrNot);

กรณีนี้สามารถแก้ไขได้โดยการเปรียบเทียบการเทียบเท่าจำนวนเต็มของวันที่ (การประทับเวลา) ดังต่อไปนี้:

not equal

ฉันเคยเห็นตัวอย่างนี้ในหลาย ๆ ที่ แต่ฉันไม่ชอบเพราะปกติแล้วคุณไม่ได้สร้างวัตถุวันที่จากวัตถุวันที่อื่น ดังนั้นฉันรู้สึกว่าตัวอย่างมีความสำคัญจากมุมมองทางวิชาการเท่านั้น นอกจากนี้สิ่งนี้กำหนดให้อ็อบเจ็กต์ Date ทั้งสองอ้างอิงถึงวินาทีเดียวกันในขณะที่คุณอาจต้องการทราบว่าวัตถุเหล่านี้อ้างถึงวันหรือชั่วโมงหรือนาทีเดียวกันเท่านั้น

มาดูตัวอย่างที่เป็นประโยชน์มากขึ้น คุณกำลังพยายามเปรียบเทียบว่าวันเกิดที่ผู้ใช้ป้อนนั้นตรงกับวันที่โชคดีที่คุณได้รับจาก API หรือไม่

date1.getTime() == date2.getTime()

ทั้งคู่แสดงวันที่เดียวกัน แต่น่าเสียดายที่ผู้ใช้ของคุณจะไม่ได้รับเงินล้านดอลลาร์

นี่คือปัญหา: JavaScript จะถือว่าเขตเวลาเป็นเขตเวลาที่เบราว์เซอร์กำหนดไว้เสมอเว้นแต่จะระบุไว้เป็นอย่างอื่นอย่างชัดเจน

วิธีทำโปรแกรมแมชชีนเลิร์นนิง

ซึ่งหมายความว่าสำหรับฉัน const userEnteredString = '12/20/1989'; // MM/DD/YYYY format const dateStringFromAPI = '1989-12-20T00:00:00Z'; const dateFromUserEnteredString = new Date(userEnteredString) const dateFromAPIString = new Date(dateStringFromAPI); if (dateFromUserEnteredString.getTime() == dateFromAPIString.getTime()) { transferOneMillionDollarsToUserAccount(); } else { doNothing(); } จะสร้างวันที่ 1989-12-20T00: 00: 00 + 5: 45 หรือ 1989-12-19T18: 15: 00Z ซึ่งไม่เหมือนกับการประทับเวลา 1989-12-20T00: 00: 00Z

ไม่สามารถเปลี่ยนแค่เขตเวลาของออบเจ็กต์วันที่ที่มีอยู่ได้ดังนั้นตอนนี้เป้าหมายของเราคือการสร้างออบเจ็กต์วันที่ใหม่ แต่ใช้ UTC แทนเขตเวลาท้องถิ่น

เราจะไม่สนใจเขตเวลาของผู้ใช้และใช้ UTC ในขณะที่สร้างออบเจ็กต์วันที่ มีสองวิธีในการดำเนินการ:

  1. สร้างสตริงวันที่ที่จัดรูปแบบ ISO จากวันที่ผู้ใช้ป้อนข้อมูลและใช้เพื่อสร้างวัตถุวันที่ ใช้รูปแบบวันที่ ISO ที่ถูกต้องเพื่อสร้างวัตถุวันที่ในขณะที่ทำให้เจตนาของ UTC เทียบกับท้องถิ่นชัดเจนมาก
new Date ('12/20/1989')

นอกจากนี้ยังใช้งานได้หากคุณไม่ระบุเวลาเนื่องจากค่าเริ่มต้นจะเป็นเที่ยงคืน (เช่น 00: 00: 00Z):

const userEnteredDate = '12/20/1989'; const parts = userEnteredDate.split('/'); const userEnteredDateISO = parts[2] + '-' + parts[0] + '-' + parts[1]; const userEnteredDateObj = new Date(userEnteredDateISO + 'T00:00:00Z'); const dateFromAPI = new Date('1989-12-20T00:00:00Z'); const result = userEnteredDateObj.getTime() == dateFromAPI.getTime(); // true

ข้อควรจำ: หากตัวสร้างวันที่ถูกส่งผ่านสตริงในรูปแบบวันที่ ISO ที่ถูกต้องของ YYYY-MM-DD จะถือว่า UTC โดยอัตโนมัติ

  1. JavaScript มีฟังก์ชัน Date.UTC () ที่เรียบร้อยซึ่งคุณสามารถใช้เพื่อรับการประทับเวลา UTC ของวันที่ เราแยกส่วนประกอบจากวันที่และส่งต่อไปยังฟังก์ชัน
const userEnteredDate = new Date('1989-12-20'); const dateFromAPI = new Date('1989-12-20T00:00:00Z'); const result = userEnteredDate.getTime() == dateFromAPI.getTime(); // true

การค้นหาความแตกต่างระหว่างสองวัน

สถานการณ์ทั่วไปที่คุณจะเจอคือการค้นหาความแตกต่างระหว่างวันที่สองวัน

เราพูดถึงกรณีการใช้งานสองกรณี:

การหาจำนวนวันระหว่างสองวัน

แปลงวันที่ทั้งสองเป็นการประทับเวลา UTC ค้นหาความแตกต่างในหน่วยมิลลิวินาทีและค้นหาวันที่เท่ากัน

const userEnteredDate = new Date('12/20/1989'); const userEnteredDateTimeStamp = Date.UTC(userEnteredDate.getFullYear(), userEnteredDate.getMonth(), userEnteredDate.getDate(), 0, 0, 0); const dateFromAPI = new Date('1989-12-20T00:00:00Z'); const result = userEnteredDateTimeStamp == dateFromAPI.getTime(); // true ...

ค้นหาอายุของผู้ใช้จากวันเกิด

const dateFromAPI = '2016-02-10T00:00:00Z'; const now = new Date(); const datefromAPITimeStamp = (new Date(dateFromAPI)).getTime(); const nowTimeStamp = now.getTime(); const microSecondsDiff = Math.abs(datefromAPITimeStamp - nowTimeStamp); // Math.round is used instead of Math.floor to account for certain DST cases // Number of milliseconds per day = // 24 hrs/day * 60 minutes/hour * 60 seconds/minute * 1000 ms/second const daysDiff = Math.round(microSecondsDiff / (1000 * 60 * 60 * 24)); console.log(daysDiff);

หมายเหตุ: เรามีรูปแบบที่ไม่ได้มาตรฐาน อ่านเอกสาร API เพื่อตรวจสอบว่า 12 ต.ค. หรือ 10 ธ.ค. เปลี่ยนเป็นรูปแบบ ISO ตามนั้นหรือไม่

const birthDateFromAPI = '12/10/1989';

ฉันรู้ว่ามีวิธีที่กระชับกว่านี้ในการเขียนโค้ดนี้ แต่ฉันชอบเขียนด้วยวิธีนี้เพราะตรรกะที่ชัดเจน

คำแนะนำเพื่อหลีกเลี่ยงวันที่นรก

ตอนนี้เราคุ้นเคยกับการคำนวณวันที่แล้วเราอยู่ในฐานะที่จะเข้าใจแนวทางปฏิบัติที่ดีที่สุดในการปฏิบัติตามและเหตุผลในการปฏิบัติตาม

รับ DateTime จากผู้ใช้

หากคุณได้รับวันที่และเวลาจากผู้ใช้คุณอาจกำลังมองหา DateTime ในท้องถิ่นของพวกเขา เราเห็นในส่วนเลขคณิตวันที่ที่ const parts = birthDateFromAPI.split('/'); const birthDateISO = parts[2] + '-' + parts[0] + '-' + parts[1]; const birthDate = new Date(birthDateISO); const today = new Date(); let age = today.getFullYear() - birthDate.getFullYear(); if(today.getMonth() ผู้สร้างสามารถยอมรับวันที่ได้หลายวิธี

เพื่อขจัดความสับสนฉันขอแนะนำให้สร้างวันที่โดยใช้ Date เสมอ แม้ว่าคุณจะมีวันที่อยู่แล้วในรูปแบบที่แยกวิเคราะห์ได้ที่ถูกต้อง หากโปรแกรมเมอร์ทุกคนในทีมของคุณปฏิบัติตามกฎง่ายๆนี้การดูแลรักษาโค้ดในระยะยาวจะเป็นเรื่องง่ายมากเนื่องจากมีความชัดเจนมากที่สุดเท่าที่คุณจะทำได้ด้วย new Date(year, month, day, hours, minutes, seconds, milliseconds) ผู้สร้าง

ส่วนที่น่าสนใจคือคุณสามารถใช้รูปแบบที่ช่วยให้คุณสามารถละเว้นพารามิเตอร์สี่ตัวสุดท้ายใด ๆ หากเป็นศูนย์ เช่น Date เหมือนกับ new Date(2012, 10, 12) เนื่องจากพารามิเตอร์ที่ไม่ระบุมีค่าเริ่มต้นเป็นศูนย์

ตัวอย่างเช่นหากคุณใช้ตัวเลือกวันที่และเวลาที่ให้วันที่ 2012-10-12 และเวลา 12:30 น. คุณสามารถแยกส่วนและสร้างออบเจ็กต์ Date ใหม่ได้ดังนี้:

new Date(2012, 10, 12, 0, 0, 0, 0)

พยายามหลีกเลี่ยงการสร้างวันที่จากสตริงเว้นแต่จะอยู่ในรูปแบบวันที่ ISO ใช้วิธีวันที่ (ปีเดือนวันที่ชั่วโมงนาทีวินาทีไมโครวินาที) แทน

รับเฉพาะวันที่

หากคุณได้รับเฉพาะวันที่เช่นวันเกิดของผู้ใช้ควรแปลงรูปแบบเป็นรูปแบบวันที่ ISO ที่ถูกต้องเพื่อกำจัดข้อมูลโซนเวลาที่อาจทำให้วันที่เลื่อนไปข้างหน้าหรือย้อนกลับเมื่อแปลงเป็น UTC ตัวอย่างเช่น:

const dateFromPicker = '2012-10-12'; const timeFromPicker = '12:30'; const dateParts = dateFromPicker.split('-'); const timeParts = timeFromPicker.split(':'); const localDate = new Date(dateParts[0], dateParts[1]-1, dateParts[2], timeParts[0], timeParts[1]);

ในกรณีที่คุณลืมถ้าคุณสร้าง const dateFromPicker = '12/20/2012'; const dateParts = dateFromPicker.split('/'); const ISODate = dateParts[2] + '-' + dateParts[0] + '-' + dateParts[1]; const birthDate = new Date(ISODate).toISOString(); ออบเจ็กต์ที่มีอินพุตในรูปแบบวันที่ ISO ที่ถูกต้อง (YYYY-MM-DD) โดยค่าเริ่มต้นจะเป็น UTC แทนที่จะเป็นค่าเริ่มต้นในเขตเวลาของเบราว์เซอร์

ประโยชน์ของการเรนเดอร์ฝั่งเซิร์ฟเวอร์

การจัดเก็บวันที่

เก็บ DateTime ไว้ใน UTC เสมอ ส่งสตริงวันที่ ISO หรือการประทับเวลาไปที่ส่วนหลังเสมอ

นักเขียนโปรแกรมคอมพิวเตอร์รุ่นต่างๆได้ตระหนักถึงความจริงง่ายๆนี้หลังจากประสบการณ์อันขมขื่นที่พยายามแสดงเวลาท้องถิ่นที่ถูกต้องให้กับผู้ใช้ การจัดเก็บเวลาท้องถิ่นในส่วนหลังเป็นความคิดที่ไม่ดีควรปล่อยให้เบราว์เซอร์จัดการการแปลงเป็นเวลาท้องถิ่นในส่วนหน้าจะดีกว่า

นอกจากนี้ควรเป็นที่ชัดเจนว่าคุณไม่ควรส่งสตริง DateTime เช่น“ 20 กรกฎาคม 1989 12:10 น.” ไปที่ส่วนหลัง แม้ว่าคุณจะส่งเขตเวลาเช่นกันคุณก็เพิ่มความพยายามให้โปรแกรมเมอร์คนอื่นเข้าใจเจตนาของคุณและแยกวิเคราะห์และจัดเก็บวันที่ได้อย่างถูกต้อง

ใช้ Date หรือ toISOString() วิธีการของอ็อบเจ็กต์ Date เพื่อแปลง DateTime ในเครื่องเป็น UTC

toJSON()

การแสดงวันที่และเวลา

  1. รับการประทับเวลาหรือวันที่จัดรูปแบบ ISO จาก REST API
  2. สร้าง const dateFromUI = '12-13-2012'; const timeFromUI = '10:20'; const dateParts = dateFromUI.split('-'); const timeParts = timeFromUI.split(':'); const date = new Date(dateParts[2], dateParts[0]-1, dateParts[1], timeParts[0], timeParts[1]); const dateISO = date.toISOString(); $.post('http://example.com/', {date: dateISO}, ...) วัตถุ.
  3. ใช้ Date หรือ toLocaleString() และ toLocaleDateString() วิธีการหรือไลบรารีวันที่เพื่อแสดงเวลาท้องถิ่น
toLocaleTimeString()

เมื่อใดที่คุณควรจัดเก็บเวลาท้องถิ่นด้วย

“ บางครั้งก็เป็นเช่นนั้น สิ่งสำคัญที่ต้องรู้เขตเวลา ซึ่งมีเหตุการณ์เกิดขึ้นและการแปลงเป็นเขตเวลาเดียวจะลบล้างข้อมูลนั้นโดยไม่สามารถเพิกถอนได้

“ หากคุณกำลังทำการส่งเสริมการตลาดและต้องการทราบว่าลูกค้ารายใดสั่งซื้อในช่วงเวลาอาหารกลางวันคำสั่งซื้อที่ดูเหมือนว่าจะถูกส่งไปในตอนเที่ยง GMT จะไม่เป็นประโยชน์มากนักเมื่อวางไว้เหนืออาหารเช้าในนิวยอร์ก”

หากคุณเจอสถานการณ์แบบนี้ก็จะเป็นการดีที่จะประหยัดเวลาในท้องถิ่นด้วยเช่นกัน ตามปกติเราต้องการสร้างวันที่ในรูปแบบ ISO แต่ต้องหาค่าชดเชยโซนเวลาก่อน

วัตถุวันที่ const dateFromAPI = '2016-01-02T12:30:00Z'; const localDate = new Date(dateFromAPI); const localDateString = localDate.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric', }); const localTimeString = localDate.toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit', second: '2-digit', }); ฟังก์ชันบอกจำนวนนาทีที่เมื่อเพิ่มลงในเวลาท้องถิ่นที่กำหนดจะให้เวลา UTC ที่เท่ากัน ฉันขอแนะนำให้แปลงเป็นรูปแบบ (+ -) hh: mm เพราะจะทำให้ชัดเจนยิ่งขึ้นว่าเป็นการชดเชยเขตเวลา

getTimeZoneOffset()

สำหรับโซนเวลาของฉัน +05: 45 ฉันได้รับ -345 นี่ไม่ใช่แค่เครื่องหมายตรงกันข้าม แต่ตัวเลขเช่น -345 อาจทำให้นักพัฒนาส่วนหลังงงงวย เราจึงแปลงค่านี้เป็น +05: 45

const now = new Date(); const tz = now.gettime zoneOffset();

ตอนนี้เราได้รับค่าที่เหลือและสร้างสตริง ISO ที่ถูกต้องซึ่งแสดงถึง DateTime ในเครื่อง

const sign = tz > 0 ? '-' : '+'; const hours = pad(Math.floor(Math.abs(tz)/60)); const minutes = pad(Math.abs(tz)%60); const tzOffset = sign + hours + ':' + minutes;

หากคุณต้องการคุณสามารถรวม UTC และวันที่ท้องถิ่นไว้ในวัตถุได้

const localDateTime = now.getFullYear() + '-' + pad(now.getMonth()+1) + '-' + pad(now.getDate()) + 'T' + pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds());

ในท้ายที่สุดหากคุณต้องการทราบว่าเหตุการณ์เกิดขึ้นก่อนเที่ยงตามเวลาท้องถิ่นหรือไม่คุณสามารถแยกวิเคราะห์วันที่และใช้ const eventDate = { utc: now.toISOString(), local: localDateTime, tzOffset: tzOffset, } ฟังก์ชัน

getHours()

เราไม่ได้ใช้ const localDateString = eventDate.local; const localDate = new Date(localDateString); if(localDate.getHours() <12) { console.log('Event happened before noon local time'); } ที่นี่ แต่เรายังคงจัดเก็บไว้เนื่องจากเราอาจต้องใช้ในอนาคตเพื่อวัตถุประสงค์ในการดีบัก คุณสามารถส่งออฟเซ็ตเขตเวลาและเวลา UTC เท่านั้น แต่ฉันชอบจัดเก็บเวลาท้องถิ่นด้วยเพราะในที่สุดคุณจะต้องจัดเก็บวันที่ในฐานข้อมูลและการจัดเก็บเวลาท้องถิ่นแยกกันช่วยให้คุณสืบค้นได้โดยตรงตามเขตข้อมูลแทนที่จะต้องทำการคำนวณเพื่อให้ได้วันที่ในท้องถิ่น

บางครั้งแม้จะมีการจัดเก็บเขตเวลาท้องถิ่นคุณก็ยังต้องแสดงวันที่ในเขตเวลาที่ต้องการ ตัวอย่างเช่นเวลาของกิจกรรมอาจเหมาะสมกว่าในเขตเวลาของผู้ใช้ปัจจุบันหากเป็นเสมือนจริงหรืออยู่ในเขตเวลาที่จะเกิดขึ้นจริงหากไม่เป็นเช่นนั้น ไม่ว่าในกรณีใดก็ควรพิจารณาล่วงหน้า โซลูชั่นที่จัดตั้งขึ้น สำหรับการจัดรูปแบบด้วยชื่อเขตเวลาที่ชัดเจน

การกำหนดค่าเซิร์ฟเวอร์และฐานข้อมูล

กำหนดค่าเซิร์ฟเวอร์และฐานข้อมูลของคุณให้ใช้เขตเวลา UTC เสมอ (โปรดทราบว่า UTC และ GMT คือ ไม่ใช่สิ่งเดียวกัน ตัวอย่างเช่น GMT อาจบ่งบอกถึงการเปลี่ยนไปใช้ BST ในช่วงฤดูร้อนในขณะที่ UTC จะไม่ดำเนินการ)

เราได้เห็นแล้วว่าการแปลงโซนเวลาเจ็บปวดสามารถเป็นได้มากเพียงใดโดยเฉพาะอย่างยิ่งเมื่อไม่ได้ตั้งใจ การส่ง UTC DateTime และกำหนดค่าเซิร์ฟเวอร์ของคุณให้อยู่ในเขตเวลา UTC เสมอสามารถทำให้ชีวิตของคุณง่ายขึ้น โค้ดส่วนหลังของคุณจะง่ายและสะอาดขึ้นมากเนื่องจากไม่ต้องแปลงเขตเวลาใด ๆ ข้อมูล DateTime ที่เข้ามาจากเซิร์ฟเวอร์ทั่วโลกสามารถเปรียบเทียบและจัดเรียงได้อย่างง่ายดาย

โค้ดที่อยู่ด้านหลังควรจะถือว่าเขตเวลาของเซิร์ฟเวอร์เป็น UTC ได้ (แต่ควรมีการเช็คอินเพื่อให้แน่ใจ) การตรวจสอบการกำหนดค่าอย่างง่ายช่วยให้ไม่ต้องคิดและเขียนโค้ดสำหรับการแปลงทุกครั้งที่เขียนโค้ด DateTime ใหม่

ถึงเวลาสำหรับการจัดการวันที่ที่ดีขึ้น

การจัดการวันที่เป็นปัญหาหนัก แนวคิดเบื้องหลังตัวอย่างที่ใช้ได้จริงในบทความนี้ใช้นอกเหนือจาก JavaScript และเป็นเพียงจุดเริ่มต้นในการจัดการข้อมูล DateTime และการคำนวณอย่างเหมาะสม นอกจากนี้ห้องสมุดผู้ช่วยทุกคนจะมาพร้อมกับ ชุดของตัวเอง ของความแตกต่าง

บรรทัดล่างคือ: ใช้ ISO ที่ส่วนหลังและออกจากส่วนหน้าเพื่อจัดรูปแบบสิ่งต่างๆให้เหมาะสมสำหรับผู้ใช้ โปรแกรมเมอร์มืออาชีพจะตระหนักถึงความแตกต่างบางประการและจะใช้ไลบรารี DateTime ที่ได้รับการสนับสนุนอย่างดีทั้งในส่วนหลังและส่วนหน้า ฟังก์ชันในตัวที่ฝั่งฐานข้อมูลเป็นอีกเรื่องหนึ่ง แต่หวังว่าบทความนี้จะให้ข้อมูลพื้นฐานเพียงพอที่จะตัดสินใจได้อย่างชาญฉลาดในบริบทนั้นด้วย

ที่เกี่ยวข้อง: Buggy JavaScript Code: 10 ข้อผิดพลาดที่พบบ่อยที่สุดที่นักพัฒนา JavaScript สร้างขึ้น

เจาะลึก JSON เทียบกับ XML ตอนที่ 3: XML และอนาคตของ JSON

เทคโนโลยี

เจาะลึก JSON เทียบกับ XML ตอนที่ 3: XML และอนาคตของ JSON
นำ IKEA ออกจากกล่องและออกแบบใหม่สำหรับผู้ใช้ 1.6 พันล้านคน

นำ IKEA ออกจากกล่องและออกแบบใหม่สำหรับผู้ใช้ 1.6 พันล้านคน

การออกแบบ Ux