Enable Datepicker only when first field has a value

Right now, the End Date selection is disabled. I want to only enable this when a Start Date is selected.

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

This clearly does not work. If I insert value = 'random date' into my fir开发者_开发百科st input field, it works fine. I'm not too sure on how do this. Clearly not as easy as I had hoped.

My other problem, or hope, is to disable the dates including and before the first selection. You know, pick Start Date, and every date before and said date for the next picker would be disabled. But that is a whole other problem.

You can use something like this:

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

It's not really a good idea to enable the datepicker in the second field only after the first has been filled in, because the user can still add things into the second field manually, and you lose the format validation usually offered by jQuery UI datepicker. Instead, we disable the second input element directly.

See it working here: http://www.jsfiddle.net/yijiang/KwhLw/

Also note that we're using the input event here, because although it has less broad compatibility, is better than the usual methods used for keyboard event capturing. See a full discussion on this here: http://whattheheadsaid.com/tag/oninput

Just try this approach -

$('#datepicker1').datepicker({

     //your other configurations.     

     onSelect: function(){

    //enable datepicker 2 over here.

    }
 });

I would use the getDate method and see if it's null (nothing selected/entered), like this:

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

For the other issue, check out the date range demo for the datepicker, it has a start/end date like you're aiming for.

Well, question is answered. For those who want to know what I have, here it is.

To change a Start Date and an End Date (A date range if you will) into an array of individual dates, I used this:

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
    }

To get every date from my SQL Database and push them into a single array, this was used:

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

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

So now I have managed to get every date range from an entire list of classes and made one huge array. Now I had to use this array to actually disable the dates. Using the functions of which Yi Jiang has no generously wrote (thank you to everyone who helped me), the next step is:

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

The only thing in my body right now, for testing purposes, are:

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

It's long, yes, but it works. Thank you to everyone who helped me get this working. The edit was me changing a function to a JQuery function that exists (of which for some reason I did not use in the first place); toggleClass. Thanks for picking that out.