帮帮我！月更改后如何在UI datepicker中启用日期？ [英] Help! How to make days enabled in UI datepicker after month change?

问题描述

在我的情况下：

我得到了希望从ajax被启用的日子。当我更改月份，我读了xml文件小瓶ajax调用，并得到了那个月的日子。如何做出来？

I got the days which want to be enabled from ajax called. When I change the month ,I read the xml file vial ajax called and got the days of that month.How to make it out??

非常感谢你！

数组变量保存日期：

var $daysWithRecords = new Array()

加载xml文件的功能：

function to load xml files:

function getDays(year,month){

    $.ajax({
        type: "GET",
        url: "users.xml",
        dataType: "xml",
        success:function(msg)
        {
           initDaysArray( $(msg) , year ,  month );
        }

     });
}

函数初始化天数：

function initDaysArray( $xml , year , month )
{
    //alert(year+'-'+month);
    var dateToFind = year+'-'+month;

    var $myElement = $xml.find( 'user[id="126"]' );

    dates = ''; 
    $myElement.find('whDateList[month="'+dateToFind+'"]').find('date').each(function(){

        $daysWithRecords.push(dateToFind+$(this).text());
        dates += $(this).text() + ' ';

    });


    console.log(dates);
    console.log($daysWithRecords.length)
}

数组变量中可用的日期：

function to make the day available in array variable :

function checkAvailability(avalableDays){

var $return=false;
var $returnclass ="unavailable";

$checkdate = $.datepicker.formatDate('yy-mm-dd', avalableDays);

for(var i = 0; i < $daysWithRecords.length; i++){ 

       if($daysWithRecords[i] == $checkdate){

            $return = true;
            $returnclass= "available";
        }
    }

    return [$return,$returnclass];
}

加载和显示日期的datepicker部分代码[注意：我是使用datepicker的内联模式]

datepicker part code to load and show days[ note: I am using the inline mode of datepicker]

$('#div').datepicker({ dateFormat: 'yy-mm-dd',defaultDate: '2010-09-01' , 
          onChangeMonthYear: function(year, month, inst) { 
              console.log(year);
              console.log(month);
              getDays(year,month);

          } , 
          beforeShowDay: checkAvailability

        });

和最终我的xml文件：

and final my xml file:

<?xml version="1.0" encoding="utf-8"?>
<users>
    <user id="126">
        <name>john</name>
        <watchHistory>
            <whMonthRecords month="2010-10">
                <whDateList month="2010-10">
                    <date>01</date>
                    <date>05</date>
                    <date>21</date>
                </whDateList>
            </whMonthRecords>

            <whMonthRecords month="2010-11">
                <whDateList month="2010-11">
                    <date>01</date>
                    <date>05</date>
                    <date>06</date>
                    <date>07</date>
                    <date>08</date>
                    <date>09</date>
                    <date>12</date>
                    <date>13</date>
                    <date>14</date>
                    <date>16</date>
                    <date>18</date>
                    <date>19</date>
                    <date>21</date>
                    <date>22</date>
                    <date>23</date>
                    <date>24</date>
                    <date>25</date>
                    <date>26</date>
                    <date>29</date>
                </whDateList>
            </whMonthRecords>
        </watchHistory>
    </user>

</users>

非常感谢！

推荐答案

问题是这里的日期格式，当您将它们出现的日期存储为 2010-1001 而不是 2010-10-01 ，请更改：

The problem is the date format here, when you're storing the dates they're coming out as 2010-1001 instead of 2010-10-01, so change this:

$daysWithRecords.push(dateToFind+$(this).text());

为此：

$daysWithRecords.push(dateToFind+"-"+$(this).text());

你可以看到它在这里工作。

这是一个整体更优化的版本，更少的循环，没有无限增长的数组：

Here's an overall more optimized version as well, less looping and no infinitely growing array:

var daysWithRecords = [];

function initDaysArray( $xml , year , month ) {
  var d = year+'-'+month;
  daysWithRecords = 
    $xml.find('user[id="126"] whDateList[month="'+d+'"] date').map(function() {
      return d+"-"+$(this).text();
    }).get();
}

function checkAvailability(availableDays) {
    var checkdate = $.datepicker.formatDate('yy-mm-dd', availableDays);
    for(var i = 0; i < daysWithRecords.length; i++) { 
       if(daysWithRecords[i] == checkdate){
           return [true, "available"];
        }
    }
    return [false, ""];
}

$('#div').datepicker({ 
  dateFormat: 'yy-mm-dd',
  defaultDate: '2010-09-01', 
  onChangeMonthYear: getDays, 
  beforeShowDay: checkAvailability
});

你可以在这里测试。

这篇关于帮帮我！月更改后如何在UI datepicker中启用日期？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！