عندما يُطلب من المستخدمين إدخال تاريخ ، يقوم المطورون بتعيين القيمة المحددة مسبقًا / الافتراضية لتاريخ نوع الإدخال على التاريخ الحالي / اليوم. الآن ، لا يحتاج المستخدم إلى إدخال التاريخ يدويًا ، لذلك فهو يوفر الوقت والجهد للمستخدم. علاوة على ذلك ، فهو يعزز تجربة المستخدم ودقة البيانات ويوفر المزيد من الراحة للمستخدمين. لها تطبيقات مختلفة مثل نظام إدارة الأحداث ونظام الحجز وما إلى ذلك.
توضح هذه المدونة كيفية تعيين القيمة الافتراضية لتاريخ نوع الإدخال إلى اليوم:
- استخدام خاصية 'valueAsDate'
- استخدام طريقة 'toISOString ()'
- استخدام طريقتي 'getFullYear ()' و 'padStart ()'
الطريقة الأولى: استخدام خاصية 'valueAsDate'
ال ' تاريخ 'لاسترداد التاريخ الحالي من خلال' تاريخ() ' وظيفة. تُستخدم هذه الوظيفة لأداء عمليات مختلفة في تاريخ مثل الحصول على التاريخ الحالي ، وتحديد تاريخ محدد ، والتعامل مع التواريخ ، وما إلى ذلك.
قم بزيارة الكود أدناه لفهم أفضل:
< جسم >
< شعبة >
< ملصق ل = 'تاريخ اليوم' > التاريخ هو ملصق > < مدخل يكتب = 'تاريخ'
بطاقة تعريف = 'تاريخ اليوم' >
شعبة >
< النصي >
document.getElementById ( 'تاريخ اليوم' ) .valueAsDate = تاريخ جديد ( ) ؛
النصي >
جسم >
في مقتطف الشفرة أعلاه:
- لأول مرة ' <إدخال> 'العلامة التي تحتوي على' يكتب ' و ' بطاقة تعريف 'تعيين سمات على' بيانات ' و ' تاريخ اليوم ' على التوالى. سيتم استخدام علامة ' ' هذه في جميع أنحاء المدونة.
- بعد ذلك ، داخل ' 'وضع علامة على عنصر HTML الذي يحتوي على معرف' تاريخ اليوم 'باستخدام' getElementById () ' طريقة.
- بعد ذلك ، ' تاريخ 'يتم تعيين الخاصية وتخزينها كمثيل جديد لـ' تاريخ() ' البناء.
بعد تنفيذ مقتطف الشفرة أعلاه ، تبدو صفحة الويب كما يلي:
يوضح الإخراج أن بيانات نوع الإدخال لها قيمة افتراضية معينة على التاريخ الحالي / اليوم.
الطريقة 2: استخدام طريقة 'toISOString ()'
لتعيين القيمة الافتراضية اليوم لـ ' مدخل 'إلى اليوم / التاريخ الحالي. ال ' toISOString () '، للحصول على شرح أفضل ، تفضل بزيارة مقتطف الشفرة أدناه:
< النصي >const اليوم = تاريخ جديد ( ) .toISOString ( ) .substr ( 0 و 10 ) ؛
document.getElementById ( 'تاريخ اليوم' ) .value = اليوم ؛
النصي >
في مقتطف الشفرة أعلاه:
- أولاً ، المثال الجديد لـ ' تاريخ() تم إنشاء المُنشئ. بعد ذلك ، قم بتحويل مثيل التاريخ إلى ' ISO 'القياسي باستخدام' toISOString () ' طريقة.
- بعد ذلك ، استخدم ' substr () 'طريقة أخذ الأرقام الفهرسية لـ' 0 ' و ' 10 'كمعامل. بعد ذلك ، يتم عرض النتيجة بدءًا من ' 0 'الفهرس إلى' 10 ' فِهرِس.
بعد تنفيذ الطريقة أعلاه ، تظهر صفحة الويب على النحو التالي:
يوضح الإخراج أن بيانات نوع الإدخال لها قيمة افتراضية معينة على التاريخ الحالي / اليوم.
الطريقة الثالثة: استخدام الأسلوبين 'getFullYear ()' و 'padStart ()'
في هذا القسم ، ' getFullYear () 'طريقة استخراج التاريخ الحالي. ال ' pathStart () 'التي تساعد في تنسيق' تاريخ 'الشكل الذي سيتم عرضه على الهدف' مدخل ' عنصر:
< النصي >مقدار ثابت حاضِر = تاريخ جديد ( ) ؛
سنة الحالية const = current.getFullYear ( ) ؛
الشهر الحالي المستمر = سلسلة ( current.getMonth ( ) + 1 ) .padStart ( 2 و '0' ) ؛
const الحالية اليوم = سلسلة ( current.getDate ( ) ) .padStart ( 2 و '0' ) ؛
تاريخ التنسيق const = ' $ {السنة الحالية} - $ {current-month} - $ {current-day} ' ؛
const myDateInput = document.getElementById ( 'تاريخ' ) ؛
myDateInput.value = formattedDate ،
النصي >
وصف مقتطفات التعليمات البرمجية أعلاه موصوف في نقاط نقطية:
- أولاً ، أنشئ نوعًا ثابتًا من المتغيرات يخزن كائن ' تاريخ() 'مُنشئ بالاسم' حاضِر '.
- بعد ذلك ، استخدم ' getFullYear () 'مع' حاضِر 'متغير وتخزينه في متغير جديد يسمى' السنة الحالية '.
- ثم مرر ' getMonth () 'وإضافة رقم واحد لبدء الشهر من 1 إلى 12 داخل' خيط() ' البناء. قدم أيضًا مساحة متروكة من حرفين من خلال استخدام ' pathStart (2، 0) '. وضعه في متغير تم إنشاؤه حديثًا باسم ' الشهر الحالي '.
- بعد ذلك ، اتبع نفس العملية للحصول على التاريخ الحالي باستخدام ' getDate () 'وتخزينه في' اليوم الحالي ' عامل.
بعد تنفيذ مقتطفات التعليمات البرمجية ، تظهر صفحة الويب في كل حالة على النحو التالي:
يوضح الإخراج أن بيانات نوع الإدخال لها قيمة افتراضية معينة على التاريخ الحالي / اليوم.
خاتمة
لتعيين القيمة الافتراضية لتاريخ نوع الإدخال إلى اليوم / التاريخ الحالي ، فإن ' تاريخ 'الملكية ،' toISOString () ' و ' getFullYear () '. في حالة الخاصية 'valueAsDate' ، فإن الخاصية ' تاريخ() 'المُنشئ مطلوب في حالة' toISOString () 'طرق' substr () 'للحصول على جزء محدد فقط من التاريخ. توضح هذه المدونة كيفية تعيين القيمة الافتراضية لتاريخ نوع الإدخال إلى اليوم / الحالي.