javascript เบื้องต้น บทที่ ๑๕: การจัดการวันเวลา
เขียนเมื่อ 2019/07/31 23:25
แก้ไขล่าสุด 2021/09/28 16:42
การสร้างออบเจ็กต์วันเวลา
ในจาวาสคริปต์นั้นการจัดการเวลาสามารถทำโดยใช้ออบเจ็กต์ Date ซึ่งเป็นออบเจ็กต์ในตัวที่มีเตรียมไว้ตั้งแต่แรกแล้ว
ออบเจ็กต์ Date มีหน้าที่อยู่ ๒ อย่าง คือ
- เป็นคอนสตรักเตอร์สร้างออบเจ็กต์วันเวลา
- รวบรวมฟังก์ชันที่เกี่ยวข้องกับการจัดการวันเวลา
ออบเจ็กต์วันเวลา คือออบเจ็กต์ที่เก็บข้อมูลวันเวลา สร้างขึ้นโดยใช้ Date เป็นคอนสตรักเตอร์ (ใช้ new Date ในการสร้าง) วิธีสร้างมีอยู่หลากหลาย
เช่น ใช้สายอักขระที่เขียนข้อมูลวันเวลาเอาไว้ในการสร้าง
var wanwela = new Date("2019-08-12 12:01:02");
alert(wanwela); // ได้ Mon Aug 12 2019 12:01:02 GMT+0700
var wanwela = new Date("2019/08/12 12:01:02");
alert(wanwela); // ได้ Mon Aug 12 2019 12:01:02 GMT+0700เวลาจะกั้นด้วย / หรือ - ก็ได้ จะถูกตีความเป็นวันเวลาได้ทั้งนั้น
นอกจากนี้อาจสร้างขึ้นโดยใส่ตัวเลข ระบุ ปี, เดือน, วัน, ชั่วโมง, นาที, วินาที, มิลลิวินาที ตามลำดับ
เพียงแต่ว่าในส่วนของเดือนนั้นจะแปลกหน่อย โดยเดือนมกราคมมีค่าเป็น 0 และธันวาคมเป็น 11 ต่างจากที่คนทั่วไปใช้อยู่ 1 เสมอ
ตัวอย่าง
var wanwela = new Date(2019, 8, 12, 12, 1, 2, 0);
alert(wanwela); // ได้ Thu Sep 12 2019 12:01:02 GMT+0700จะเห็นว่าใส่เลขเดือนเป็น 8 ไป แต่ผลที่ได้คือเดือนกันยายน ซึ่งตามหลักสากลแล้วควรเป็นเดือน 9
ในออบเจ็กต์มีการบันทึกเขตเวลาด้วย ดังนั้นเวลาที่สร้างขึ้นจริงๆขึ้นอยู่กับเขตเวลาที่ตั้งไว้ในเครื่องนั้น อย่างของไทยจะเป็น GMT+0700 คือเร็วกว่าเวลามาตรฐานไป ๗ ชั่วโมง
หากต้องการเวลาที่ UTC ให้เติม Z ต่อท้าย
var wanwela = new Date("2019-08-12 12:01:02Z");
alert(wanwela); // ได้ Mon Aug 12 2019 19:01:02 GMT+0700เพียงแต่ว่าค่าเวลาที่แสดงก็ถูกแสดงเป็นเวลาท้องถิ่นอยู่ดี
หากต้องการให้แสดงผลเป็นเวลามาตรฐานกรีนิช หรือแสดงผลในแบบอื่นๆอาจใช้เมธอดอื่นสำหรับแสดงผล
เมธอดแสดงผลของวันเวลาแบบต่างๆ
หากต้องการให้เวลาแสดงเป็นเวลามาตรฐาน ให้ใช้เมธอด toUTCString
var wanwela = new Date("2019-08-16 12:15:30Z");
alert(wanwela.toUTCString()); // ได้ Fri, 16 Aug 2019 12:15:30 GMTปกติเมื่อใช้ alert เพื่อแสดงผล ค่าจะถูกแสดงโดยไปเรียกเมธอด toString มาเพื่อแปลงเป็นสายอักขระ โดยเวลาตรงนี้จะเป็นเวลาท้องถิ่น
หากต้องการแสดงแค่ส่วนวันที่หรือส่วนเวลาอาจใช้เมธอด toDateString และ toTimeString
var wanwela = new Date("2019-08-17 15:20:20");
alert(wanwela.toString()); // ได้ Sat Aug 17 2019 15:20:20 GMT+0700
alert(wanwela.toDateString()); // ได้ Sat Aug 17 2019
alert(wanwela.toTimeString()); // ได้ 15:20:20 GMT+0700นอกจากนี้มีเมธอด toLocaleString toLocaleDateString toLocaleTimeString สำหรับแสดงเวลาตามรูปแบบที่ขึ้นอยู่กับที่ตั้งไว้ในเครื่อง
อย่างในตัวอย่างนี้ตั้งให้แสดงวันเดือนปีแบบไทย คือเป็น พ.ศ. โดยเรียงวัน/เดือน/ปี
alert(wanwela.toLocaleString()); // ได้ 17/8/2562 15:20:20
alert(wanwela.toLocaleDateString()); // ได้ 17/8/2562
alert(wanwela.toLocaleTimeString()); // ได้ 15:20:20
การดูค่าวันเวลาในออบเจ็กต์วันเวลา
เมื่อสร้างออบเจ็กต์วันเวลามาแล้ว การดูค่าทำได้โดยผ่านเมธอดของออบเจ็กต์ เมธอดสำหรับดูค่าต่างๆในออบเจ็กต์จะขึ้นต้นด้วยคำว่า get ได้แก่
| เมธอด | ความหมาย |
|---|---|
| getFullYear | ดูปี |
| getMonth | ดูเดือน |
| getDate | ดูวันที่ |
| getDay | ดูวันในสัปดาห์ |
| getHours | ดูชั่วโมง |
| getMinutes | ดูนาที |
| getSeconds | ดูวินาที |
| getMilliseconds | ดูมิลลิวินาที |
| getTime | ดูเวลาวินาทีไล่จาก 1970/01/01 00:00:00 ที่เขตเวลามาตรฐาน |
| getTimezoneOffset | ดุว่าเวลามาตรฐานต่างจากเวลาที่นี่กี่นาที |
| getUTCFullYear | ดูปีที่เขตเวลามาตรฐาน |
| getUTCMonth | ดูเดือนที่เขตเวลามาตรฐาน |
| getUTCDate | ดูวันที่ที่เขตเวลามาตรฐาน |
| getUTCDay | ดูวันในสัปดาห์ที่เขตเวลามาตรฐาน |
| getUTCHours | ดูชั่วโมงที่เขตเวลามาตรฐาน |
| getUTCMinutes | ดูนาทีที่เขตเวลามาตรฐาน |
| getUTCSeconds | ดูวินาทีที่เขตเวลามาตรฐาน |
| getUTCMilliseconds | ดูมิลลิวินาทีที่เขตเวลามาตรฐาน |
จะเห็นว่าแบ่งเป็น ๒ ส่วนชัดเจน โดยอันที่มี UTC จะเป็นการเอาเวลามาตรฐานกรีนิช แต่ที่ไม่มี จะแค่เอาเวลาตามเขตเวลาของเครื่องนั้น
GetDay นั้นแสดงวันในสัปดาห์ โดยวันอาทิตย์นับเป็นเลข 0 วันเสาร์นับเป็น 6
เลขเดือนจะเป็นค่า 0~11 น้อยกว่าเดือนจริงๆอยู่ 1 ต้องระวังด้วย
ตัวอย่าง
var wanwela = new Date(2019, 8, 1, 1, 2, 3);
alert(wanwela); // ได้ Sun Sep 01 2019 01:02:03 GMT+0700
alert(wanwela.getFullYear()); // ได้ 2019
alert(wanwela.getMonth()); // ได้ 8
alert(wanwela.getDate()); // ได้ 1
alert(wanwela.getDay()); // ได้ 0
alert(wanwela.getHours()); // ได้ 1
alert(wanwela.getUTCDate()); // ได้ 31
alert(wanwela.getUTCMonth()); // ได้ 7
alert(wanwela.getUTCHours()); // ได้ 18
alert(wanwela.getTimezoneOffset()); // -420การแก้ค่าในออบเจ็กต์วันเวลา
ออบเจ็กต์วันเวลาที่สร้างขึ้นมาแล้วสามารถเข้าไปแก้ค่าข้างในได้โดยเมธอดต่างๆที่ขึ้นต้นด้วย set
ชื่อทั้งหมดเหมือนกับเมธอด get ที่กล่าวไปข้างต้น แค่เปลี่ยนจาก get เป็น set เท่านั้น
| เมธอด | ความหมาย |
|---|---|
| setFullYear | ตั้งค่าปี |
| setMonth | ตั้งค่าเดือน |
| setDate | ตั้งค่าวันที่ |
| setHours | ตั้งค่าชั่วโมง |
| setMinutes | ตั้งค่านาที |
| setSeconds | ตั้งค่าวินาที |
| setMilliseconds | ตั้งค่ามิลลิวินาที |
| setTime | ตั้งค่าเวลาวินาทีไล่จาก 1970/01/01 00:00:00 ที่เขตเวลามาตรฐาน |
| setUTCFullYear | ตั้งค่าปีที่เขตเวลามาตรฐาน |
| setUTCMonth | ตั้งค่าเดือนที่เขตเวลามาตรฐาน |
| setUTCDate | ตั้งค่าวันที่ที่เขตเวลามาตรฐาน |
| setUTCHours | ตั้งค่าชั่วโมงที่เขตเวลามาตรฐาน |
| setUTCMinutes | ตั้งค่านาทีที่เขตเวลามาตรฐาน |
| setUTCSeconds | ตั้งค่าวินาทีที่เขตเวลามาตรฐาน |
| setUTCMilliseconds | ตั้งค่ามิลลิวินาทีที่เขตเวลามาตรฐาน |
จะเห็นว่าเกือบจะเหมือนกับ get เพียงแต่บางค่าเป็นค่าที่เอาไว้ดูอย่างเดียว ตั้งค่าไม่ได้ เช่น Day วันในสัปดาห์ มีไว้ดูค่าอย่างเดียว มีแต่ get ไม่มี set
เวลาแก้ค่านั้นเราอาจใช้ get เพื่อหาค่าวันหรือเดือนหรือปีเดิม แล้วบวกลบออกจากค่านั้น สามารถเลื่อนวันที่ไปกี่วันกี่เดือนกี่ปีถัดไปตามที่ต้องการได้
ตัวอย่าง
var wanwela = new Date("2019-06-13 12:00:00");
alert(wanwela.toLocaleDateString()); // ได้ 13/6/2562
wanwela.setMonth(wanwela.getMonth() - 7);
alert(wanwela.toLocaleDateString()); // ได้ 13/11/2561
wanwela.setFullYear(wanwela.getFullYear() + 1);
alert(wanwela.toLocaleDateString()); // ได้ 13/11/2562
wanwela.setDate(wanwela.getDate() - 28);
alert(wanwela.toLocaleDateString()); // ได้ 16/10/2562สร้างออบเจ็กต์วันเวลาโดยระบุข้อมูลแค่บางส่วน
ในการสร้างออบเจ็กต์วันเวลาอาจระบุแค่ปีแล้วส่วนที่เหลือก็จะถูกเติมขึ้นมาเอง
var wanwela = new Date("2019-08-12");
alert(wanwela); // ได้ Mon Aug 12 2019 07:00:00 GMT+0700
var wanwela = new Date("2019");
alert(wanwela); // ได้ Tue Jan 01 2019 07:00:00 GMT+0700เวลาที่ได้มาจะถูกกำหนดเองเป็นเวลา 00:00 ของเวลามาตรฐานกรีนิช ซึ่งตรงกับ 07:00 ในไทย ดังนั้นจึงขึ้นเป็น 07:00
หากใส่แค่ปีจะได้วันที่ 1 เดือน 1 ของปีนั้น
เพียงแต่ว่ากรณีที่ใส่แค่ปีก็จำเป็นจะต้องใส่ในรูปของสายอักขระ เพราะถ้าใส่ตัวเลขไปแค่ตัวเดียว จะถูกตีความเป็นการสร้างวันเวลาโดยกำหนดค่ามิลลิวินาทีนับตั้งแต่ 1970/01/01 00:00:00 ที่เขตเวลามาตรฐาน
var wanwela = new Date(1600000000000);
alert(wanwela); // ได้ Sun Sep 13 2020 19:26:40 GMT+0700เวลาช่วงปี 2020~2023 ค่าอยู่ที่ค่าประมาณ 1.6~1.7 ล้านล้าน
เวลาที่นับจาก 1970/01/01 00:00:00
ค่าเวลามิลลิวินาทีนับตั้งแต่จุดเริ่มต้นที่ 1970/01/01 00:00:00 นี้มีความสำคัญ ถูกใช้มาเป็นสากล ถูกกำหนดขึ้นมาเพื่อความสะดวกในการนับเวลา มีความเรียบง่ายกว่าระบบวันที่ที่เราใช้กันอยู่ในชีวิตประจำวัน
เพียงแต่ตัวเลขนี้ตอนนี้มีค่าถึงหลักล้านล้าน มองแล้วไม่อาจรู้ทันทีว่าเป็นช่วงไหน ต้องทำการแปลงเป็นวันเดือนปี
จะเห็นว่าเมื่อใช้ new Date แล้วเติมตัวเลขตัวเดียวเราจะได้ออบเจ็กต์ที่แสดงวันเวลาของเลขที่ป้อนเข้าไป
ในทางกลับกัน ในออบเจ็กต์ Date มีฟังก์ชันส่วนหนึ่งที่เอาไว้สำหรับหาตัวเลขนั้นจากวันเวลาที่ป้อนเข้าไป
| ฟังก์ชัน | ค่าป้อนเข้า |
|---|---|
| Date.parse | สายอักขระแสดงวันเวลาตามเวลาท้องถิ่น |
| Date.UTC | ตัวเลขปี เดือน วัน ชั่วโมง นาที วินาที มิลลิวินาที ตามเวลามาตรฐาน |
| Date.now | เวลา ณ ตอนนี้ |
Date.parse นั้นจะให้ผลเหมือนกับสร้างออบเจ็กต์วันเวลาขึ้นมาโดยใช้สายอักขระจากนั้นใช้เมธอด getTime
alert(Date.parse("2019-08-18 15:20:20")); // ได้ 1566116420000
var wanwela = new Date("2019-08-18 15:20:20");
alert(wanwela.getTime()); // ได้ 1566116420000นอกจากนี้อาจใช้ฟังก์ชัน Number เพื่อแปลงวันเวลาเป็นค่าตัวเลขได้ ผลเหมือนใช้ .getTime แต่จะใช้ parseInt แทนไม่ได้ ถ้าใช้ parseInt จะได้เป็น NaN
alert(Number(wanwela)); // ได้ 1566116420000
alert(parseInt(wanwela)); // ได้ NaNส่วน Date.UTC จะรับข้อมูลเป็นตัวเลขซึ่งบอกวันเวลาในเขตเวลามาตรฐาน
alert(Date.UTC(2019, 7, 18, 15, 20, 20)); // ได้ 1566141620000
alert(Date.UTC(2019, 7, 18, 8, 20, 20)); // ได้ 1566116420000การหาส่วนต่างของเวลา
ออบเจ็กต์เวลาเมื่อนำมาใช้กับเครื่องหมายลบจะถูกเปลี่ยนเป็นตัวเลขมิลลิวินาทีนับจาก 1970/01/01 00:00:00 ไม่ว่าจะคำนวณกับข้อมูลชนิดตัวเลข หรือคำนวณกับข้อมูลชนิดวันเวลาด้วยกันก็ตาม
เช่น
var wanwela = new Date("2019-08-21 12:30:30");
alert(wanwela); // ได้ Wed Aug 21 2019 12:30:30 GMT+0700
alert(wanwela - 3600000); // ได้ 1566361830000
alert(wanwela - new Date("2019-08-21 12:30:29")); // ได้ 1000ส่วนต่างที่ได้จากการลบวันเวลานั้นมีค่าเป็นหน่วยมิลลิวินาที ดังนั้นหากต้องการหาระยะห่างระหว่าง ๒ วันก็ต้องแปลงหน่วยเอา
var w1 = new Date("2019-08-22 12:30:30");
var w2 = new Date("2019-09-22 12:30:30");
alert((w2 - w1) / (1000 * 60 * 60 * 24)); // ได้ 31การบวกเวลา
กรณีที่ต้องการเอาเวลามาบวกกันนั้นจะยุ่งยากหน่อย เพราะต่างจากลบตรงที่เวลาเอาออบเจ็กต์วันเวลามาบวกกันจะถูกแปลงเป็นสายอักขระ ดังนั้นจึงต้องแปลงเป็นเลขก่อน โดยใช้ Number หรือ .getTime
เช่น หากต้องการหาเวลากึ่งกลางระหว่างวัน ๒ วัน
var w1 = new Date("2019-08-24 18:30:00");
var w2 = new Date("2019-09-24 18:30:00");
var w3 = new Date((Number(w1) + Number(w2)) / 2);
alert(w3); // ได้ Mon Sep 09 2019 06:30:00 GMT+0700十五