バニラJSの日付と時間ピッカー
24516 ワード
シナリオ
Time picker
will be a drop down with time from 00:00 to 23:30 with periods of 30 mins gap like 09:00,09:30,10:00,10:30...
Date picker
will be a regular date picker but if current date is chosen then all times before current time will be greyed out in the time picker.
HTMLを最初に得る
<input type="date" name='datepicker' id='datepicker'>
<select name='timepicker' id='timepicker'>
<option value="00.00">00.00 AM</option>
<option value="00.30">00.30 AM</option>
<option value="01.00">01:00 AM </option>
<option value="01.30">01:30 AM</option>
<option value="02.00">02:00 AM</option>
<option value="02.30">02:30 AM</option>
<option value="03.00">03:00 AM</option>
<option value="03.30">03:30 AM</option>
<option value="04.00">04:00 AM</option>
<option value="04.30">04:30 AM</option>
<option value="05.00">05:00 AM</option>
<option value="05.30">05:30 AM</option>
<option value="06.00">06:00 AM</option>
<option value="06.30">06:30 AM</option>
<option value="07.00">07:00 AM</option>
<option value="07.30">07:30 AM</option>
<option value="08.00">08:00 AM</option>
<option value="08.30">08:30 AM</option>
<option value="09.00">09:00 AM</option>
<option value="09.30">09:30 AM</option>
<option value="10.00">10:00 AM</option>
<option value="10.30">10:30 AM</option>
<option value="11.00">11:00 AM</option>
<option value="11.30">11:30 AM</option>
<option value="12.00">12:00 PM</option>
<option value="12.00">12:30 PM</option>
<option value="13.30">13:30 PM</option>
<option value="14.00">13:30 PM</option>
<option value="14.30">14:30 PM</option>
<option value="15.00">15:30 PM</option>
<option value="15.30">15:30 PM</option>
<option value="16.00">16:30 PM</option>
<option value="16.30">16:30 PM</option>
<option value="17.00">17:30 PM</option>
<option value="17.30">17:30 PM</option>
<option value="18.00">18:30 PM</option>
<option value="18.30">18:30 PM</option>
<option value="19.00">19:30 PM</option>
<option value="19.30">19:30 PM</option>
<option value="20.00">20:30 PM</option>
<option value="20.30">20:30 PM</option>
<option value="21.00">21:30 PM</option>
<option value="21.30">21:30 PM</option>
<option value="22.00">22:20 PM</option>
<option value="22.30">22:30 PM</option>
<option value="23.00">23:00 PM</option>
<option value="23.30">23:30 PM</option>
</select>
次のような簡単なUIを得るべきです.さて、JSパート:
const timePicker=document.querySelector('#timepicker');
const datePicker=document.querySelector('#datepicker');
datePicker.addEventListener('change',function(e){
console.log('checking to disable dates');
checkAndUpdateTimePicker();
timePicker.value='';
});
function checkAndUpdateTimePicker(){
if(new Date(datePicker.value).toLocaleDateString()==new Date().toLocaleDateString()){
document.querySelectorAll('#timepicker option').forEach(opt=>{
console.log(opt.value);
let optHour=opt.value.split('.')[0];
let optMinute=opt.value.split('.')[1];
let currentHour=new Date().getHours();
let currentMinute=new Date().getMinutes();
if(optHour<currentHour){
opt.disabled=true;
opt.dataset.description ='Please scroll to choose a different time, this time has passed.';
}
if(optHour==currentHour && optMinute<currentMinute){
opt.disabled=true;
}
});
}else{
document.querySelectorAll('#timepicker option').forEach(opt=>{
opt.disabled=false;
});
}
}
JSを追加したら、このような振る舞いをすることができます.1 -現在の時刻の前に現在の日付として日付を選択したときにグレーアウトされます.
2 -ときに、将来のすべてのタイムスロットを利用可能とする必要があります日付を選択します.
常に改善の余地がある
1 -動的にハードコーディングの代わりに時間を読み込むことができます.
function populateTimePicker(){
for(let i=0;i<24;i++){
let opt=document.createElement('option');
if(i===24){
opt.value='00.00';
}
else if(i.toString().length===1){
opt.value='0'+i+'.00';
opt.text='0'+i+'.00 AM';
}
else{
opt.value=i+'.00';
if(i<12){
opt.text=i+'.00 AM';
}
else{
opt.text=i+'.00 PM';
}
}
timePicker.appendChild(opt);
let opt30=document.createElement('option');
opt30.value=opt.value.split('.')[0]+'.30';
opt30.text=opt.text.split('.')[0]+'.30 '+opt.text.split('.')[1].split(' ')[1];
timePicker.appendChild(opt30);
}
}
2 -あなたは現在の日付の前に日付をすることができます現在の日付を設定して無効になって動的にJSで.次のコード行を追加することで実現できます.datePicker.min=`${new Date().getFullYear()}-${(new Date().getMonth()+1).toString().length==1?'0':''}${new Date().getMonth()+1}-${new Date().getDate().toString().length==1?'0':''}${new Date().getDate()}`;
あなたの時間をありがとう.Reference
この問題について(バニラJSの日付と時間ピッカー), 我々は、より多くの情報をここで見つけました https://dev.to/anilkhandei/date-time-picker-in-vanilla-js-250hテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol