Включить Datepicker, только если первое поле имеет значение

Question

Прямо сейчас выбор даты окончания отключен.Я хочу включить это, только если выбрана дата начала.

if( $('#datepicker1').val().length === 0) {
    $('#datepicker2').datepicker("disable"); 
} else {
    $('#datepicker2').datepicker("enable");
}

Это явно не работает.Если я вставлю значение = 'случайная дата' в мое первое поле ввода, оно будет работать нормально.Я не слишком уверен, как это сделать.Ясно, что это не так просто, как я надеялся.

Другая моя проблема или надежда - отключить даты, включая и перед первым выбором.Вы знаете, выберите «Дата начала», и каждая дата до и указанная дата для следующего сборщика будет отключена.Но это совсем другая проблема.

Answer 1

Просто попробуйте этот подход -

$('#datepicker1').datepicker({

     //your other configurations.     

     onSelect: function(){

    //enable datepicker 2 over here.

    }
 });

Answer 2

Вы можете использовать что-то вроде этого:

var end = $('#end').datepicker();

// Defining a function, because we're binding this to two different events
function enableEnd() {
    end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
       .datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
}

$('#start').datepicker({
    onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
}).bind('input', enableEnd); // Do the same when something is inputted by the user

Не очень хорошая идея включать указатель даты во втором поле только после того, как первое заполнено, потому чтоПользователь по-прежнему может добавлять объекты во второе поле вручную, и вы теряете проверку формата, обычно предлагаемую датчиком выбора jQuery UI.Вместо этого мы отключаем второй элемент input напрямую.

Посмотрите, как это работает здесь: http://www.jsfiddle.net/yijiang/KwhLw/

Также обратите внимание, что здесь используется событие input, поскольку, хотя оно имеет менее широкую совместимость, оно лучше, чем обычные методы, используемыезахват событий клавиатуры.См. Полное обсуждение этого здесь: http://whattheheadsaid.com/tag/oninput

Answer 3

Я бы использовал getDate метод и посмотрел бы, является ли он пустым (ничего не выбрано / введено), например:

if($('#datepicker1').datepicker("getDate") === null)

Для другой проблемы, проверьтеиз демо диапазона дат для средства выбора даты , он имеет дату начала / окончания, на которую вы рассчитываете.

Answer 4

Ну, на вопрос есть ответ.Для тех, кто хочет знать, что у меня есть, вот оно:

Чтобы изменить дату начала и дату окончания (диапазон дат, если хотите) в массив отдельных дат, я использовал это:

function createDateRangeArray($strDateFrom,$strDateTo) //Changes a Range of Dates to Specific Dates
    {
    static $aryRange = array(); //Creates an Array

    $iDateFrom = mktime(1,0,0,substr($strDateFrom,5,2),     substr($strDateFrom,8,2),substr($strDateFrom,0,4));
    $iDateTo = mktime(1,0,0,substr($strDateTo,5,2),     substr($strDateTo,8,2),substr($strDateTo,0,4));

    if ($iDateTo >= $iDateFrom)
        {
        array_push($aryRange,date('Y-m-d',$iDateFrom)); // first entry

        while ($iDateFrom<$iDateTo)
            {
          $iDateFrom += 86400; // add 24 hours
          array_push($aryRange,date('Y-m-d',$iDateFrom));
            }
        }

    return $aryRange; //Returns to step 1 and adds another value into the array
    }

Чтобы получить каждую дату из моей базы данных SQL и поместить ее в один массив, использовалось следующее:

$query = "SELECT startdate, enddate FROM classdetails";  
$results = mysql_query($query);

while ($arrays = mysql_fetch_array($results))
    {
    $aryDates = createDateRangeArray($arrays['startdate'],$arrays['enddate']);
    echo "<br />";
    }

Так что теперь мне удалось получить каждый диапазон дат из всего спискаклассов и сделал один огромный массив.Теперь мне пришлось использовать этот массив, чтобы фактически отключить даты.Используя функции, которые Йи Цзян не написал щедро (спасибо всем, кто помог мне), следующий шаг:

$(function()
            {
            //To enable End Date picker only when Start Date has been chosen (And to disable all dates prior of said date)
            var end = $('#enddate').datepicker( {numberOfMonths: 3, beforeShowDay: checkAvailability,});

            // Defining a function, because we're binding this to two different events
            function enableEnd() {
                end.attr('disabled', !this.value.length) // Enable the end input element if the first one has anything in it
                   .datepicker('option', 'minDate', this.value); // Set the minimum date to the date in the first input
            }
            //End of function

            // Datepicker
            $('#startdate').datepicker({
                numberOfMonths: 3,
                beforeShowDay: checkAvailability,
                onSelect: enableEnd // Call enableEnd when a date is selected in the first datepicker
            }).bind('input', enableEnd); // Do the same when something is inputted by the user

            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
                function() {$(this).toggleClass('ui-state-hover');}
            );              
            });
        //End of Function


        //Disabling all dates where selected room and speaker is unavailable
        var $myBadDates = new Array (<?php foreach($aryDates as $disabledate) { echo " \"$disabledate\","; } echo " 1"; ?>); //Creates the array (The echo " 1"; is merely to close the array and will not affect the outcome

        function checkAvailability(mydate){
        var $return=true;
        var $returnclass ="available";
        $checkdate = $.datepicker.formatDate('yy-mm-dd', mydate);
        for(var i = 0; i < $myBadDates.length; i++)
            {    
               if($myBadDates[i] == $checkdate)
                  {
                $return = false;
                $returnclass= "unavailable";
                }
            }
        return [$return,$returnclass];
        }
        //End of function

Единственное, что сейчас в моем теле, для целей тестирования, это:

    <!-- Datepicker -->
    <h2 class="header">Datepicker</h2>

    <span>
    Start Date: <input type="text" id="startdate" />
    </span>
    &nbsp;
    &nbsp;
    <span>
    End Date: <input type="text" id="enddate" disabled="disabled" />
    </span>

Это долго, да, но это работает.Спасибо всем, кто помог мне заставить это работать.В результате редактирования я изменил функцию на существующую функцию JQuery (которую я по какой-то причине не использовал в первую очередь);toggleClass.Спасибо, что выбрали это.