javascript 下拉菜单 select 时间调节电流

Question

我的表单中有两个 select 字段：

一个 select 日期,
其他 select time.

对于Mo到Frselect间隔时间为09:00-17:00.
对于 Sa 区间是 09:00 - 14:00.
因为 Su 是 none.

如果今天是 Mo 并且当前时间是 11:17AM
-> 我希望 select 时间只能来自 12:00PM - 17:00.
如果今天是 Sa 并且当前时间是 13:00
-> 我希望 select 时间只能从 14:00 - 14:00.

如果今天是 29/11/2020 而我 select 1/12/2020
-> 我希望能够 select 时间间隔 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>

Answer 1

我的方法..

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>

Answer 2

关于你问题的第二部分

If today is Mo and current time is 11:17AM
-> I want to be able to select time only from 12:00PM - 17:00.
If today is Sa an d current time is 13:00
-> I want to be able to select time only from 14:00 - 14:00.

If today is 29/11/2020 and I select 1/12/2020
-> I want to be able to select time interval 09:00 - 17:00.

只需更改我的这部分代码：

myForm.data_cmd.onchange = () =>
  {
  let inputDate = myForm.data_cmd.valueAsDate
    , dteDay    = inputDate.toLocaleDateString('en-GB', { weekday: 'long' })
    , h_First   = DteRange[dteDay].first 
    , h_Last    = DteRange[dteDay].last 
    , now_DT    = new Date()
    , todayDate = now_DT.toLocaleDateString('en-GB').split('/').reverse().join('-')
    , chooseDay = inputDate.toLocaleDateString('en-GB').split('/').reverse().join('-')
    ;
  if (chooseDay < todayDate) h_First = '25:00'
  if (chooseDay === todayDate)
    {
    let tim = now_DT.toLocaleTimeString('en-GB', { hour12: false, hour: '2-digit', minute: '2-digit' })
    if (tim > h_First) h_First = tim
    }
  myForm.ora_ridicare.querySelectorAll('option').forEach( opt =>
    {
    opt.disabled = opt.value < h_First || opt.value > DteRange[dteDay].last
    })
  myForm.ora_ridicare.value = '00:00' // reset on top..
  }

Answer 3

新版本（全JS）约

If current time is 9:30 I need to be able to select from list only from 11:00. If current time is 9:59, select 11:00. If current time is max 10:05, select 11:00, over 10:05, select 12:00.

希望您意识到我所做的非常出色 = Whosebug 不是提供免费代码的地方...

const myForm = document.forms['form-name']
  ,   _hhmm   = (h,m) => `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`
  ,   daysHours =
    { 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:''      }
    }
  ;
for( let hourX=9; hourX<19; ++hourX )  // prepare Select named ora_ridicare
  for(minsX=0; minsX<60; minsX+=60)   // ?
    {
    let opt      = new Option(_hhmm(hourX,minsX),_hhmm(hourX,minsX))
    opt.disabled = true
    myForm.ora_ridicare.add(opt)
    }

myForm.data_cmd.onchange =_=>
  {
  let inputDate = myForm.data_cmd.valueAsDate
    , in_Wday   = inputDate.toLocaleDateString('en-GB',{weekday:'long'})
    , hhmm_1st  = daysHours[in_Wday].first 
    , now_D_T   = new Date()
    , now_YMD   = now_D_T.toLocaleDateString('en-GB').split('/').reverse().join('-')    // change dd/mm/yyyy
    , in_YMD    = inputDate.toLocaleDateString('en-GB').split('/').reverse().join('-') //     to yyyy-mm-dd
    ;
  if (in_YMD < now_YMD) hhmm_1st = '25:00'
  if (in_YMD === now_YMD)
    {
    let [hh,mm] = now_D_T.toLocaleTimeString('en-GB',{hour12:false,hour:'2-digit',minute:'2-digit'}).split(':')
      , tim     = (mm > '05') ? _hhmm(+hh +2, 0) : _hhmm(+hh +1, 0)
      ;
    if (tim > hhmm_1st) hhmm_1st = tim
    }
  myForm.ora_ridicare.querySelectorAll('option').forEach( opt =>
    {
    opt.disabled = opt.value < hhmm_1st || opt.value > daysHours[in_Wday].last
    })
  myForm.ora_ridicare.value = '00:00' // reset on top..
  }

javascript 下拉菜单 select 时间调节电流

javascript dropdown select time conditioned current

javascript

php

time

date

drop-down-menu