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

时间：2011-01-04 21:53:56

标签： jquery-ui

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

7 个答案:

答案 0 :(得分：44)

如果您想在滚动月份时保持“清除”按钮，请使用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 );
    }
});

答案 1 :(得分：10)

以下代码将允许您向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);

答案 2 :(得分：6)

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

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

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

答案 3 :(得分：3)

此示例代码在按钮面板的jQuery日期选择器中添加前一天和第二天按钮：

//   Setting date picker options.
$('#datepicker').datepicker(
    {    onSelect: newDateSelected,   //function for new date 
         showButtonPanel: true, 
    }
);

//   HTML Text for previous day button
var PrevDay     = '<button id="PrevDay" class="ui-datepicker-current ' + 
              'ui-state-default ui-priority-secondary ui-corner-all" '+
              'type="button">Prev Day</button> ';
//   HTML Text for next day button
var NextDay     = '<button id="NextDay" class="ui-datepicker-current ' + 
                  'ui-state-default ui-priority-secondary ui-corner-all" '+
                  'type="button">Next Day</button> ';

//    Setting text for Date Picker Button Panel       
$('#datepicker').datepicker("option", "currentText", "Today " + PrevDay  + NextDay );

//    Setting "click" functions for prev and next day buttons.
$('#NextDay').click(nextDaySelected);
$('#PrevDay').click(prevDaySelected);


//===========Begin Functions==============================
function nextDaySelected(){
    alert("Next Day Selected; button not activated yet.");
}

function prevDaySelected(){
    alert("Previous Day Selected; button not activated yet.");
}

function newDateSelected(dateText, inst){
    // .toSource displays object details in FireFox
    alert("dateText = " + dateText + ", inst = " + inst.toSource());

    //  Timeout was added to re-enable PrevDay and NextDay Buttons.
    setTimeout(function (){
    $('#NextDay').click(nextDaySelected);
    $('#PrevDay').click(prevDaySelected);
    }, 1000);
}

答案 4 :(得分：3)

您可以在jquery-ui.js文件中更改datepicker的“BeforeShow”属性。 

$(".datepicker").datepicker({  
 showButtonPanel: true,  
      beforeShow: function( input ) {  
 setTimeout(function() {  
   var buttonPane = $( input )  
     .datepicker( "widget" )  
     .find( ".ui-datepicker-buttonpane" );  
  
   var btn = $('<button type="button" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all">Clear</button>');  
   btn  
    .unbind("click")  
    .bind("click", function () {  
    $.datepicker._clearDate( input );  
  });  
  
   btn.appendTo( buttonPane );  
  
 }, 1 );  
      }  
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />

<input class="datepicker" type="text">

答案 5 :(得分：2)

如果您正在谈论使用按钮/图标进行触发，您可以使用：

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

如果要将其指定给链接/按钮：

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

答案 6 :(得分：0)

我做了一个基于DatePicker的JQuery插件来添加按钮，你可以在我的github上查看它：

https://github.com/rogeroliveira84/bootstrap-datepicker-buttons

自动添加按钮：上个月，本周，昨天，今天

相关问题
最新问题