Question

现在，禁用结束日期选择。我想仅在选择开始日期时启用此功能。

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

这显然不起作用。如果我在我的第一个输入字段中插入value ='random date'，它可以正常工作。我不太清楚这是怎么做的。显然不像我希望的那么容易。

我的另一个问题或希望是在第一次选择之前和之前禁用日期。您知道，选择开始日期，之前的每个日期和下一个选择器的日期将被禁用。但这是另一个问题。

Answer 1

我会使用getDate method并查看它是否为空（没有选择/输入），如下所示：

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

对于另一个问题check out the date range demo for the datepicker，它有一个开始/结束日期，就像你的目标一样。

Answer 2

试试这种方法 -

$('#datepicker1').datepicker({

     //your other configurations.     

     onSelect: function(){

    //enable datepicker 2 over here.

    }
 });

Answer 3

您可以使用以下内容：

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

仅在第一个字段填写后才在第二个字段中启用 datepicker 并不是一个好主意，因为用户仍然可以手动将内容添加到第二个字段中，并且您丢失了格式验证通常由jQuery UI datepicker提供。相反，我们直接禁用第二个input元素。

在此处查看：http://www.jsfiddle.net/yijiang/KwhLw/

另请注意，我们在此处使用input事件，因为它虽然广泛兼容性较差，但优于用于键盘事件捕获的常用方法。请在此处查看完整的讨论：http://whattheheadsaid.com/tag/oninput

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。谢谢你选择了。

仅当第一个字段具有值时才启用Datepicker

4 个答案: