JavaScript สำหรับเครื่องมือเพิ่มประสิทธิภาพ: การเพิ่มตัวเลือก DateTime

เราเคยไปที่นั่นมาแล้ว: งานที่น่าผิดหวังในการเพิ่มวันที่ในแบบฟอร์มด้วยตนเอง

ตอนนี้ ฉันไม่รู้เกี่ยวกับคุณเลย แต่เมื่อฉันมองหารูปแบบวันที่ สมองของฉันก็เข้าสู่พิกัดเกินพิกัด คุณกำลังจะไป MM/DD/YYYY? เกิดอะไรขึ้นถ้าเราต้องการ YYYY-MM-DD แทน? กุมภาพันธ์มีอีกกี่วัน?

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

กรณีธุรกิจ: การเพิ่มตัวเลือก DateTime

ในสถานการณ์สมมตินี้ เรามาถึงสมมติฐานต่อไปนี้:

เพื่อทดสอบสมมติฐานนี้ เราจะใช้การเปลี่ยนแปลงด้านล่าง:

รหัสที่ใช้ในการทดลอง

มาถึงส่วนที่สนุกแล้ว!

ในการดำเนินการเปลี่ยนแปลง เราเรียกใช้โค้ด JavaScript ด้านล่างในหน้าทดสอบ คัดลอกโค้ดแล้วลองใช้เอง!

 var dateInput = document.querySelector("#date");
รองรับ var = true;
var test = document.createElement("อินพุต");
ลอง {
  test.type = "วันที่";
} จับ (จ) {
  รองรับ = เท็จ;
}
ถ้า (รองรับ) {
  dateInput.setAttribute("ประเภท", "วันที่");
  dateInput.setAttribute("ค่า", getFormattedDate(0));
  dateInput.setAttribute("นาที", getFormattedDate(-1));
  dateInput.setAttribute("สูงสุด", getFormattedDate(1));
}
ฟังก์ชัน getFormattedDate (changeYear) {
  var วันนี้ = วันที่ใหม่ ();
  var dd = สตริง(today.getDate()).padStart(2, "0");
  var mm = สตริง(today.getMonth() + 1).padStart(2, "0");
  var yyyy = วันนี้ getFullYear() + changeYear;
  formattedDate = ปปปป + "-" + มม. + "-" + dd;
  ส่งคืน formattedDate;
}

รายละเอียดของรหัส

1. ไวยากรณ์ใหม่

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

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

ถ้ามันส่งคืนข้อผิดพลาด มันจะจับมัน สคริปต์จะรันโค้ดระหว่างเนื้อหาที่จับได้ เนื่องจากมันส่งผ่านข้อผิดพลาดในฟังก์ชัน คุณสามารถ console.log เพื่อค้นหาปัญหาเฉพาะ

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

.type คือวิธีการที่ตั้งค่าแอตทริบิวต์ "ประเภท" ขององค์ประกอบใน DOM

.getDate() เป็นวิธีการที่ส่งกลับวันที่ของวัตถุวันที่ มันจะกลับวันเป็นตัวเลข

.padStart(targetLength, padString) เป็นวิธีการที่ช่วยให้เราสามารถใส่สตริงที่มีอักขระต่างกันสำหรับจำนวนที่เราต้องการ คุณส่งผ่านจำนวนครั้งที่คุณต้องการใส่สตริงในอาร์กิวเมนต์ targetLength คุณส่งผ่านสตริงที่ใช้เป็นช่องว่างภายในในอาร์กิวเมนต์ padString มันจะพิจารณาความยาวของ padString เมื่อทำการเติม

.getMonth() คือเมธอดที่คืนค่าอ็อบเจ็กต์เดือนของวันที่เป็นตัวเลข มันเริ่มนับที่ 0 ดังนั้นนี่คือมกราคม หมายเลข 11 จะเป็นเดือนธันวาคม

String() เป็นวิธีการที่พยายามแปลงอาร์กิวเมนต์ที่ส่งผ่านลงไปเป็นค่าสตริง วิธีนี้มักใช้เมื่อคุณต้องการแปลงตัวเลขเป็นสตริง

.getFullYear() เป็นวิธีการที่ส่งกลับปีของวัตถุวันที่

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

2. ตรรกะ

 var dateInput = document.querySelector("#date");

เราเริ่มต้นด้วยการเลือกช่องป้อนข้อมูลวันที่ด้วยวิธี querySelector เราได้เพิ่ม id=”date” ลงในช่องป้อนข้อมูลของเราเพื่อใช้ #date เป็นตัวเลือกของเรา เรากำหนดองค์ประกอบให้กับตัวแปร dateInput ที่เพิ่งประกาศใหม่ของเรา

 รองรับ var = true;

