Aktivieren Sie Datepicker nur, wenn das erste Feld einen Wert hat

Question

Die Auswahl Enddatum ist momentan deaktiviert. Ich möchte dies nur aktivieren, wenn ein Startdatum ausgewählt ist.

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

Dies funktioniert eindeutig nicht. Wenn ich value = 'random date' in mein erstes Eingabefeld einfüge, funktioniert es einwandfrei. Ich bin mir nicht sicher, wie das geht. Klar nicht so einfach wie ich gehofft hatte.

Mein anderes Problem oder Hoffnung, ist die Daten einschließlich und vor der ersten Auswahl zu deaktivieren. Sie wissen, Startdatum und jedes Datum vor und das Datum für die nächste Auswahl wäre deaktiviert. Aber das ist ein ganz anderes Problem.

Answer 1

Sie so etwas wie dieses verwenden können:

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 

Es ist nicht wirklich eine gute Idee, die picker im zweiten Feld zu ermöglichen, erst nach dem ersten wurde ausgefüllt, weil der Benutzer noch manuell Dinge in das zweite Feld hinzufügen kann, und Sie verlieren die Formatvalidierung, die normalerweise von jQuery UI Datepicker angeboten wird. Stattdessen deaktivieren wir das zweite input Element direkt.

Sehen Sie es, hier zu arbeiten: http://www.jsfiddle.net/yijiang/KwhLw/

Beachten Sie auch, dass wir die input Veranstaltung hier verwenden, denn obwohl es weniger breite Kompatibilität hat, ist besser als die üblichen Methoden zur Tastaturereignis Capturing verwendet. Siehe eine vollständige Diskussion hierzu hier: http://whattheheadsaid.com/tag/oninput

Answer 2

würde ich die getDate method verwenden und sehen, ob es null ist (nichts ausgewählt/eingegeben), wie folgt aus:

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

Für die andere Frage, check out the date range demo for the datepicker, hat es ein Start-/Enddatum wie Sie sind mit dem Ziel zum.

Answer 3

Versuchen Sie einfach, diesen Ansatz -

$('#datepicker1').datepicker({ 

    //your other configurations.  

    onSelect: function(){ 

    //enable datepicker 2 over here. 

    } 
}); 

Answer 4

Nun, Frage ist beantwortet. Für diejenigen, die wissen wollen, was ich habe, hier ist es.

Um ein Startdatum und ein Enddatum (ein Datumsbereich, wenn man so will) ändern in eine Reihe von Einzeldaten, ich benutze:

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 
    } 

Um jeden Tag von meiner SQL-Datenbank und schieben Sie sie bekommen jeden Datumsbereich aus einer ganzen Liste von Klassen zu bekommen und machte eine riesige Auswahl habe ich es geschafft So, jetzt

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

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

: in einem einzelnen Array wurde diese verwendet. Jetzt musste ich dieses Array verwenden, um die Daten tatsächlich zu deaktivieren. Mit den Funktionen von denen Yi Jiang hat keine großzügig schrieb (danke an alle, die mir geholfen haben), ist der nächste Schritt:

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

Das einzige, was in meinem Körper gerade jetzt, für Testzwecke sind:

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

Es ist lang, ja, aber es funktioniert. Danke an alle, die mir geholfen haben, dass das funktioniert. Die Änderung war das Ändern einer Funktion zu einer JQuery-Funktion, die existiert (aus welchen Gründen habe ich nicht an erster Stelle verwendet); toggleClass. Danke, dass du das rausholst. .