التعامل مع input من نوع time

يمكنك إستخدام getElementById للحصول علي العنصر . ولإستخدام القيمة المختارة بواسطة العنصر يمكنك إستخدام .value 

document.getElementById("timeSyart").value

ويمكنك إستخدام الأحداث وبهذا تستطيع تنفيذ ما تريد كلما تم إختيار أو تعديل الوقت .

document.getElementById("timeSyart").addEventListener("input", (event)=>{
  //  هنا نقوم بكتابة الكود وسوف يتم تنفيذه كلما تم إختيار الوقت
  
  event.target.value // للحصول على قيمة الوقت
});

لقد كتبت عنصر الـ html بشكل خاطئ :

<input type="time" id= "timeSyart >
<!-- والصحيح هو -->
<input type="time" id= "timeSyart" >

ويمكن اضافة القيمة المضافة لمتغير بالشكل التالي :

<input type="time" id="timeSyart" />
<script>
  // نعرف المتغير
  let myTime;
  // input نقوم بجلب الـ 
  const myTimeInput = document.getElementById("timeSyart")
  //input نضيف وظيفة لتحدث عند تغير قينة ال
  myTimeInput.addEventListener("change", function (e) {
    //للمتغير input نقوم بإسناد قيمة الـ 
    myTime = e.target.value
    console.log(myTime); // سيطبع الوقت الذي يتم اختياره
  })
</script>

ويمكنك المعرفة اكثر عن معالجة الاحداث في جافاسكريبت من هنا 

  بتاريخ On 16‏/8‏/2022 at 12:04 قال محمد عاطف11:

يمكنك إستخدام getElementById للحصول علي العنصر . ولإستخدام القيمة المختارة بواسطة العنصر يمكنك إستخدام .value 

document.getElementById("timeSyart").value

 

ويمكنك إستخدام الأحداث وبهذا تستطيع تنفيذ ما تريد كلما تم إختيار أو تعديل الوقت .

document.getElementById("timeSyart").addEventListener("input", (event)=>{
  //  هنا نقوم بكتابة الكود وسوف يتم تنفيذه كلما تم إختيار الوقت
  
  event.target.value // للحصول على قيمة الوقت
});

 

أظهر المزيد  

الله يبارك فيك يا أستاذ ويجزيك الخير

  بتاريخ On 17‏/8‏/2022 at 11:39 قال عابر سبيل2:

الله يبارك فيك يا أستاذ ويجزيك الخير

أظهر المزيد  

وإياكم أخي .

موجود لمساعدتك في أى وقت.

  بتاريخ On 17‏/8‏/2022 at 11:58 قال محمد عاطف11:

وإياكم أخي .

موجود لمساعدتك في أى وقت.

أظهر المزيد  

سؤال أخير استاذ كيف استطيع اجراء عمليات حسابية على المدخلات بحيث اجمع الساعات مع الساعات والدقائق مع الدقائق 

  بتاريخ On 16‏/8‏/2022 at 12:06 قال عمر قره محمد:

لقد كتبت عنصر الـ html بشكل خاطئ :

<input type="time" id= "timeSyart >
<!-- والصحيح هو -->
<input type="time" id= "timeSyart" >

ويمكن اضافة القيمة المضافة لمتغير بالشكل التالي :

<input type="time" id="timeSyart" />
<script>
  // نعرف المتغير
  let myTime;
  // input نقوم بجلب الـ 
  const myTimeInput = document.getElementById("timeSyart")
  //input نضيف وظيفة لتحدث عند تغير قينة ال
  myTimeInput.addEventListener("change", function (e) {
    //للمتغير input نقوم بإسناد قيمة الـ 
    myTime = e.target.value
    console.log(myTime); // سيطبع الوقت الذي يتم اختياره
  })
</script>

ويمكنك المعرفة اكثر عن معالجة الاحداث في جافاسكريبت من هنا 

 

أظهر المزيد  

بارك الله فيك أستاذ ويجزيك ألف خير عن هذا المجهود

  بتاريخ On 17‏/8‏/2022 at 12:00 قال عابر سبيل2:

سؤال أخير استاذ كيف استطيع اجراء عمليات حسابية على المدخلات ب

حيث اجمع الساعات مع الساعات والدقائق مع الدقائق 

أظهر المزيد  

هناك اكثر من طريقة أخي . حيث ان القيمة الخاصة بالعنصر من نوع time هى سلسلة نصية وليست من نوع وقت ولذلك فإن التعامل معها مختلف قليلا.

• القيمة اللتي تعود من العنصر عبارة عن hh:mm   وللحصول على قيمة الساعات والدقائق نستخدم الدالة split والتى تقوم بفصل السلسلة النصية إلي مصفوفة العنصر الاول هو الساعات والثانى هو الدقائق ويمكنك جمعهم كيفما تشاء.

document.getElementById('time').addEventListener('input',(event)=>{
            const time = event.target.value.split(':');
            console.log(time); // ['الساعات','الدقائق'] 
  			// time[0] توجد بها الساعات 
  			// time[1] توجد بها الدقائق 
  			// وللعمليات الحسابية تاكد من وضع علامة الجمع قبل المتغير للتحويل الى رقم
        })

• والطريقة الثانية هى إنشاء متغير من نوع تاريخ و هذا المتغير لديه الكثير من الدوال التي تقوم بتسهيل العمل على الوقت 

  document.getElementById('time').addEventListener('input',(event)=>{
              const time = event.target.value;
              var target = new Date("2022-01-01 " + time); // هنا نقوم بكتابة اى تاريخ فقط لانشاء المتغير وقيمته غير مهمة 
              console.log( target.getMinutes(),target.getHours());
   			// بعد أن قمنا بإنشاء المتغير الخاص بالتاريخ يمكننا استخدام الدوال التالية للحصول على الوقت 
    			// getMinutes للحصول على الدقائق الدالة 
    			// getHours للحصول على الساعات الدالة 
          })