最初のフィールドの値が

Question

の場合にのみ、日付ピッカーを有効にする現在、終了日の選択は無効になっています。開始日が選択されているときにのみ有効にします。

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

これは明らかに機能しません。最初の入力フィールドにvalue = 'random date'を挿入すると、正常に動作します。私はこれをどうやって行うのかについてはあまりよく分かりません。明らかに私が望むほど簡単ではありませんでした。

私の他の問題、または希望は、最初の選択を含む前の日付を無効にすることです。 あなたが知っているように、開始日を選択すると、次のピッカーの前と後のすべての日付が無効になります。しかし、それはまったく別の問題です。

Answer 1

あなたはこのようなものを使用することができます -

Answer 2

私はこのように、getDate methodを使用し、それは（何も選択していない/入力された）がnullかどう見るでしょう：あなたが目指しているような他の問題については

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

、check out the date range demo for the datepicker、それは、開始/終了日を持っていますために。

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 

それは本当に良いアイデアは、最初の後に2番目のフィールドに日付ピッカーを有効にしていない：

$('#datepicker1').datepicker({ 

    //your other configurations.  

    onSelect: function(){ 

    //enable datepicker 2 over here. 

    } 
}); 

Answer 3

ただ、このアプローチを試してみてくださいユーザーは手動で2番目のフィールドに手動で項目を追加することができ、jQuery UI datepickerによって通常提供されるフォーマットの検証は失われてしまいます。代わりに、2番目のinput要素を直接無効にします。 http://www.jsfiddle.net/yijiang/KwhLw/

はまた、それはあまり幅広い互換性を有しているが、キーボードイベントを捕捉するために使用される通常の方法よりも優れているので、我々は、ここにinputイベントを使用していることに注意してください：

は、それがここで働いて参照してください。これに関する詳しい議論はこちらをご覧ください：http://whattheheadsaid.com/tag/oninput

Answer 4

質問に答えます。私が何を持っているか知りたい人のために、ここにあります。私のSQLデータベースからすべての日付を取得し、それらをプッシュするに

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 
    } 

：個々の日付の配列に（あなた意志があれば日付範囲）、私はこれを使用し

は、開始日と終了日を変更するにはだから今

$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。それを選んでいただきありがとうございます。 。