כאשר משתמשים נדרשים להזין תאריך, מפתחים מגדירים את הערך המוגדר מראש/ברירת המחדל של תאריך סוג קלט לתאריך הנוכחי/היום. כעת, המשתמש אינו צריך להזין את התאריך באופן ידני ולכן במובן זה זה חוסך זמן ומאמץ עבור המשתמש. יתר על כן, זה משפר את חווית המשתמש, את דיוק הנתונים ומספק יותר נוחות למשתמשים. יש לו יישומים שונים כמו מערכת ניהול אירועים, מערכת הזמנות וכו'.
בלוג זה מדגים כיצד להגדיר את ערך ברירת המחדל של תאריך סוג הקלט להיום:
- שימוש במאפיין 'valueAsDate'.
- שימוש בשיטת 'toISOString()'.
- שימוש בשיטות 'getFullYear()' ו-'padStart()'.
שיטה 1: שימוש במאפיין 'valueAsDate'.
ה ' valueAsDate מאפיין ' משמש כדי לאחזר את התאריך הנוכחי באמצעות ' תַאֲרִיך() ' פונקציה. פונקציה זו משמשת לביצוע פעולות שונות בתאריך וכמו קבלת התאריך הנוכחי, קביעת תאריך ספציפי, מניפולציה של תאריכים וכו'.
בקר בקוד שלהלן להבנה טובה יותר:
< גוּף >
< div >
< תווית ל = 'תאריך היום' > התאריך הוא תווית >< קֶלֶט סוּג = 'תַאֲרִיך'
תְעוּדַת זֶהוּת = 'תאריך היום' >
div >
< תַסרִיט >
document.getElementById ( 'תאריך היום' ) .valueAsDate = תאריך חדש ( ) ;
תַסרִיט >
גוּף >
בקטע הקוד שלמעלה:
- קודם ה ' <קלט> 'תג נוצר לאחר ' סוּג ' ו' תְעוּדַת זֶהוּת ' תכונות מוגדרות ל' נתונים ' ו' תאריך היום ' בהתאמה. תג ' ' זה ישמש בכל הבלוג.
- לאחר מכן, בתוך ' ' תייגו את רכיב ה-HTML בעל המזהה של ' תאריך היום ' נבחר באמצעות ' getElementById() ' שיטה.
- לאחר מכן, ה' valueAsDate ' מאפיין מוקצה ומאוחסן כמופע של ' חדש תַאֲרִיך() 'קונסטרוקטור.
לאחר ביצוע קטע הקוד לעיל, דף האינטרנט נראה כך:
הפלט מראה שלנתוני סוג הקלט יש ערך ברירת מחדל מוגדר לתאריך הנוכחי/היום.
שיטה 2: שימוש בשיטת 'toISOString()'.
להגדרת ערך ברירת המחדל של היום עבור ' קֶלֶט ' רכיב להיום/תאריך נוכחי. ה ' toISOString() ניתן להשתמש גם בשיטה, להסבר טוב יותר, בקר מתחת לקטע הקוד:
< תַסרִיט >const today = תאריך חדש ( ) .toISOSstring ( ) .substr ( 0 , 10 ) ;
document.getElementById ( 'תאריך היום' ) .value = היום;
תַסרִיט >
בקטע הקוד שלמעלה:
- ראשית, המופע החדש של ' תַאֲרִיך() נוצר קונסטרוקטור. לאחר מכן, המר את המופע של התאריך ל-' ISO ' תקן באמצעות ' toISOString() ' שיטה.
- לאחר מכן, השתמש ב' substr() ' השיטה לוקחת מספרי אינדקס של ' 0 ' ו' 10 'כפרמטר. לאחר מכן, הוא מציג את התוצאה החל מה-' 0 ' אינדקס ל' 10 ' אינדקס.
לאחר ביצוע השיטה לעיל, דף האינטרנט מופיע כך:
הפלט מראה שלנתוני סוג הקלט יש ערך ברירת מחדל מוגדר לתאריך הנוכחי/היום.
שיטה 3: שימוש בשיטות 'getFullYear()' ו-'padStart()'.
בחלק זה, ' getFullYear() ' השיטה מחלצת את התאריך הנוכחי. ה ' pathStart() נעשה שימוש בשיטת ' המסייעת בעיצוב ה' תַאֲרִיך ' פורמט שיוצג על ' המיועד ' קֶלֶט ' אלמנט:
< תַסרִיט >const נוֹכְחִי = תאריך חדש ( ) ;
const current-year = current.getFullYear ( ) ;
const current-month = מחרוזת ( current.getMonth ( ) + 1 ) .padStart ( 2 , '0' ) ;
const current-day = מחרוזת ( current.getDate ( ) ) .padStart ( 2 , '0' ) ;
const formattedDate = ` ${current-year} - ${current-month} - ${current-day} ` ;
const myDateInput = document.getElementById ( 'הדייט שלי' ) ;
myDateInput.value = formattedDate;
תַסרִיט >
התיאור של קטעי הקוד לעיל מתואר בנקודות תבליטים:
- ראשית, צור סוג קבוע של משתנה המאחסן את האובייקט של ' תַאֲרִיך() 'קונסטרוקטור עם השם' נוֹכְחִי '.
- לאחר מכן, השתמש ב' getFullYear() שיטת ' עם ' נוֹכְחִי ' משתנה ואחסן אותו במשתנה חדש בשם ' השנה הנוכחית '.
- לאחר מכן, העבר את ' getMonth() שיטת ' והוסיפו מספר אחד כדי להתחיל את החודש מ-1 עד 12 בתוך ' חוּט() 'קונסטרוקטור. ספק גם ריפוד של שני תווים באמצעות ' pathStart(2, 0) '. והצב אותו במשתנה חדש שנוצר בשם ' החודש הנוכחי '.
- לאחר מכן, בצע את אותו תהליך כדי לקבל את התאריך הנוכחי באמצעות ' השג תאריך() שיטת ' ואחסנו אותה ב' היום 'משתנה.
לאחר ביצוע קטעי הקוד, דף האינטרנט בכל אחד מהמקרים מופיע כך:
הפלט מראה שלנתוני סוג הקלט יש ערך ברירת מחדל מוגדר לתאריך הנוכחי/היום.
סיכום
כדי להגדיר את ערך ברירת המחדל של תאריך סוג הקלט לתאריך היום/נוכחי, ' valueAsDate 'נכס, ה' toISOString() ' ו' getFullYear() ניתן להשתמש בשיטות. במקרה של המאפיין 'valueAsDate', רק ' תַאֲרִיך() יש צורך בקונסטרוקטור כאשר במקרה של ' toISOString() ' שיטות את ' substr() השיטה משמשת כדי לקבל רק חלק מסוים מהתאריך. בלוג זה מדגים כיצד להגדיר את ערך ברירת המחדל של סוג הקלט להיום/נוכחי.