Помогите!Как сделать дни включенными в пользовательском интерфейсе DatePicker после изменения месяца? - PullRequest
Новая
       16

Помогите!Как сделать дни включенными в пользовательском интерфейсе DatePicker после изменения месяца?

1 голос
/ 13 ноября 2010

В моей ситуации:

Я получил дни, которые хотят включить из ajax. Когда я меняю месяц, я читаю xml-файл с именем ajax и получил дни этого месяца. Как это сделать ??

Большое спасибо !!

переменная массива для хранения дней: 

var $daysWithRecords = new Array()

функция для загрузки XML-файлов: 

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

$('#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-файл: 

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

Большое спасибо !!

1 Ответ

2 голосов
/ 13 ноября 2010

Проблема в том, что формат даты здесь, когда вы сохраняете даты, они выходят как 2010-1001 вместо 2010-10-01, поэтому измените это: 

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

К этому: 

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

Вы можете увидеть, как это работает здесь .

Вот общая более оптимизированная версия, с меньшим количеством циклов и без бесконечно растущего массива: 

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

Вы можете проверить это здесь .

...