javascript – Bootstrap Datepicker,maxdate,距离第一个日期选择2天

发布时间:2020-08-01 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了javascript – Bootstrap Datepicker,maxdate,距离第一个日期选择2天脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
让我们举例说,我在5月10日在Check-In中进行了第一次选择,它会自动进入Check-Out部分,同时选择5月10日,其余时间可用.我正在尝试做的是让选定的日期和接下来的2天可用,而不是其余的.

如果您对文档感到好奇,我正在使用的Bootstrap Datepicker的URL链接是:http://www.eyecon.ro/bootstrap-datepicker/

我现在拥有的JSFiddle链接在这里:http://jsfiddle.net/9f6xhrm9/2/

如果上面的JSFiddle链接不适合您,那么可能是因为您的浏览器强制使用https,使用chrome不会导致此问题,除非我将其设置为https.所以要么切换到chrome,要么就是与JSFiddle链接相关的文件 – 位于下面:

http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js

http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css

http://getbootstrap.com/dist/js/bootstrap.min.js

http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css

虽然因为需要在这里提供JSFiddle的相关代码,我也在下面发布了:

HTML

<input type="text" id="txtCheckIn" placeholder="* Check-In Date (M/D/Y)" readonly>
<input type="text" id="txtCheckOut" placeholder="* Check-Out Date (M/D/Y)" readonly>

JS

$(function(){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(),nowTemp.getMonth(),nowTemp.getDate()+7);
$('#txtCheckOut').attr('disabled','disabled');
var checkin = $('#txtCheckIn').datepicker({onRender: function(date) {return date.valueOf() < now.valueOf() ? 'disabled' : '';}})
.on('changeDate',function(ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
        $('#txtCheckOut').removeAttr('disabled');
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate());
        checkout.setValue(newDate);
    }
    checkin.hide(); $('#txtCheckOut')[0].focus();
})
.data('datepicker');
var checkout = $('#txtCheckOut').datepicker({onRender: function(date) {
    if (checkin.date.valueOf()) {return date.valueOf() < now.valueOf() ? 'disabled' : '';}
    else {return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';}
}})
.on('changeDate',function(ev) {checkout.hide();})
.data('datepicker');});

为了提供帮助,我知道答案的一部分涉及使用类似下面的代码:

date.valueOf() > now.valueOf() ? 'disabled' : ''

最有可能放在这段代码中:

if (ev.date.valueOf() > checkout.date.valueOf()) {
        $('#txtCheckOut').removeAttr('disabled');
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate());
        checkout.setValue(newDate);
      }

解决方法

查看您正在使用的日期选择器,我看到正在积极维护 eternicode’s fork.我不确定区别是什么,但 in the docs eternicode的版本很有帮助.

关键是在选项中设置startDate和endDate.

$(function () {
    var checkout = $('#txtCheckOut').datepicker();
    var checkin = $('#txtCheckIn').datepicker({
        startDate: "today"
    }).on('changeDate',function(event) {
        var newDate = new Date(event.date)
        newDate.setDate(newDate.getDate() + 2)
        checkout.datepicker("setStartDate",event.date);
        checkout.datepicker("setEndDate",newDate);
    });
});

见工作fiddle

总结

以上是脚本之家为你收集整理的javascript – Bootstrap Datepicker,maxdate,距离第一个日期选择2天全部内容,希望文章能够帮你解决javascript – Bootstrap Datepicker,maxdate,距离第一个日期选择2天所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478
脚本之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!