【问题标题】:JQuery Datepicker - setting MinDate based on current timeJQuery Datepicker - 根据当前时间设置 MinDate
【发布时间】:2015-01-15 10:29:31
【问题描述】:

我正在使用 JQuery Datepicker 让客户选择交货日期。我希望能够检查客户是否在中午之前订购,如果是,则可以在第二天交货。如果他们在中午之后下订单,则无法在第二天交货,因此无法选择当天。

我有一些代码可以检查当前时间,但是如何在顶部的设置中将此值添加到 MinDate 中?

谢谢!

<div class="delivery-date">
  <p>
    <label for="date">Select a date for delivery below:</label>
    <input id="date" type="text" name="properties[delivery-date]" readonly="readonly" style="background:white; width:30%" class="required" data-error="Please choose a delivery date." />
  </p>
</div>

<script>
jQuery(function() {
  jQuery("#date").datepicker( { 
    // minDate: new Date(((new Date).getTime() + 49 * 60 * 60 * 1000) ), 
    minDate: checkBeforeNoon,
    maxDate: "+2M", // show up to 2 months
    dateFormat: 'dd/mm/yy',
    beforeShowDay: available_delivery_dates 
  } );
});
  

/*==========  check time  ==========*/

// if time before 12pm, offer next day delivery

function checkBeforeNoon(nextDayDelivery){

  var startTime = '12:00 AM';
  var endTime = '12:00 PM';

  var curr_time = getval();


  if (get24Hr(curr_time) > get24Hr(startTime) && get24Hr(curr_time) < get24Hr(endTime)) {
      // before 12pm - next day delivery available
      var nextDayDelivery = '+1d';

  } else {
     // after 12pm - next day delivery unavailable
     var nextDayDelivery = '+2d';
  }

  function get24Hr(time){
      var hours = Number(time.match(/^(\d+)/)[1]);
      var AMPM = time.match(/\s(.*)$/)[1];
      if(AMPM == "PM" && hours<12) hours = hours+12;
      if(AMPM == "AM" && hours==12) hours = hours-12;
      
      var minutes = Number(time.match(/:(\d+)/)[1]);
      hours = hours*100+minutes;
      console.log(time +" - "+hours);
      return hours;
  }

  function getval() {
      var currentTime = new Date()
      var hours = currentTime.getHours()
      var minutes = currentTime.getMinutes()

      if (minutes < 10) minutes = "0" + minutes;

      var suffix = "AM";
      if (hours >= 12) {
          suffix = "PM";
          hours = hours - 12;
      }
      if (hours == 0) {
          hours = 12;
      }
      var current_time = hours + ":" + minutes + " " + suffix;

      return current_time;

  }
}

/*==========  Make sundays always unavailable  ==========*/


function available_delivery_dates(date) {

  var sunday = 0; // unavailable for delivery
  var mon = 1
  var tue = 2;
  var wed = 3;
  var thu = 4;
  var fri = 5;
  var sat = 6;
  
  var day_of_week = date.getDay();
  var not_sun = day_of_week > 0;
  
  if(not_sun){
    var day = date.getDate();
    return [true, ''];  
  }
  else{
    // all else - do not allow
    return [false, ' ', 'Delivery is unavailable on this day'];
  }

  
  
}
  
</script>

【问题讨论】:

  • 您将minDate设置为函数而不是返回值,您需要调用您的函数...minDate: checkBeforeNoon(),
  • 谢谢,但这不起作用
  • 还有beforeShowDay: available_delivery_dates()
  • 这实际上完全破坏了日期选择器。它只适用于 'available_delivery_dates' 和 minDate 作为“+2D”,但这个 minDate 显然不是动态的
  • 你没有从checkBeforeNoon()返回任何东西

标签: javascript jquery datepicker


【解决方案1】:

你已经完成了。您只需向检查是否是中午的函数添加一个返回值。如果您想告知客户现在可以提供一日送达服务,您可以通过在您的函数中添加日志来实现。这是您修改的代码:

http://jsfiddle.net/graphicfreedom/L3tz8243/1/

function checkBeforeNoon(nextDayDelivery){
      var startTime = '12:00 AM';
      var endTime = '12:00 PM';
      var curr_time = getval();

  if (get24Hr(curr_time) > get24Hr(startTime) && get24Hr(curr_time) < get24Hr(endTime)) {
      // before 12pm - next day delivery available
      var nextDayDelivery = '+1d';
      $("#log").html('Next day delivery available! Order before noon!'); //show response to user
  } else {
     // after 12pm - next day delivery unavailable
     var nextDayDelivery = '+2d';
      $("#log").html('Next day delivery NOT available! It is already past noon :('); //show response to user
  }
    return nextDayDelivery;
}

此外,您可以轻松地分离功能。它更易于阅读,并且您始终可以从函数中调用函数。希望这会有所帮助!

【讨论】:

  • 感谢您的帮助,但它在 IE 和 Safari 中返回错误“无法获取未定义或空引用的属性 '1'”函数 get24Hr(time) - 这就是您的问题看到了吗?
  • 哦 - 这是因为我试图使用服务器日期和时间,而不是您使用的客户端浏览器时间......
【解决方案2】:

删除if-else 块中nextDayDelivery 之前的var,因为您将重新声明它。然后返回nextDayDelivery。此外,修复 getVal() 方法中缺少的分号也是一个好主意。

function checkBeforeNoon(nextDayDelivery) {

    var startTime = '12:00 AM';
    var endTime = '12:00 PM';

    var curr_time = getval();


    if (get24Hr(curr_time) > get24Hr(startTime) && get24Hr(curr_time) < get24Hr(endTime)) {
        // before 12pm - next day delivery available
        nextDayDelivery = '+1d';  // REMOVE var FROM HERE

    } else {
        // after 12pm - next day delivery unavailable
        nextDayDelivery = '+2d';  // REMOVE var FROM HERE
    }

    function get24Hr(time) {
        var hours = Number(time.match(/^(\d+)/)[1]);
        var AMPM = time.match(/\s(.*)$/)[1];
        if (AMPM == "PM" && hours < 12) hours = hours + 12;
        if (AMPM == "AM" && hours == 12) hours = hours - 12;

        var minutes = Number(time.match(/:(\d+)/)[1]);
        hours = hours * 100 + minutes;
        console.log(time + " - " + hours);
        return hours;
    }

    function getval() {
        // ADD MISSING SEMI-COLONS ON THE FOLLOWING 3 LINES
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();

        if (minutes < 10) minutes = "0" + minutes;

        var suffix = "AM";
        if (hours >= 12) {
            suffix = "PM";
            hours = hours - 12;
        }
        if (hours == 0) {
            hours = 12;
        }
        var current_time = hours + ":" + minutes + " " + suffix;

        return current_time;
    }

    return nextDayDelivery;  // ADD RETURN STATEMENT
}

【讨论】:

  • 感谢您的帮助,但它在 IE 和 Safari 中返回错误“无法获取未定义或空引用的属性 '1'”函数 get24Hr(time) - 这就是您的问题看到了吗?
  • 哦 - 这是因为我试图使用服务器日期和时间,而不是您使用的客户端浏览器时间......
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-06-11
  • 2013-01-26
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2011-07-04
  • 1970-01-01
相关资源
最近更新 更多