文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用Javascript在下拉列表中显示时间列表？

问如何使用Javascript在下拉列表中显示时间列表？
EN

Stack Overflow用户

提问于 2019-06-18 04:51:54

回答 2查看 103关注 0票数 1

我想显示一个时间列表下拉时间间隔30分钟，并根据日期。如果日期是今天和过去的时间，那么过去的时间将被禁用。如果日期不是今天，那么它将显示所有的时间表。

 let $select = jQuery("#s_time");
    
        for (let hr = 8; hr < 22; hr++) {
    
        let hrStr = hr.toString().padStart(2, "0") + ":";
    
        let val = hrStr + "00";
        $select.append('<option val="' + val + '">' + val + '</option>');
    
        val = hrStr + "30";
        $select.append('<option val="' + val + '">' + val + '</option>')
    
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
     <select name="s_time" id="s_time" class="form-control bmg-hrs-mins-input">
     </select>
    </div>

我希望已经过去的时间将被禁用，如果日期是今天，如果不是今天，那么它将显示所有的时间表。

javascript

jquery

time

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-18 05:05:59

您可以有条件地disable这些选项。尝试以下几点：

let $select = $("#s_time");
for (let hr = 8; hr < 22; hr++) {

  let hrStr = hr.toString().padStart(2, "0") + ":";

  let val = hrStr + "00";

  $select.append('<option val="' + val + '" ' + (new Date().getHours() >= hr ? 'disabled="disabled"' : '') + '>' + val + '</option>');

  val = hrStr + "30";
  $select.append('<option val="' + val + '" ' + (new Date().getHours() > hr || (new Date().getHours() >= hr && new Date().getMinutes() > 30) ? 'disabled="disabled"' : '') + '>' + val + '</option>')

}

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<div>
  <select name="s_time" id="s_time" class="form-control bmg-hrs-mins-input"></select>
</div>

票数 2

Stack Overflow用户

发布于 2019-06-18 05:06:51

首先，我们需要比较给定的日期和今天的日期。

Javascript代码

var GivenDate = '2019-06-20';
var CurrentDate = new Date();
GivenDate = new Date(GivenDate);

if(GivenDate > CurrentDate){
   // enable select field 
     $('#s_time').prop('disabled', false);
}else{
   // disable select field 
    $('#s_time').prop('disabled', true);
}

希望这会有所帮助！)

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56641945

复制

相似问题

问如何使用Javascript在下拉列表中显示时间列表？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript在下拉列表中显示时间列表？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用Javascript在下拉列表中显示时间列表？
EN