Help! How to make days enabled in UI datepicker after month change?

Question

In my situation:

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??

thank you very much!!

array variable to hold the days:

var $daysWithRecords = new Array()

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 to initial the days array:

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 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

        });

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>

thank you very much!!

Answer 1

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());

To this:

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

You can see it working here.

---

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
});

You can test it here.