【问题标题】:jQuery datepicker disable all dates per week but onejQuery datepicker 每周禁用所有日期,但一个
【发布时间】:2018-05-24 22:28:13
【问题描述】:

我想选择一个日期,假设我选择一个星期一,我希望只能在另一个日期选择器上选择星期一并禁用所有其他日期,换句话说我想选择 7 天的间隔在两个日期选择器之间。

我怎样才能做到这一点?

我试过这个:

beforeShowDay: function(date) {
  console.log('beforeShowDay');
  var day = date.getDay();
  return [day != day, ''];
},

但不确定它是否应该工作或者我应该将函数放在哪个日期选择器中。

更新:

var curday = "";
var unavailableDays = [];
var dateselected = "";

function ViewDay(date) {
    dmy = date.getDate() + "/" + (date.getMonth()+1) + "/" + date.getFullYear();
    day = date.getDay();
    if (date > dateselected) {
        if ($.inArray(day, unavailableDays) == -1) {
            return [false, "", "Unavailable"];
        } else {
            return [true, ""];
        }
    } else {
        return [false, "", "Unavailable"];
    }
}

$('#startdatesahasrara').datepicker({
    dateFormat: 'dd/mm/yy',
    minDate: 3,
    onSelect: function(e) {

        $('#enddatesahasrara').removeData("hasqtip");
        $('#enddatesahasrara').removeAttr("data-hasqtip");
        $('#enddatesahasrara').qtip("destroy", true);
        $('#enddatesahasrara').removeAttr('title');

        $('#enddatesahasrara').val('');
        unavailableDays = [];
        dateselected = new Date(e);
        curday = new Date(e).getDay();
        unavailableDays.push(curday);
        console.log('trigger');
    }
});

$("#enddatesahasrara").datepicker({
    dateFormat: 'dd/mm/yy',
    showAnim: "slideDown",
    minDate: 0,
    beforeShowDay: ViewDay
});

【问题讨论】:

    标签: javascript jquery date datepicker jquery-ui-datepicker


    【解决方案1】:

    希望有帮助!

    var curday = "";
    var unavailableDays = [];
    var dateselected = "";
    $('.datepicker1').datepicker({
      dateFormat: 'yy-mm-dd',
      onSelect: function(dateText) {
        $('.datepicker').val('');
        unavailableDays = [];
        dateselected = new Date(dateText);
        curday = new Date(dateText).getDay();
        unavailableDays.push(curday);
      }
    });
    
    $(".datepicker").datepicker({
      dateFormat: 'yy-mm-dd',
      showAnim: "slideDown",
      minDate: 0,
      beforeShowDay: ViewDay //$.datepicker.noWeekends
    });
    
    
    function ViewDay(date) {
      dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
      day = date.getDay();
      if (date > dateselected) {
        if ($.inArray(day, unavailableDays) == -1) {
          return [false, "", "Unavailable"];
        } else {
          return [true, ""];
        }
      } else {
        return [false, "", "Unavailable"];
      }
    }
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js"></script>
    
    <input type="text" class="datepicker1" />
    <input type="text" class="datepicker" />

    【讨论】:

    • 你好,当我测试你的例子时它工作了,但是当我尝试在我的项目上实现时,它没有,你能看看我更新的代码吗?
    • 使用日期格式作为 'dd/MM/yy' 而不是 'dd/mm/yy'。检查这个fiddle
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-11-09
    • 2017-08-04
    • 2011-04-12
    • 2014-05-01
    • 2013-06-28
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多