Hide Bootstrap DatePicker (plugin) On initial Create / Edit display

l0z

Is it possible to automatically hide the date picker so that it only displays when the input field is clicked? If so can you provide an example?

Also, is it also possible to disallow typing into the input manually? (I tried adding: [code]"attrs": { "readonly": "" }[/code] but it didn't seem to have any effect.

Thanks

allan

> Is it possible to automatically hide the date picker so that it only displays when the input field is clicked?

jQuery UI has a `showOn` option ( http://api.jqueryui.com/datepicker/#option-showOn ) which you could set to be 'button' which I think will resolve it. Otherwise you could do something like: `$('#DTE_Field_registered_date').datepicker('hide')` in an `onOpen` event.

> Also, is it also possible to disallow typing into the input manually?

I don't see an option in jQuery UI to do that. There is a `constrainInput` option that might be attractive ( http://api.jqueryui.com/datepicker/#option-constrainInput )? Otherwise, I think it would be a case of attaching a `keypress` event handler to the input element and using `preventDefault()` to stop key presses.

Allan

l0z

I'm using the Bootstrap DatePicker (plugin), not jQueryUI. I said so in the subject, but not in the message body, sorry.

l0z

I've tried using this code:

[code]
editor.on('onOpen', function (e) {
$('DTE_Field_QuoteDate').prop('readonly', true);
$('DTE_Field_QuoteDate').hide();
});
[/code]

But no luck. Any help would be much appreciated.

l0z

This doesn't work either (just trying to hide the picker on bootstrap editor display):

[code]
editor.on('onOpen', function (e) {
$('DTE_Field_QuoteDate').datepicker('hide');
});
[/code]

l0z

This has no effect either:

[code]
editor.on('onOpen', function (e) {
$('DTE_Field_QuoteDate').keypress(function (event) {
event.preventDefault();
});
});
[/code]

Does the datepicker get re-initialised after the onOpen event has fired or something like that?

l0z

Just to add, I've noticed I missed the # sign from the id selectors in the code above, but they are there in my code. So it should have looked:

[code]
editor.on('onOpen', function (e) {
$('#DTE_Field_QuoteDate').datepicker('hide');
$('#DTE_Field_QuoteDate').keypress(function (event) {
event.preventDefault();
});
});
[/code]

The issues still remain... :-(

allan

My bad, as I was writing my response I did have in the back of my mind bootstrap, but I thought it was because I'd just been working on another Bootstrap problem. So it goes!

> Does the datepicker get re-initialised after the onOpen event has fired or something like that?

No - it is initialised on first run only. The same instance is then reused.

I have a feeling that this is actually a quirk of Editor 1.2. What I think is happening is that Editor is firing the focus event once the display animation is complete - however, the onOpen event occurs just as the animation has started...

To test that theory, you could add: `jQuery.fx.off = true;` to your code, and I think that might resolve it as a bit of a jacky workaround.

Editor 1.3 has changed how the focus works - so it is actually triggered before onOpen. Very happy to send you a beta of 1.3 if you'd like to try it. Based on your comments here as well, I think I might include an option to disable the initial focus of the form.

Thanks,
Allan

l0z

Hi Allan. 1.3 would be great, and I'm happy to take the time to integrate it if you're confident it works even though it's a beta (and bearing in mind I'm using Twitter Bootstrap 2).

Will I have to refactor my HTML/JS or server side code differently from version 1.2?

I'm using DataTables 1.9.4 with colVis and columnFilter plugins, and have written the server side in .NET MVC, but I had to make a few minor changes to those plugins to get colVis and columnFilter to behave nicely together...

l0z

Hi Allan.

Did you get a chance to put version 1.3 online yet? Also, what is the "attrs" property for if it doesn't add attributes to the bootstrap input?

Thanks,
Mark

l0z

In the end I bulldozered the code. I removed the .focus() method call on lines 1431 and 1542 of dataTables.editor.js. This stopped the first field receiving the focus when the Create or Edit buttons are clicked, which I'm happy with as way of stopping the datepicker from displaying on the first field.

I also added an "ro-datepicker" class and a readonly attribute as per the code below (in editor.bootstrap-date.js), which allowed me to make the input read only and style it to look editable, as the bootstrap datepicker still sets the value fine if the input is read only:

[code]
$.fn.dataTable.Editor.fieldTypes.date = {
"create": function ( conf ) {
conf._input = $('')
.attr( $.extend( {
id: conf.id,
type: 'text',
'class': 'datepicker ro-datepicker',
'readonly': ''
}, conf.attr || {} ) )
.datepicker( conf.opts || {} );

return conf._input[0];
},
[/code]

Thanks for your help which pointed me in the right direction... where there's a will... :-)

allan

Oops - sorry. I clean forgot to send you a beta copy yesterday. Are you still interested in having a play with it?

Great to hear you've got a fix for the issue you were having though!

Allan

l0z

Hi Allan. I think I'll leave it for now as I have a workaround. If I have any other issues I'll be in touch.

Thanks,
Mark