JQuery Datepicker找到下一个禁用日期

当用户通过单击日历选择日期时，是否可以找到下一个/最近的禁用的未来日期。

从我所看到的禁用日期不会在标记中输出日期，它们只输出日期（我需要年，月，日），因此寻找下一个’ui-state-disabled’元素不会起作用。

Answer 1

AFIK， 没有官方资源可以在jQuery Datepicker中查找禁用日期。

然而， jQuery UI Datepicker是一个基于Javascript的库，总有一种解决方法。 以下是我尝试过的解决方法。

步骤1：

下面是一种在jQuery Datepicker中禁用日期列表的方法。

 var array = ["2014-03-14", "2014-03-18", "2014-03-16", "2014-04-01"] $('input').datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: function (date) { var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [array.indexOf(string) == -1] }, onSelect: function (date) { console.log(findNextDisabledDateWithinMonth(date)); } }); 

现在我的方法是在一个月内获得下一个禁用日期。

第2步：

 function findNextDisabledDateWithinMonth(date) { var currentDate = Number(date.split('-')[2]); var month = $('.ui-datepicker-title>.ui-datepicker-month').text(); //Number(date.split('-')[1]) var year = $('.ui-datepicker-title>.ui-datepicker-year').text(); //Number(date.split('-')[0]) var nextConsectiveDates = []; $.each($('.ui-state-disabled').find('.ui-state-default'), function (i, value) { var numericDate = +$(value).text(); if (currentDate < numericDate) { nextConsectiveDates.push(numericDate); } }); var nextDisabledDate = nextConsectiveDates[0] + "-" + month + "-" + year; return nextDisabledDate; } 

的jsfiddle

注意： 这仅适用于所选日期的月份

---

方法＃2

正如@ Salman A在评论中提到的那样，我觉得最好的办法是坚持下去。 由于我的方法将在一个月内受到限制。

这是一种解决问题的优雅方法。

 var array = ["2014-05-01", "2014-04-14", "2014-04-18", "2014-04-16"]; // Convert all those string dates into Date array var arrayAsDateObjects = convertStringToDateObject(array); $('input').datepicker({ dateFormat: 'yy-mm-dd', beforeShowDay: function (date) { var string = jQuery.datepicker.formatDate('yy-mm-dd', date); return [array.indexOf(string) == -1] }, onSelect: function (date) { alert(findNextDisabledDateWithinMonth(date).toDateString()); } }); //To find the next exact disabled date based on the selected date function findNextDisabledDateWithinMonth(date) { var splitDate = date.split("-"); var selectedDate = new Date(splitDate[0], Number(splitDate[1]) - 1, splitDate[2]); var nextDisabledDate = null; $.each(arrayAsDateObjects, function (i, ele) { if (selectedDate < ele) { nextDisabledDate = ele; return false; } else { nextDisabledDate = "No Disabled dates available"; } }); return nextDisabledDate; } //convert all the string dates to Date object function convertStringToDateObject(array) { var ls = []; $.each(array, function (i, ele) { var splitDate = ele.split("-"); var date = new Date(splitDate[0], Number(splitDate[1]) - 1, splitDate[2]); ls.push(date); }); // Sort the dates in ascending order(https://stackoverflow.com/a/10124053/1671639) ls.sort(function (a, b) { return a - b; }); return ls; } 

的jsfiddle

为了排序日期，我参考了@Phrogz的回答

Answer 2

我希望datepicker可以为此内置一个函数，但看起来并非如此。 所以我不得不查看我的禁用日期列表并确定列表中的答案，这是我试图避免的，因为列表很大。

Answer 3

这是我网站上日期选择器的一天。

  21  

你可以解析父td的点击吗？ 或者禁用日期也会删除点击事件中的父级？ 无论如何，这里有些东西可能会指向正确的方向。 未经测试，你可以摆弄它。 现在已经很晚了，我需要rest一下。

 $('.ui-datepicker-calendar a.ui-state-default').click(function() { var clickhandler = $(this).closest('td').next('td:has(a.ui-state-disabled)').attr('onclick'); var monthYear = clickhandler.replace(/^.*,?/,'').replace(/, this.*/,'').split(','); // do something with your monthYear array here });