จากนั้นเราประกาศตัวแปรที่รองรับ เรากำหนด boolean true ให้กับตัวแปรที่ประกาศใหม่ของเรา เราจะเปลี่ยนค่านี้ในภายหลังหากเบราว์เซอร์ไม่สนับสนุนตัวเลือกวันที่และเวลา

 var test = document.createElement("อินพุต");

เราจำเป็นต้องสร้างช่องใส่ที่เราจะใช้เพื่อตรวจสอบว่าประเภทนี้รองรับหรือไม่ เราทำสิ่งนี้ด้วยวิธี .createElement

เราส่งต่อ "อินพุต" เป็นสตริงเพื่อสร้างองค์ประกอบอินพุต เราบันทึกองค์ประกอบนี้ในตัวแปรทดสอบที่ประกาศใหม่

เราจะใช้คำสั่ง try ต่อไปนี้เพื่อตรวจสอบว่าการเปลี่ยนแปลงของเราได้รับการสนับสนุนหรือไม่:

 ลอง {

เริ่มต้นด้วยการเขียนคำสำคัญลอง เราเปิดคำสั่งด้วยวงเล็บปีกกา

ฟังก์ชันนี้จะลองทุกอย่างระหว่างวงเล็บเหล่านี้ มันจะเรียกใช้รหัสเพื่อดูว่ามีข้อผิดพลาดเกิดขึ้นหรือไม่

 test.type = "วันที่";

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

 } จับ (จ) {

จากนั้น เราเขียนคำสั่ง catch ของเราหลังวงเล็บปิด ส่วนระหว่างวงเล็บปีกกาจะทำงานเมื่อเราพบข้อผิดพลาด

โดยใส่ "e" เป็นอาร์กิวเมนต์ เราสามารถใช้สิ่งนี้ในคำสั่ง catch ของเราได้ คุณสามารถใช้เพื่อ console.log ข้อผิดพลาดเฉพาะตัวอย่างเช่น

 รองรับ = เท็จ;

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

 }

จากนั้นปิดคำสั่ง catch ด้วยวงเล็บปิด

 ถ้า (รองรับ) {

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

 dateInput.setAttribute("ประเภท", "วันที่");

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

 dateInput.setAttribute("ค่า", getFormattedDate(0));

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

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

 dateInput.setAttribute("นาที", getFormattedDate(-1));

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

 dateInput.setAttribute("สูงสุด", getFormattedDate(1));

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

 }

ปิดคำสั่ง if ด้วยวงเล็บปีกกา การเปลี่ยนแปลงนี้จะปรากฏในช่องป้อนข้อมูล

เรายังต้องกำหนดฟังก์ชันที่ใช้ในคำสั่ง if เราต้องการให้ฟังก์ชันนี้ส่งคืนวันที่ในรูปแบบต่อไปนี้: yyyy-mm-dd

 ฟังก์ชัน getFormattedDate (changeYear) {

เพื่อให้ได้ผลลัพธ์นี้ ให้เริ่มโดยใช้คีย์เวิร์ดของฟังก์ชันเพื่อกำหนดหนึ่งรายการ เราตั้งชื่อ getFormattedDate ให้กับฟังก์ชันของเรา

หากต้องการควบคุมวันที่ที่ส่งคืนได้เล็กน้อย ให้ตั้งค่า changeYear เป็นอาร์กิวเมนต์

เราสามารถใช้สิ่งนี้เป็นคีย์เวิร์ดในเนื้อหาฟังก์ชันเพื่อควบคุมสิ่งที่ส่งต่อเมื่อเรียกใช้ฟังก์ชัน

 var วันนี้ = วันที่ใหม่ ();

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

 var dd = สตริง(today.getDate()).padStart(2, "0");

เมธอด getDate รับวันที่ของเรา เมื่อวันเป็นตัวเลขหลักเดียวจะเพิ่ม 0 ก่อนตัวเลขด้วยวิธี padStart

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

 var mm = สตริง(today.getMonth() + 1).padStart(2, "0");

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

 var yyyy = วันนี้ getFullYear() + changeYear;

ต่อไป เราจะได้ปีของวันนี้ด้วยวิธี getFullyear ใช้ตัวเลขที่ส่งต่อลงมาเพื่อเปลี่ยนปี

 formattedDate = ปปปป + "-" + มม. + "-" + dd;

จากนั้น เรารวมตัวแปรทั้งหมดของเราเป็นวันที่ที่จัดรูปแบบโดยใช้การต่อสตริง

 ส่งคืน formattedDate;

เราคืนค่าตัวแปร formattedDate เพื่อให้ผู้เรียกใช้ฟังก์ชันสามารถใช้ได้

 }

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

3. ออกกำลังกาย

เมื่อคุณได้จัดวางขั้นตอนทั้งหมดแล้ว เหลือเพียงให้คุณลองใช้งาน แล้วอย่าลืมมาสนุกกันล่ะ!

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

ไม่สามารถคิดออก? ส่งข้อความถึงฉันบน LinkedIn และฉันจะช่วยคุณ!

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