Warm tip: This article is reproduced from serverfault.com, please click

php-javascript下拉列表选择时间限流当前

(php - javascript dropdown select time conditioned current)

发布于 2020-11-29 13:51:38

我的表单中有两个选择字段:

  • 一个用于选择日期
  • 其他的选择时间

对于MoFr,选择间隔时间为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
1129日,并且我选择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>
Questioner
Cristian-Angelo Lungu
Viewed
11
Mister Jojo 2020-11-29 23:13:58

我的方式

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>