jQuery Datepicker: impedisce la chiusura del selettore quando si fa clic su una data

Ciao collega StackOverflow: ers,

Sto usando il plugin jQuery Datepicker , insieme al plugin Martin Milesich Timepicker . Tutto funziona alla grande, fatta eccezione per il fatto che facendo clic su una data nel datepicker, si chiude il widget, senza lasciare il tempo per scegliere l’ora.

Domanda: quindi mi chiedo se c’è un modo per impedire la chiusura del widget quando si fa clic su una data e imporre invece agli utenti di fare clic sul pulsante “Fatto” (che compare quando si triggers l’opzione “showButtonPanel: true”) o facendo clic al di fuori del widget. Non voglio che i miei utenti debbano aprire il widget due volte! Guarda il comportamento online alla demo di timepicker

È gradito qualsiasi aiuto per risolvere questo problema, o anche i puntatori nella giusta direzione!

Ulteriori informazioni: utilizzo i file forniti dal collegamento per il download di Martins: http://milesich.com/tpdemo/timepicker-0.2.0.zip

  • jquery-ui-1.7.2.custom.min.js
  • timepicker.js (ultima versione 0.2.0)

Queste sono le opzioni che sto usando:

$(document).ready(function(){ $(".datepicker").datepicker({ duration: '', showTime: true, constrainInput: false, stepMinutes: 5, stepHours: 1, time24h: true, dateFormat: "yy-mm-dd", buttonImage: '/static/images/datepicker.png', buttonImageOnly: true, firstDay: 1, monthNames: ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'], showOn: 'both', showButtonPanel: true }); }) 

piuttosto che cambiare la fonte è meglio usare gli eventi esistenti

 onSelect: function() { $(this).data('datepicker').inline = true; }, onClose: function() { $(this).data('datepicker').inline = false; } 

Per riferimento, e poiché la gente mi ha chiesto questo per posta. Ecco un blocco di codice che deve essere aggiunto a timepicker.js:

 /** * Don't hide the date picker when clicking a date */ $.datepicker._selectDateOverload = $.datepicker._selectDate; $.datepicker._selectDate = function(id, dateStr) { var target = $(id); var inst = this._getInst(target[0]); inst.inline = true; $.datepicker._selectDateOverload(id, dateStr); inst.inline = false; this._updateDatepicker(inst); } 

Buona fortuna per farlo funzionare sul tuo sito!

Dovrai hackerare il datepicker da solo. Questo è il codice che usa. Se non è in linea, si nasconde quando si seleziona una data.

È ansible passare il proprio metodo onSelect e modificare rapidamente l’istanza di datePicker per essere in linea e quindi modificarla di nuovo senza dover modificare gli interni di datepicker ma si tratta di una soluzione molto complessa.

 if (inst.inline) this._updateDatepicker(inst); else { this._hideDatepicker(null, this._get(inst, 'duration')); this._lastInput = inst.input[0]; if (typeof(inst.input[0]) != 'object') inst.input[0].focus(); // restore focus this._lastInput = null; } 

Ecco una soluzione:

 onSelect: function ( dateText, inst ) { ..... // Your code like $(this).val( dateText );` //Set inline to true to force "no close" inst.inline = true; }, onClose: function(date,inst){ //Set inline to false => datapicker is closed // onClose is called only if you click outside the datapicker, onSelect will not // trig onClose due to inline = true inst.inline = false; } 

`

Perché tutti i commenti forniscono soluzioni alternative? è straigtfarword:

Usa calendario in linea con altField 🙂

   

controlla questo violino: http://jsfiddle.net/menocomp/y2s662b0/1/

Raffreddare, se si utilizza jquery-ui-1.8.5.custom.min.js e jquery-ui.multidatespicker.js, è ansible modificare jquery-ui-1.8.5.custom.min.js: da:

 if(a.inline)this._updateDatepicker(a); 

in:

 if(a.inline || !this._get(a, 'closeOnSelect'))this._updateDatepicker(a); 

bene questa soluzione sporca … ma funziona per me … anche con showButtonPanel: vero

  $(function() { var dp_c = null, dp_once = false; $( '#datepicker' ).datepicker({ showButtonPanel: true, onSelect: function() { $(this).data('datepicker').inline = true; setTimeout(function () { $('#ui-datepicker-div').find('.ui-datepicker-buttonpane').append(dp_c); }, 1); }, onClose: function() { $(this).data('datepicker').inline = false; } }).click(function () { if(!dp_once) { setTimeout(function () { dp_c = $('#ui-datepicker-div').find('.ui-datepicker-close').clone(); }, 500); dp_once = !!1; } }); $('#ui-datepicker-div').on('click', '.ui-datepicker-close', function () { $('#datepicker').datepicker( "hide" ); }); }); 

Dovresti sovrascrivere la funzione js nativa:

  /* Update the input field with the selected date. */ _selectDate: function(id, dateStr) { var target = $(id); var inst = this._getInst(target[0]); dateStr = (dateStr != null ? dateStr : this._formatDate(inst)); if (inst.input) inst.input.val(dateStr); this._updateAlternate(inst); var onSelect = this._get(inst, 'onSelect'); if (onSelect) onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]); // trigger custom callback else if (inst.input) inst.input.trigger('change'); // fire the change event if (inst.inline) this._updateDatepicker(inst); else { if(inst.settings.hideOnSelect != false){ this._hideDatepicker(); } this._lastInput = inst.input[0]; if (typeof(inst.input[0]) != 'object') inst.input.focus(); // restore focus this._lastInput = null; } }, 

E aggiungi l’opzione appropriata alla configurazione di datepicker, ad esempio:

 var defaultDatePickerOptions = { hideOnSelect: false, ... }; var birthDate = jQuery.extend({}, defaultDatePickerOptions); $('#birthdate').datepicker(birthDate); 

In seguito a ciò che ha suggerito Emil, ho trovato un modo più semplice e più semplice per modificare il widget per supportare un widget di chiusura su evento selezionato.

Innanzitutto, ho aggiunto un’altra proprietà ai valori predefiniti dettati sul widget:

 closeOnSelect:true //True to close the widget when you select a date 

In secondo luogo, trova questa istruzione nel metodo _selectDate:

 if (inst.inline) this._updateDatepicker(inst); else { ... } 

E cambia la condizione per essere così:

 var closeOnSelect = this._get(inst, "closeOnSelect"); if (inst.inline || !closeOnSelect) this._updateDatepicker(inst); else { ... } 

Fare un tentativo, sta funzionando per me. L’ho fatto sulla versione 1.8.5 di JQuery UI.