Как добавить кнопки в jQuery datepicker на панели кнопок?

Ответ 1

Если вы хотите сохранить кнопку "clear" при прокрутке через месяцы, используйте 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 );
    }
});

Ответ 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);

Ответ 3

Я видел сообщение о том, как добавить кнопку в эту область datepicker здесь:

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

Он работает нормально, однако, когда вы меняете месяц, пользовательские кнопки исчезают. Было бы очень интересно узнать, удалось ли кому-нибудь сохранить кнопки.

Ответ 4

Этот пример кода добавляет кнопку предыдущего дня и следующего дня в jQuery datepicker на панели кнопок:

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

Ответ 5

В файле 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">

Ответ 6

Если вы говорите об использовании кнопки/значка для запуска, вы можете использовать это:

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

Если вы хотите назначить его кнопке link/:

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

Ответ 7

Я сделал плагин JQuery на основе DatePicker, чтобы добавить кнопки, которые вы можете проверить на моем github:

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

Он автоматически добавляет кнопки: в прошлом месяце, на этой неделе, вчера, сегодня