如何使用 jQuery Datepicker 显示所选日期的附加信息?

发布于 2024-12-04 17:14:02 字数 806 浏览 0 评论 0原文

我使用 jQuery 的 Datepicker 作为文本框,如下所示。我限制了用户可以选择的日期,但我的问题是是否有办法让文本框中出现特殊文本以及每个选定的日期。

例如,如果用户选择第 1 天,则显示2011 年 9 月 19 日星期一 如何将其设为2011 年 9 月 19 日星期一并在此处为星期一指定一个特殊名称?强>

这同样适用于所有可供选择的日期,例如星期二,2011 年 9 月 20 日,以及此处星期二的特殊名称?

谢谢您

    <script>
$(document).ready(function() {

var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

$('#datepicker').datepicker({
        minDate: new Date(y, m, d),
        dateFormat: 'DD, d MM yy',
        beforeShowDay: function(date){ 
        var day = date.getDay(); 
        return [day == 1 || day == 4 || day == 5,""];
        }
});

$( "#datepicker" ).datepicker( $.datepicker.regional[ "el" ] );

});
    </script>

I am using jQuery's Datepicker for a textbox as below. I have restricted the days a user is allowed to select but my question is if there is a way to have a special text appeared in the textbox along with each selected date.

For example, if a user selects day number 1, then there is shown Monday, 19 September 2011 How to make it Monday, 19 September 2011 and a special name for the Monday here?

The same goes for all the available to select days like Tuesday, 20 September 2011 and a special name for the Tuesday here?

Thank you for this

    <script>
$(document).ready(function() {

var date = new Date();
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();

$('#datepicker').datepicker({
        minDate: new Date(y, m, d),
        dateFormat: 'DD, d MM yy',
        beforeShowDay: function(date){ 
        var day = date.getDay(); 
        return [day == 1 || day == 4 || day == 5,""];
        }
});

$( "#datepicker" ).datepicker( $.datepicker.regional[ "el" ] );

});
    </script>

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

无戏配角 2024-12-11 17:14:02

另一种方法是使用 dayNamesShort 选项,如果您不打算使用默认的。这样,您只需在 dateFormat 中配置它即可:

var myWeekdays = "Sunny Manic Terrible Wild Thorny Freaky Sadistic".split(' ');

$('#datepicker').datepicker({
    ...
    dateFormat: 'DD, d MM yy (D)',
    dayNamesShort: myWeekdays
});

查看实际操作: http://jsfiddle.net/william/Xm6Dm/2/

An alternative is to use the dayNamesShort option, if you do not intend to use the default ones. That way, you can simply configure it in your dateFormat:

var myWeekdays = "Sunny Manic Terrible Wild Thorny Freaky Sadistic".split(' ');

$('#datepicker').datepicker({
    ...
    dateFormat: 'DD, d MM yy (D)',
    dayNamesShort: myWeekdays
});

See this in action: http://jsfiddle.net/william/Xm6Dm/2/.

春风十里 2024-12-11 17:14:02

添加这个数组:

var weekday=new Array(7);
weekday[0]="Sunny Sunday";
weekday[1]="Manic Monday";
weekday[2]="Terrible Tuesday";
weekday[3]="Wild Wednesday";
weekday[4]="Thorny Thursday";
weekday[5]="Freaky Friday";
weekday[6]="Sadistic Saturday";

然后添加这个方法:

    onSelect: function(dateText, inst) {
        var day = new Date(dateText).getDay();
        $(this).val(dateText + ': ' + weekday[day]);
    },

演示: http://jsfiddle.net/AlienWebguy/Xm6Dm/

Add this array:

var weekday=new Array(7);
weekday[0]="Sunny Sunday";
weekday[1]="Manic Monday";
weekday[2]="Terrible Tuesday";
weekday[3]="Wild Wednesday";
weekday[4]="Thorny Thursday";
weekday[5]="Freaky Friday";
weekday[6]="Sadistic Saturday";

Then add this method:

    onSelect: function(dateText, inst) {
        var day = new Date(dateText).getDay();
        $(this).val(dateText + ': ' + weekday[day]);
    },

Demo: http://jsfiddle.net/AlienWebguy/Xm6Dm/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文