2010-11-27 8 views
0

Ich habe ein funktionierendes jQuery UI DatePicker Skript, das nur WED & SAT anzeigt (siehe MAIN SCRIPT unten).Hinzufügen von jQuery UI DatePicker Schaltfläche TRIGGER SCRIPT

Ich habe auch ein funktionierendes jQuery UI DatePicker Skript, das ein Button-Bild hinzufügt, um den DatePicker auszulösen (siehe TRIGGER SCRIPT UNTEN).

Wie kann ich das TRIGGER SCRIPT in das MAIN SCRIPT integrieren?

Ich weiß, das ist einfach, aber dieser Neuling kann die Syntax nicht herausfinden. Tut mir leid, dass ....

Trigger-Skript:

<script> 
$(function() { 
    $("#datepicker").datepicker({ 
     showOn: "button", 
     buttonImage: "css/blitzer/images/calendar.gif", 
     buttonImageOnly: true 
    }); 
}); 
</script> 

Haupt Skript:

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>Disable Certains Days in a Week using jQuery UI DatePicker</title> 
     <link rel="stylesheet" href="css/redmond/jquery-ui-1.8.6.custom.css" type="text/css" /> 
     <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js"></script> 


     <script type="text/javascript"> 
     $(function() { 
      $("#datepicker").datepicker(
      { beforeShowDay: function(day) { 
       var day = day.getDay(); 
       if (day == 0 || day == 1 || day == 2 || day == 4 || day == 5) { 
        return [false, "somecssclass"] 
       } else { 
        return [true, "someothercssclass"] 
       } 
      } 
      }); 
     }); 
     </script> 
    </head> 
    <body> 
     <input id="datepicker"/> 
    </body> 
</html> 
+0

Doris 42 doppelte DD's? http://marcgrabanski.com/articles/jquery-ui-datepicker – 422

+0

Wo ist das Skript, das nur Mittwoch und Samstag anzeigen? –

Antwort

1
<input type="button" name="date" id="popupDatepicker"> 


/* create an array of days which need to be disabled */ 
     var disabledDays = ["2-21-2010","2-24-2010","2-27-2010","2-28-2010","3-3-2010","3-17-2010","4-2-2010","4-3-2010","4-4-2010","4-5-2010"]; 

     /* utility functions */ 
     function nationalDays(date) { 
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
      //console.log('Checking (raw): ' + m + '-' + d + '-' + y); 
      for (i = 0; i < disabledDays.length; i++) { 
       if(ArrayContains(disabledDays,(m+1) + '-' + d + '-' + y) || new Date() > date) { 
        //console.log('bad: ' + (m+1) + '-' + d + '-' + y + '/' + disabledDays[i]); 
        return [false]; 
       } 
      } 
      //console.log('good: ' + (m+1) + '-' + d + '-' + y); 
      return [true]; 
     } 
     function noWeekendsOrHolidays(date) { 
      var noWeekend = jQuery.datepicker.noWeekends(date); 
      return noWeekend[0] ? nationalDays(date) : noWeekend; 
     } 

     /* taken from mootools */ 
     function ArrayIndexOf(array,item,from){ 
      var len = array.length; 
      for (var i = (from < 0) ? Math.max(0, len + from) : from || 0; i < len; i++){ 
       if (array[i] === item) return i; 
      } 
      return -1; 
     } 
     /* taken from mootools */ 
     function ArrayContains(array,item,from){ 
      return ArrayIndexOf(array,item,from) != -1; 
     } 


     /* create datepicker */ 
     jQuery(document).ready(function() { 
      jQuery('#date').datepicker({ 
       minDate: new Date(2010, 0, 1), 
       maxDate: new Date(2010, 5, 31), 
       dateFormat: 'DD, MM, d, yy', 
       constrainInput: true, 
       beforeShowDay: noWeekendsOrHolidays 
      }); 
     }); 
0

In Ihrem Haupt-Skript:

$(document).ready(function(){ 
     $("#datepicker").datepicker(
       { showOn: "button", 
       buttonImage: "css/blitzer/images/calendar.gif", 
       buttonImageOnly: true}); 
}); 
+0

http://keith-wood.name/datepick.html Popup-Datepicker kann von jedem Element ausgelöst werden. Wenn er eine Schaltfläche möchte, ist es nur ein Fall der Anbringung der entsprechenden ID – 422

+0

Richtig, ich dachte, sie fragen, wo in ihrer Haupt-Javascript-Datei sollten sie die Datapicker-Element-Erweiterung hinzufügen ... definitiv falsch sein könnte. –

+0

Scheint, du hättest recht haben können Macy :) – 422

-1

Lösung gefunden: Hinzufügen von jQuery UI DatePicker Schaltfläche TRIGGER SCRIPT.

<script type="text/javascript"> 
    $(function() { 
     $("#datepicker").datepicker({ 
       showOn: "button", 
       buttonImage: "css/blitzer/images/calendar.gif", 
       buttonImageOnly: true, 
       beforeShowDay: function(day) { 
     var day = day.getDay(); 
     if (day == 0 || day == 1 || day == 3 || day == 4 || day == 6) { 
      return [false, "somecssclass"] 
     } else { 
      return [true, "someothercssclass"] 
     } 
    } 
     }); 
    }); 
</script>