如何在按钮面板中向jQuery日期选择器添加按钮？

Question

我只是将元素附加到面板包装器并调用.button()？

Answer 1

如果您想在滚动月份时保持"清除"按钮,请使用onChangeMonthYear:.

一个例子:

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

            $( "<button>", {
                text: "Clear",
                click: function() {
                //Code to clear your date field (text box, read only field etc.) I had to remove the line below and add custom code here
                    $.datepicker._clearDate( input );
                }
            }).appendTo( buttonPane ).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
        }, 1 );
    },
    onChangeMonthYear: function( year, month, instance ) {
        setTimeout(function() {
            var buttonPane = $( instance )
                .datepicker( "widget" )
                .find( ".ui-datepicker-buttonpane" );

            $( "<button>", {
                text: "Clear",
                click: function() {
                //Code to clear your date field (text box, read only field etc.) I had to remove the line below and add custom code here
                    $.datepicker._clearDate( instance.input );
                }
            }).appendTo( buttonPane ).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
        }, 1 );
    }
});

Answer 2

以下代码将允许您向jQuery UI datepicker添加另一个按钮.可以添加多个按钮.您还需要对OnChangeMonthYear进行编码,以便在年/月更改时保留新按钮.注意 - OnChangeMonthYear接受年,月和输入控件(与beforeShow略有不同).

var datePickerOptsMax: {
    dateFormat: 'dd-M-yy',
    showOn: 'button',
    buttonImage: 'Styles/Images/Calendar_scheduleHS.png',
    buttonImageOnly: true,
    buttonText: 'Select a date',
    showButtonPanel: true,
    changeMonth: 'true',
    changeYear: 'true',
    beforeShow: function (input) { 
        dpClearButton(input);    
        dpMaxButton(input); 
    },
    onChangeMonthYear: function (yy, mm, inst) { 
        dpClearButton(inst.input); 
        dpMaxButton(inst.input); 
    }
}

function dpClearButton (input) {
    setTimeout(function () {
        var buttonPane = $(input)
        .datepicker("widget")
        .find(".ui-datepicker-buttonpane");

        $("<button>", {
            text: "Clear",
            click: function () { jQuery.datepicker._clearDate(input); }
        }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
    }, 1)
}
function dpMaxButton (input) {
    setTimeout(function () {
        var buttonPane = $(input)
        .datepicker("widget")
        .find(".ui-datepicker-buttonpane");
        $("<button>", {
            text: "Max",
            click: function () { 
                 jQuery(input).datepicker('setDate', '31-Dec-9999');   
                 jQuery(input).datepicker('hide'); }
        }).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
    }, 1)
}

jQuery('#txtboxid').dialog(datePickerOptsMax);

Answer 3

我看到一篇帖子显示如何在这里添加一个按钮到这个datepicker区域:

http://csharptechies.blogspot.com/2010/12/adding-custom-buttons-to-jquery.html

然而,它可以正常工作,当您更改月份时,自定义按钮会消失.非常有兴趣知道是否有人设法保持按钮可见.

Answer 4

如果您正在讨论使用按钮/图标来触发，您可以使用以下命令：

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

如果要将其分配给链接/按钮：

<script>
$(function() {    
       $(button_id).click(function() {
          $(input).datepicker('show');
       });
    });
</script>