如何添加 jQuery UI DatePicker 按钮触发脚本

发布于 2024-10-05 09:08:23 字数 1577 浏览 9 评论 0原文

我有一个有效的 jQuery UI DatePicker 脚本，仅显示周三和周三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>

原文

I have a working jQuery UI DatePicker script that only
displays WED & SAT (see MAIN SCRIPT below).

I also have a working jQuery UI DatePicker script that adds
a button image to trigger the DatePicker (see TRIGGER SCRIPT BELOW).

How can I integrate the TRIGGER SCRIPT into the MAIN SCRIPT?

I know this is simple but this newbie can't figure out out the syntax.
Sorry about that....

Trigger script:

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

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

长途伴 2024-10-12 09:08:23

<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
            });
        });

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

无敌元气妹 2024-10-12 09:08:23

在你的主脚本中：

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

In your main script:

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

回复收藏 0 原文

两人的回忆 2024-10-12 09:08:23

找到的解决方案：如何添加 jQuery UI DatePicker 按钮触发脚本。

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

Solution Found: How to Add jQuery UI DatePicker Button 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 原文

~没有更多了~