2013-03-25 21 views
9

C'è un modo per gestire l'evento di premere il pulsante "done" in jquery UI DatePicker?jquery DatePicker Fine pulsante

Ho un datepicker che consente solo di scegliere tra anno e il mese come in here

Il problema è che utilizzando l'evento OnClose mi impedisce di cancellare il campo (se clicco il DatePicker apre quindi se chiudo il mese e l'anno selezionati vengono messi nel campo).

Mi piacerebbe non utilizzare un pulsante "clear" aggiuntivo al di fuori di DatePicker, quindi potrei usare il pulsante Fine.

risposta

8

come "Fatto" pulsante chiama la funzione _hideDatepicker, è possibile escludere che:

jQuery.datepicker._hideDatepicker = function() { 
    alert('hello'); 
}; 
1

Forse:

$('#myInput') 
    .datepicker({ 
     // datepicker options 
    }) 
    .datepicker('widget') 
    .find('.ui-datepicker-close') 
    .on('click', function() { 
     // done button's handler here 
    }); 
7

ecco la soluzione perfetta:

$(function() { 
    $('.monthYearPicker').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     showButtonPanel: true, 
     dateFormat: 'MM yy' 
    }).focus(function() { 
     var thisCalendar = $(this); 
     $('.ui-datepicker-calendar').detach(); 
     $('.ui-datepicker-close').click(function() { 
      var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      thisCalendar.datepicker('setDate', new Date(year, month, 1)); 
     }); 
    }); 
}); 

CSS:

.ui-datepicker-calendar { 
    display: none; 
} 

e HTML:

<label for="myDate">Date :</label> 
<input name="myDate" class="monthYearPicker"> 

Vedi come si sta lavorando in questo jsfiddle.

Fonte:http://develop-for-fun.blogspot.com/2013/08/jquery-ui-datepicker-month-and-year.html

Cortesia:THIS e THAT SO risposte sono stati combinati per rendere questa soluzione.

5

Ho trovato la soluzione su un forum (non ricordo dove - scusa). So che è passato un po 'di tempo, ma per una ricerca futura :)

Nota: la modifica deve essere eseguita nel plug-in. Puoi semplicemente cercare "onClose:" per trovarlo.

onClose: function (dateText, inst) { 
    function isDonePressed() { 
     return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1); 
    } 
    if (isDonePressed()){ 
     alert('done pressed'); 
    } 
} 
1
$('#start_date_download').datepicker({ 
    dateFormat:"yy-mm-dd", 
    "autoclose": true, 
    showButtonPanel: true, 
    closeText: 'Clear' 
}).focus(function() { 
    var thisCalendar = $(this); 
    $('.ui-datepicker-close').click(function() { 
     $.datepicker._clearDate($('#start_date_download')); 
    }); 
});