logo标签列表

Jquery UI日期选择器。禁用日期数组

jquery-uijquery-ui-datepicker
90

我一直在寻找解决我的Jquery UI日期选择器问题的方法，但是没有成功。这里是我正在尝试做的事情...

我有一个应用程序，在其中进行了一些复杂的PHP操作，以返回我想要从Jquery UI日期选择器中屏蔽的日期的JSON数组。我正在返回这个数组：

["2013-03-14","2013-03-15","2013-03-16"]

有没有一种简单的方式，可以直接说：从日期选择器中屏蔽这些日期？

我已经阅读了UI文档，但是没有找到任何有用的帮助。有人有什么想法吗？

禁用特定日期的jQuery将特定日期禁用在jQuery中 - Sen Jacob
jquery-ui日期选择器禁用特定天数 - Sen Jacob
jQuery-UI日期选择器能否禁用周六、周日和节假日？ - Sen Jacob
网页日期选择器，只允许点击特定日期。 - Sen Jacob
有人能指引我到类似的问题，但使用Materialize日期选择器吗？ - naz786
7个回答
224
你可以使用beforeShowDay来实现这个功能。
下面的例子禁用了2013年3月14日至2013年3月16日的日期。
var dates = ['2013-03-14', '2013-03-15', '2013-03-16'];

$('input').datepicker
({
    beforeShowDay: function(date)
    {
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [dates.indexOf(string) == -1];
    }
});

演示：Fiddle
1
我有点明白你的意思。但是我该如何将我的日期数组融入进去呢？ - Daniel White
14
哇，你是个天才兄弟！我不知道为什么这个问题已经被问了无数次，而这个答案还没有出现在Stack Overflow的帖子里。所有上面发布的例子都太复杂了，而这个回答又简单明了。五星好评！谢谢。 - Daniel White
我已经下载了代码http://jqueryui.com/download/#!version=1.10.3&components=1000000000001000000000000000000000，但当我将上述代码集成到其中时，它没有起作用，请帮忙。 - Sam
1
一个赞不够。有些人把事情搞得比必要的还要复杂。非常感谢你提供了一个简单、可用的代码片段。非常有用。 - kingsfoil
7
如果你还想在这些自定义日期之外排除周末，请将返回行替换为以下内容：return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);。 - Pablo S G Pacheco
显示剩余3条评论
20

IE 8没有indexOf函数，因此我使用了jQuery的inArray替代。

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
    }
});
6
你会惊讶于仍在使用它的人数有多少。 - euther
3
这是因为IE8是最新的IE浏览器，可以在WinXP（SP3）上运行。 - JosephK
然而，它支持在字符串上使用indexOf()函数来查找子字符串在该字符串中的位置。 - Wezy
12
如果你想要屏蔽星期日（或其他日期），可以使用以下代码，包括数组日期：

如果你也想屏蔽星期天（或其他日期），可以使用以下代码：

jQuery(function($){

    var disabledDays = [
       "27-4-2016", "25-12-2016", "26-12-2016",
       "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
    ];

   //replace these with the id's of your datepickers
   $("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
      beforeShowDay: function(date){
         var day = date.getDay();
         var string = jQuery.datepicker.formatDate('d-m-yy', date);
         var isDisabled = ($.inArray(string, disabledDays) != -1);

         //day != 0 disables all Sundays
         return [day != 0 && !isDisabled];
      }
   });
});
1
如果您想在jQuery日期选择器中禁用特定日期，则这里为您提供简单的演示。
<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>
1
$('input').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
       return [ array.indexOf(string) == -1 ]
   }
});
1

beforeShowDate 对我无效，所以我自己开发了解决方案:

$('#embeded_calendar').datepicker({
               minDate: date,
                localToday:datePlusOne,
               changeDate: true,
               changeMonth: true,
               changeYear: true,
               yearRange: "-120:+1",
               onSelect: function(selectedDateFormatted){

                     var selectedDate = $("#embeded_calendar").datepicker('getDate');

                    deactivateDates(selectedDate);
                   }

           });


              var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];

              deactivateDates(new Date());

            function deactivateDates(selectedDate){
                setTimeout(function(){ 
                      var thisMonthExcludedDates = thisMonthDates(selectedDate);
                      thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
                       var excludedTDs = page.find('td[data-handler="selectDay"]').filter(function(){
                           return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
                       });

                       excludedTDs.unbind('click').addClass('ui-datepicker-unselectable');
                   }, 10);
            }

            function thisMonthDates(date){
              return $.grep( excludedDates, function( n){
                var dateParts = n.split("-");
                return dateParts[0] == date.getMonth() + 1  && dateParts[2] == date.getYear() + 1900;
            });
            }

            function getDaysfromDate(datesArray){
                  return  $.map( datesArray, function( n){
                    return n.split("-")[1]; 
                });
             }
我们能在dateRangePicker上做同样的事情吗？ - Sunil Rawat
1

要使用 DD-MM-YY，请使用以下代码：

var array = ["03-03-2017', '03-10-2017', '03-25-2017"]

$('#datepicker').datepicker({
    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
    return [ array.indexOf(string) == -1 ]
    }
});

function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
    if (new Date(dates[i]).toString() == date.toString()) {
        return [true, 'highlight'];
    }
}
return [true, ''];
}
daterangepicker是否可以禁用日期范围选择器上的一组日期？ - Sunil Rawat
请问您能否明确您的问题？ - Dierig Patrick
我有一个日期范围选择器，例如：01/01/2017 - 31/03/2017。我想在这个日期范围内的日历上，用一个自定义日期数组来标记一些日期。例如：$dates = ['02/01/2017'，'03/01/2017'...直到]这些日期。这种操作是否可行？ - Sunil Rawat
在日期选择器中，我们可以使用:beforeShowDay函数来实现此目的，那么在日期范围选择器中有什么呢？ http://www.daterangepicker.com/ - Sunil Rawat
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接