【问题标题】:jQuery UI Datepicker - Custom button - Custom textjQuery UI Datepicker - 自定义按钮 - 自定义文本
【发布时间】:2023-04-09 12:11:02
【问题描述】:

我需要在 jQuery UI Datepicker 中添加一个自定义按钮,当用户单击该按钮时,设置一个输入值(文本字符串)并关闭弹出窗口。这可能吗?

小提琴示例:http://jsfiddle.net/7Wygg/

showButtonPanel: true,
beforeShow: function (input) {
    setTimeout(function () {
        var buttonPane = $(input)
            .datepicker("widget")
            .find(".ui-datepicker-buttonpane");

        var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Custom</button>');
        btn.unbind("click")
        .bind("click", function () {
            //$.datepicker._clearDate(input);
            alert('custom text');
        });

        btn.appendTo(buttonPane);

    }, 1);
}

谢谢。

【问题讨论】:

    标签: javascript jquery jquery-ui calendar datepicker


    【解决方案1】:

    因评论而修改答案

    你的意思是这样的:http://jsfiddle.net/7Wygg/10/ ?

    我刚刚加了

    $(input).datepicker("hide");
    $(input).val("custom text");
    

    【讨论】:

    • 是的,非常完美。但是我在同一页面中有很多日期选择器。所以我不能使用 $(".datepicker")。是否可以更改 $(".datepicker") 并设置 $(this)?
    • @FeKuLa 我修改了我的答案和小提琴。这应该适合你了。
    • 有趣的是,更换飞蛾后按钮消失了
    • 是的。然后您应该再次在每个更新事件中添加按钮,例如 onChangeMonthYear 等
    【解决方案2】:

    设置一个演示 HERE 并在 datepicker 中设置日期,而不是其他任何模式

    $(function() {
    $(".datepicker").datepicker({
        showButtonPanel: true,
        beforeShow: function (input) {
            setTimeout(function () {
                var buttonPane = $(input)
                    .datepicker("widget")
                    .find(".ui-datepicker-buttonpane");
    
                var btn = $('<button class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Custom</button>');
                btn.unbind("click")
                .bind("click", function () {
                    //$.datepicker._clearDate(input);
                    alert('custom text');
                    $(".datepicker").datepicker( "hide" );
                    $( ".datepicker" ).datepicker( "setDate", "19/12/2003" );// here in cutom we can set date like pattern not any other
    
                });
    
                btn.appendTo(buttonPane);
    
            }, 1);
        }
    });
    });
    

    【讨论】:

    • 在日期选择器中你不能设置文本,但在任何其他文本框中你可以设置它是日期选择器亲爱的性质
    • $(".datepicker").val("自定义文本");作品!但我需要使用 $this 因为我有很多日期选择器
    • 拥有一个带有日期和时间选择器的自定义按钮怎么样?
    • 那么你需要扩展插件@V.B
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-02-26
    相关资源
    最近更新 更多