如何使用javascript从datepicker上的所选日期获取星期几

时间:2018-03-19 10:29:13

标签: javascript jquery html html5 datepicker

如何从datepicker上的所选日期获取星期几,如果选定的日期日是星期六或星期日显示openstatus1,则显示openstatus

的JavaScript

$("#datepicker").datepicker({ 
        autoclose: true, 
        todayHighlight: true
}).on('changeDate', function(e) {
    if(e.date && e.date.GetDay()==6 && e.date.GetDay()==7) {
        $('.openstatus').toggle();
    } else {
        $('.openstatus1').toggle();
    }
});

我的表单

<div id="datepicker" class="input-group" data-date-format="mm-dd-yyyy">
<input class="form-control" name="Date" type="text" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<div class="openstatus">

    <select name="ResTime" class=" selectpicker">
        <option  selected="selected" value="select time">Select Time</option>
        <option value="10:30am">10:30 am</option>
        <option value="11:00am">11:00 am</option>
        <option value="11:30am">11:30 am</option>
        <option value="12:00pm">12:00 pm</option>
        <option value="12:30pm">12:30 pm</option>
        <option value="1:00pm">1:00 pm</option>
        <option value="1:30pm">1:30 pm</option>
        <option value="2:00pm">2:00 pm</option>
        <option value="2:30pm">2:30 pm</option>
        <option value="3:00pm">3:00 pm</option>
        <option value="3:30pm">3:30 pm</option>
        <option value="4:00pm">4:00 pm</option>
        <option value="4:30pm">4:30 pm</option>
        <option value="5:00pm">5:00 pm</option>  
    </select>

</div>
<div class="openstatus1">

    <select name="ResTime" class="selectpicker">
        <option  selected="selected" value="select time">Select Time</option>
        <option value="8:00am">8:00 am</option>
        <option value="8:30am">8:30 am</option>
        <option value="9:00am">9:00 am</option>
        <option value="9:30am">9:30 am</option>
        <option value="10:00am">10:00 am</option>
        <option value="10:30am">10:30 am</option>
        <option value="11:00am">11:00 am</option>
        <option value="11:30am">11:30 am</option>
        <option value="12:00pm">12:00 pm</option>
        <option value="12:30pm">12:30 pm</option>   
    </select>

</div>

1 个答案:

答案 0 :(得分:0)

在javascript中,星期日的GetDay()为0,而不是7。

  

getDay()方法根据本地时间返回指定日期的星期几,其中0表示星期日。

     

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay

你还在检查一个值是否= = 6 == 7,它永远不会,所以你需要更改为

所以你的代码应该是:

$("#datepicker").datepicker({ 
    autoclose: true, 
    todayHighlight: true
}).on('changeDate', function(e) {
    if(e.date && (e.date.GetDay() == 6 || e.date.GetDay() == 0)) {
        $('.openstatus').toggle();
    } else {
        $('.openstatus1').toggle();
    }
});

您会发现下一个问题是.toggle()只会切换您选择的项目。您可以使用布尔标志进行切换,但有时更清楚明确,因此显示/隐藏您想要的内容,给出:

$("#datepicker").datepicker({ 
    autoclose: true, 
    todayHighlight: true
}).on('changeDate', function(e) {
    if(e.date && (e.date.GetDay() == 6 || e.date.GetDay() == 0)) {

        // show hide .openstatus/.openstatus1 as required (ie might need to swap these two)
        $('.openstatus').show();
        $('.openstatus1').hide();
    }
    else {
        $('.openstatus').hide();
        $('.openstatus1').show();
    }
});