我的表单中有两个选择字段:
对于Mo到Fr,选择间隔时间为09:00-17:00。
对于Sa间隔为09:00-14:00。
因为苏不是。
如果今天是Mo并且当前时间是11:17 AM-
>我希望只能选择12:00 PM-17:00之间的时间。
如果今天是Sa,而当前时间是13:00-
>我希望只能选择14:00-14:00之间的时间。
如果今天是2020
年11月29日,并且我选择1/12/2020- >我希望能够选择时间间隔09:00-17:00。
这可能在javascript中on('change',function(){...
吗?
<div class="form-group">
<label class="control-label" for="data_cmd">Dată ridicare*</label>
<input id="data_cmd" type="date" class="form-control" data-date="" data-date-format="Y-m-d" name="data_cmd" placeholder="mm/dd/yyyy"/>
</div>
<div class="form-group">
<label for="ora_ridicare">Ora ridicare*<br></label>
<select class="form-control" type="text" id="ora_ridicare" name="ora_ridicare"/>
<option value="">00:00</option>
<?php
for($hours=9; $hours<18; $hours++)
for($mins=0; $mins<60; $mins+=60)
echo '<option>'.str_pad($hours,2,'0',STR_PAD_LEFT).':'
.str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';
?>
</select>
</div>
<div class="container contact">
<form action="" method="post" id="form" enctype="multipart/form-data" accept-charset="iso-8859-2">
<div class="contact-form">
<div class="form-group">
<label class="control-label" for="data_cmd">Dată ridicare*</label>
<input id="data_cmd" type="date" class="form-control" data-date="" data-date-format="Y-m-d" name="data_cmd" placeholder="mm/dd/yyyy"/>
</div>
<div class="form-group">
<label for="ora_ridicare">Ora ridicare*</label>
<select class="form-control" type="text" id="ora_ridicare" name="ora_ridicare"/>
<option value="">00:00</option>
<?php
for($hours=9; $hours<18; $hours++)
for($mins=0; $mins<60; $mins+=60)
echo '<option>'.str_pad($hours,2,'0',STR_PAD_LEFT).':'
.str_pad($mins,2,'0',STR_PAD_LEFT).'</option>';
?>
</select>
</div>
<div class="form-group">
<div class="col-sm-offset-2">
<button type="submit" class="btn btn-default" name="sendEmail">Trimite</button>
<button type="reset" class="btn btn-secondary" value="Reset Button" onclick="document.location.reload();">Resetează</button>
</div>
</div>
<div id="overlay" style="display:none;">
<div class="spinner"></div>
<br/>
Loading...
</div>
</div>
</form>
</div>
我的方式
const myForm = document.forms['form-name']
const padHM = (h,m) => `${h.toString(10).padStart(2,'0')}:${m.toString(10).padStart(2,'0')}`
const DteRange=
{ Monday : { first:'09:00', last:'17:00' }
, Tuesday : { first:'09:00', last:'17:00' }
, Wednesday : { first:'09:00', last:'17:00' }
, Thursday : { first:'09:00', last:'17:00' }
, Friday : { first:'09:00', last:'17:00' }
, Saturday : { first:'09:00', last:'14:00' }
, Sunday : { first:'25:00', last:'' }
}
;
// prepare Select named ora_ridicare
for( let hourX=9;hourX<19; ++hourX )
for(minsX=0; minsX<60; minsX+=60) // ?
{
let opt = new Option(padHM(hourX,minsX),padHM(hourX,minsX))
opt.disabled = true
myForm.ora_ridicare.add(opt)
}
myForm.data_cmd.onchange = () =>
{
let dteDay = myForm.data_cmd.valueAsDate.toLocaleDateString('en-GB', { weekday: 'long' })
myForm.ora_ridicare.querySelectorAll('option').forEach(opt =>
{
opt.disabled = opt.value < DteRange[dteDay].first || opt.value > DteRange[dteDay].last
})
myForm.ora_ridicare.value = '00:00' // reset on top..
}
<form name="form-name"> <!-- use a form name !-->
<!-- ... -->
<div class="form-group">
<label class="control-label" for="data_cmd">Dată ridicare*</label>
<input id="data_cmd" type="date" class="form-control" data-date="" data-date-format="Y-m-d" name="data_cmd" placeholder="mm/dd/yyyy"/>
</div>
<br> <!-- just for more readable test-->
<div class="form-group">
<label for="ora_ridicare">Ora ridicare*<br></label>
<select class="form-control" type="text" id="ora_ridicare" name="ora_ridicare"/>
<option value="00:00" selected disabled>Choose hour : </option>
</select>
</div>
</form>
当然。我正在做一些测试。再一次非常感谢你。