jQuery Datepicker: Impede o seletor de fechamento ao clicar em uma data

Olá, colega stackoverflow: ers,

Estou usando o plugin jQuery Datepicker , junto com o plugin Martin Milesich Timepicker . Tudo funciona muito bem, exceto pelo fato de que clicar em uma data no datepicker fecha o widget, não deixando tempo para escolher a hora.

Pergunta: Então, estou pensando se há uma maneira de evitar que o widget feche ao clicar em uma data e, em vez disso, force os usuários a clicar no botão “Concluído” (que aparece ao habilitar a opção “showButtonPanel: true”) ou clicando em fora do widget. Eu não quero que meus usuários tenham que abrir o widget duas vezes! Veja o comportamento online na demonstração do timepicker

Qualquer ajuda para resolver este problema, ou até mesmo pointers na direção certa, é apreciada!

Mais informações: Estou usando os arquivos fornecidos pelo link de download do Martins: http://milesich.com/tpdemo/timepicker-0.2.0.zip

  • jquery-ui-1.7.2.custom.min.js
  • timepicker.js (versão mais recente 0.2.0)

Estas são as opções que estou 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 }); }) 

em vez de mudar a fonte, é melhor usar os events existentes

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

Para referência, e já que as pessoas me pediram isso pelo correio. Aqui está um pedaço de código que precisa ser adicionado ao 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); } 

Boa sorte em fazê-lo funcionar no seu site!

Você terá que hackear o datepicker você mesmo. Este é o código que ele usa. Se não estiver na linha, ela será ocultada quando você selecionar uma data.

Você poderia passar seu próprio método onSelect e rapidamente alterar a instância de datePicker para ser inline e então alterá-lo de volta sem ter que alterar os internos do datepicker, mas é uma solução muito hacky.

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

Aqui está uma solução:

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

`

Por que todos os comentários fornecem solução alternativa? é a palavra-chave:

Use calendar embutido com altField 🙂

   

verifique este violino: http://jsfiddle.net/menocomp/y2s662b0/1/

Legal, se você estiver usando jquery-ui-1.8.5.custom.min.js e jquery-ui.multidatespicker.js, você pode modificar o jquery-ui-1.8.5.custom.min.js: from:

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

para dentro:

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

bem esta uma solução suja … mas funciona para mim … mesmo com showButtonPanel: true

  $(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" ); }); }); 

Você deve replace a function 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 adicione a opção apropriada à configuração do datepicker, como exemplo:

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

Seguindo o que Emil sugeriu, encontrei uma maneira mais fácil e agradável de modificar o widget para suportar um widget que não fechava no evento select.

Primeiro, adicionei outra propriedade ao padrão dict no widget:

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

Segundo, encontre esta declaração no método _selectDate:

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

E mude a condição para ser assim:

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

Experimente, está funcionando para mim. Eu fiz isso na versão 1.8.5 do JQuery UI.