Come si aggiungono i pulsanti a un Datepicker jQuery nel pannello dei pulsanti?

Question

Aggiungo semplicemente l'elemento al wrapper del pannello e chiamo .button()?

Answer 1

Se si sta parlando con il pulsante/icona per l'attivazione è possibile utilizzare questo:

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

Se si desidera assegnare a un link/bottone:

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

Answer 2

ho visto un post che mostra come aggiungere un pulsante per questa zona del datepicker qui:

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

Funziona bene, tuttavia, quando si modifica il mese, i pulsanti personalizzati spariscono. Sarebbe molto interessato a sapere se qualcuno è riuscito a mantenere i pulsanti visibili.

Answer 3

Se si desidera mantenere il pulsante "clear" durante lo scorrimento dei mesi, utilizzare onChangeMonthYear:.

Un esempio:

$("#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 4

Il seguente codice vi permetterà di aggiungere un altro pulsante per il DatePicker jQuery UI. È possibile aggiungere più pulsanti. È inoltre necessario codificare OnChangeMonthYear per conservare i nuovi pulsanti man mano che l'anno/mese viene modificato. Nota: OnChangeMonthYear accetta un anno, un mese e il controllo di input (leggermente diverso da 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 5

Questo codice di esempio aggiunge un pulsante giorno precedente e il giorno successivo nella DatePicker jQuery nella pulsantiera:

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

Answer 6

È possibile modificare "BeforeShow" attributo della datepicker nei vostri jquery-ui.js file.

$(".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">

Answer 7

ho un plugin jQuery basato sul DatePicker per aggiungere i pulsanti è possibile controllare sul mio github:

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

aggiunge automaticamente i pulsanti: Il mese scorso , Questa settimana, Ieri, Oggi