选择jQuery UI的日期选择器只有特定日期（日期列表来自AJAX） [英] Select only specific dates in jQuery UI datepicker (date list comes from AJAX)

问题描述

下面我送电影ID并获得可用天，我想将它设置成日历。但它不工作，并禁用所有日期。从PHP返回日期字符串。日期字符串来了正常，但日历是行不通的。请大家帮帮忙。

日期字符串，例如

<$p$p><$c$c>"28-02-2012","29-02-2012","01-03-2012","02-03-2012","03-03-2012","04-03-2012","05-03-2012","06-03-2012","07-03-2012","08-03-2012","09-03-2012","28-02-2012","29-02-2012","01-03-2012","02-03-2012","03-03-2012","04-03-2012","05-03-2012","06-03-2012","07-03-2012","08-03-2012","09-03-2012"

code

  jQuery.post（'的index.php'，{
  '选项'：'com_movie，
  控制器：保留，
  任务：datelist，
  格式化：原始，
  '中'：movieid
}，功能（结果）{
  变种onlydates = result.split（，）;
  jQuery的（＃日期选择器）。日期选择器（{
    日期格式：YY-MM-DD，
    showOn：按钮，
    按钮画面：？＆LT; PHP的回声IMAGES_LINK.'calendar.png';＆gt;中，
    buttonImageOnly：真正的，
    beforeShowDay：功能（日期）{
      DMY = date.getDate（）+ - +（date.getMonth（）+ 1）+ - + date.getFullYear（）;
      的console.log（DMY +：+（jQuery.inArray（DMY，onlydates）））;
      如果（jQuery.inArray（DMY，onlydates）！=  -  1）{
        返回[真，，可用];
      } 其他 {
        返回[假的，，不可用];
      }
    }
  }）;
  返回;
}）;
 

解决方案

• 初始化datapicker只有一次;告诉它从全局数组提取有效日期
• 使用数组文本初始化的全局数组，通过AJAX更新它，只要有必要
• 致电 .datepicker（刷新）方法，只要禁用/启用日期变更 - 即当你通过AJAX得到新的结果
• 您$​​ C $ C不添加前导零的日期，因此 $。inArray 将无法按预期

---

  VAR datelist = []; //初始化空数组

$（＃日期选择器）。日期选择器（{
    beforeShowDay：函数（D）{
        //正常化的日期进行搜索的数组
        VAR DMY =;
        。DMY + =（00+ d.getDate（））的片（-2）+ - ;
        DMY = +（00+（d.getMonth（）+ 1））的片（-2）+ - 。
        DMY + = d.getFullYear（）;
        返回[$ .inArray（DMY，datelist）＆GT; = 0？真假， ];
    }
}）;

$（＃键）。点击（函数（）{
    datelist = []; //空数组
    $。员额（/回声/ HTML /，{
        这里//参数
    }， 功能（） {
        VAR的结果= "28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012,28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012"; //虚结果
        datelist = result.split（，）; //填充阵列
        $（＃日期选择器）日期选择器（刷新）。 //告诉日期选择器，它需要重新绘制自己
    }）;
 

演示这里

Here I send movie id and get available days and I want to set it into calendar. but it is not working and it disable all dates. From the PHP it returns date string. Date string is coming correctly but the calendar is not working. Please help.

Date string example

"28-02-2012","29-02-2012","01-03-2012","02-03-2012","03-03-2012","04-03-2012","05-03-2012","06-03-2012","07-03-2012","08-03-2012","09-03-2012","28-02-2012","29-02-2012","01-03-2012","02-03-2012","03-03-2012","04-03-2012","05-03-2012","06-03-2012","07-03-2012","08-03-2012","09-03-2012"

Code

jQuery.post('index.php', {
  'option': 'com_movie',
  'controller': 'reservation',
  'task': 'datelist',
  'format': 'raw',
  'mid': movieid
}, function(result) {
  var onlydates = result.split(',');
  jQuery("#datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "<?php echo IMAGES_LINK.'calendar.png';?>",
    buttonImageOnly: true,
    beforeShowDay: function(date) {
      dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
      console.log(dmy + ' : ' + (jQuery.inArray(dmy, onlydates)));
      if (jQuery.inArray(dmy, onlydates) != -1) {
        return [true, "", "Available"];
      } else {
        return [false, "", "unAvailable"];
      }
    }
  });
  return;
});

解决方案

• Initialize the datapicker only once; tell it to fetch valid dates from a global array
• Initialize the global array using array literal, update it via AJAX whenever necessary
• Call the .datepicker("refresh") method whenever disabled/enabled dates change -- i.e. when you get new results through AJAX
• Your code does not add leading zeros to the dates hence $.inArray won't work as expected

---

var datelist = []; // initialize empty array

$("#datepicker").datepicker({
    beforeShowDay: function(d) {
        // normalize the date for searching in array
        var dmy = "";
        dmy += ("00" + d.getDate()).slice(-2) + "-";
        dmy += ("00" + (d.getMonth() + 1)).slice(-2) + "-";
        dmy += d.getFullYear();
        return [$.inArray(dmy, datelist) >= 0 ? true : false, ""];
    }
});

$("#button").click(function() {
    datelist = []; // empty the array
    $.post("/echo/html/", {
        // parameters here
    }, function() {
        var result = "28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012,28-02-2012,29-02-2012,01-03-2012,02-03-2012,03-03-2012,04-03-2012,05-03-2012,06-03-2012,07-03-2012,08-03-2012,09-03-2012"; // dummy result
        datelist = result.split(","); // populate the array
        $("#datepicker").datepicker("refresh"); // tell datepicker that it needs to draw itself again
    });

Demo here

这篇关于选择jQuery UI的日期选择器只有特定日期（日期列表来自AJAX）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！