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


84

我一直在尝试寻找解决我的Jquery ui datepicker问题的解决方案,但我没有运气。这就是我想要做的...

我有一个应用程序,在这里我正在做一些复杂的PHP,以从jQuery UI Datepicker返回我希望阻止的日期的JSON数组。我返回这个数组:

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

有没有简单的方法可以简单地说:从datepicker阻止这些日期?

我已经阅读了UI文档,但没有任何帮助。谁有想法?






有人可以给我贴上类似的问题,但要使用Materialize Datepicker吗?
naz786 '18

Answers:


208

您可以使用beforeShowDay来执行此操作

以下示例禁用日期2013年3月14日至2013年3月16日

var array = ["2013-03-14","2013-03-15","2013-03-16"]

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

演示:小提琴


1
我有点想知道你要去哪里。我将如何合并日期数组。
丹尼尔·怀特

14
哇。你真是个天才兄弟。我不知道为什么这个问题至今还未出现在堆栈溢出帖子中,因为它被问了一百万遍。上面发布的所有示例都太复杂了,这很好而且很简单。5星。谢谢。
丹尼尔·怀特

我已经下载的代码 jqueryui.com/download/...但是当我在整合它上面的代码它不工作请帮助
山姆

一次投票是不够的。有些人使事情变得比他们需要的复杂。非常感谢您提供一个简单易用的代码段。很有用。
0112年

4
如果您还希望除这些自定义日期之外还排除周末,请用以下方式替换返回行:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco

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
@ChristopherStrydom您会惊讶地发现仍然有很多人使用它。
2014年

3
这是因为IE8是将在WinXP(SP3)上运行的最新IE浏览器。
JosephK 2014年

但是,它确实支持字符串上的indexOf()函数,以查找该字符串中子字符串的位置。
Wezy

9

如果您还想屏蔽星期天(或其他日期)以及日期数组,则可以使用以下代码:

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
$('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,我想在date-range-picker上禁用日期数组?
Sunil Rawat

您能否定义您的问题?
迪里格·帕特里克

我假设日期范围选择器为:01/01/2017-31/03/2017。我想突出显示一些日期,该日期介于此范围之间,是自定义日期的数组。在日期范围的日历上。$ dates = ['02 /01/2017','03/01/2017'...till]这些日期。有可能吗?
Sunil Rawat'5

像在datepicker中一样,我们可以使用:beforeShowDay函数来实现此目的,date-range- picker中
Sunil Rawat

1

如果您想在jquery datepicker中禁用特定日期,那么这里是适合您的简单演示。

<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>
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.