Как добавить кнопку jQuery UI DatePicker СЦЕНАРИЙ ТРИГГЕРА - PullRequest
Новая
       20

Как добавить кнопку jQuery UI DatePicker СЦЕНАРИЙ ТРИГГЕРА

0 голосов
/ 27 ноября 2010

У меня есть рабочий сценарий jQuery UI DatePicker, который отображает только WED & SAT (см. ГЛАВНЫЙ СКРИПТ ниже).

У меня также есть рабочий сценарий jQuery UI DatePicker, который добавляет изображение кнопки для запуска DatePicker (см.СКРИПТ ТРИГГЕРА НИЖЕ).

Как я могу интегрировать СКРИПТ ТРИГГЕРА в ГЛАВНЫЙ СКРИПТ?

Я знаю, что это просто, но этот новичок не может понять синтаксис.К сожалению об этом ....

Сценарий запуска: 

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

Основной сценарий: 

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

Ответы [ 3 ]

1 голос
/ 27 ноября 2010 
<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 голосов
/ 28 ноября 2010

Найдено решение: Как добавить кнопку DateQicker пользовательского интерфейса jQuery 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>
0 голосов
/ 27 ноября 2010

В вашем основном скрипте: 

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