允许使用 bootstrap-datepicker 进行 1 天预订答案

【问题标题】：Allow 1 day booking with bootstrap-datepicker允许使用 bootstrap-datepicker 进行 1 天预订
【发布时间】：2015-02-10 05:18:07
【问题描述】：

我一直在使用 bootstrap-datepicker，但运气不佳。我有以下代码，但希望允许 1 天预订（即picker1 - 从日期 01/01/15 和picker 2 - 到日期 01/01/15。目前它只允许我选择第二天的选择初始起始日期后的日期。

目前 1 天预订被归类为 24 小时，超过 2 个日期（即从 15 年 1 月 1 日至 2015 年 2 月 1 日）将被归类为 1 天预订并按 1 天费率收费。

如何编辑下面的代码或 Bootstrap-Datepicker 的 Javascript 以允许 1 天的预订具有相同的往返日期？如果开始日期是第二天（即 01/01/15 - 02/01/15）按 2 天费率收费？

 var hire_from = null;
    var hire_to = null;

    var setPrice = function () {
        var oneDay = 24*60*60*1000;
        if (hire_from && hire_to) {
            var diffDays = Math.round(Math.abs((hire_from - hire_to)/(oneDay)));
            var price = diffDays*$("#enquiry_price").val();
            $("span#weekly_price").html("&pound; "+price.toFixed(0))
            var fee = price*$("#enquiry_discount").val()
            $("span#commission").html(fee.toFixed(0));
        }
    }


var initDatepickers = function(picker1, picker2){

            if($(picker1)[0] && $(picker2)[0]){
                var nowTemp = new Date();
                var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

                var checkin = $(picker1).datepicker({
                  onRender: function(date) {
                    return date.valueOf() < now.valueOf() ? 'disabled' : '';
                  },
                  format: 'dd/mm/yyyy'
                }).on('changeDate', function(ev) {
                  var newDate = new Date(ev.date)
                  newDate.setDate(newDate.getDate());
                  checkout.setValue(newDate);
                  hire_from = newDate;
                  setPrice();
                  $.post('/enquiries/presave', {'hire_from': $.datepicker.formatDate('dd/mm/yy', hire_from), authenticity_token: window._token}, function(data){}, 'json');
                  checkin.hide();
                  $(picker2)[0].focus();
                }).data('datepicker');

                var checkout = $(picker2).datepicker({
                    onRender: function(date) {
                        return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
                    }, format: 'dd/mm/yyyy'
                }).on('changeDate', function(ev) {
                  checkout.hide();
                  var newDate = new Date(ev.date)
                  hire_to = newDate;
                  $.post('/enquiries/presave', {'hire_to': $.datepicker.formatDate('dd/mm/yy', hire_to), authenticity_token: window._token}, function(data){}, 'json');
                  setPrice();
                }).data('datepicker');
            }
        };

感谢您的意见和帮助。

【问题讨论】：

看来您必须更改服务器端逻辑。在 javascript 代码中看不到任何域约束。
另外我希望$.post(... 是异步的，setPrice 是否需要以某种方式返回该帖子的值？
您使用的是哪个日期选择器？ bootstrap-datepicker 有几个版本。但是代码 $.datepicker.formatDate 看起来像 jQueryUI datepicker 实用程序方法。您是编写了所有这些代码，还是尝试将您在网络上找到的点点滴滴结合起来？不是坏事！只是想知道 - 您可能会遇到为 jqueryui 设计的代码与引导小部件一起使用的问题。
@sifriday 使用开发人员为我整理的代码。我目前对 Javascript 和 jQuery 的所有东西都无用，所以我正在努力解决所有问题！感谢您的想法。
祝你好运 :-) 你知道如何在你的 JS 控制台上查找错误吗？如果我是对的，您将看到一条错误消息，例如“无法读取未定义的属性 'formatDate'”这不太可能是您要解决的问题的一部分，但这可能意味着您正在向服务器。

标签： javascript twitter-bootstrap datepicker

【解决方案1】：

尝试将 picker2 onRender() 设置为：

return date.valueOf() < checkin.date.valueOf() ? 'disabled' : '';

使第二个日期选择器接受同一天。

然后使用：

var diffDays = Math.ceil(Math.abs((hire_to - hire_from + 1) /(oneDay)));

当天结账算一天，次日结账算2天

【讨论】：

Nick 你已经发现了你发送的第一段代码，非常感谢。不幸的是，第二段代码没有奏效，我正在尝试找出原因。价格仅为 0 英镑。
我的错，如果两个日期相同，那么 (hire_from-hire_to) 将为 0，整个表达式将为 0。您可能希望hire_to 总是在hire_from 之后至少一毫秒ceil() 函数将起作用。所以 var diffDays = Math.ceil(Math.abs((hire_to + 1 -hire_from)/(oneDay))); - 注意 to 和 from 应该是其他方式:)
不幸的是，这给了我 NaN 的 £ 价值。我玩了一下代码，这似乎工作正常：var diffDays = Math.ceil(Math.abs((hire_to - hire_from + 1) /(oneDay)));
我已更新答案以反映您的发现。从理论上讲，两者之间几乎没有区别。如果你得到 NaN，我很想看看hire_to 和hire_from 值是什么。例如警报（hire_to）；警报（hire_from）；在声明之前。谢谢。