Editor field type plugin for Bootstrap Datepicker

tomduke

Hi,

Has anyone created a field type plug-in for the Bootstrap datepicker? I have a page currently using it, and if I add a 'date' field type in a datatables editor I'm getting an error - I assume due to a conflict with the jQuery UI datepicker.

If no one has done it yet could you perhaps point me in the right direction to get started on this Allan?

Thanks
- Tom

allan

Hi Tom,

Sounds like it would be a very useful plug-in. Its not something I'm aware of having been done yet (its on my to-do list!), but this tutorial might get you started with creating a custom field type plug-in: https://editor.datatables.net/tutorials/field_types

Regards,
Allan

tomduke

Allan,

Hi - this is my attempt so far:

[code]
// Custom field type : Bootstrap Datepicker
// https://github.com/eternicode/bootstrap-datepicker
$.fn.DataTable.Editor.fieldTypes.bootstrapdate = $.extend( true, {}, $.fn.DataTable.Editor.models.fieldType, {
"create": function ( conf ) {

// Create the elements to use for the input
conf._input = $(
''+
''+
''+
'').attr( $.extend( {
id: conf.id
}, conf.attr || {} ) );

if ( ! conf.format ) {
conf.format = 'dd/mm/yyyy';
}

$(this).bind('onInitComplete', function () {
$( conf._input ).datepicker({ "format" : conf.format });
} );

return conf._input[0];
},

"get": function ( conf ) {
return $('input', conf._input).val();
},

"set": function ( conf, val ) {
conf._input.datepicker( "update" , val );
},

"enable": function ( conf ) {
$('input', conf._input).removeProp('disabled');
},

"disable": function ( conf ) {
$('input', conf._input).prop('disabled', true);
}

} );
[/code]

It *seems* to be working ok, though I'm sure it needs tidying up.

- Tom

psharp

@Allen,

I went to the plugin example for editors and I'm getting a 500 error at the following location:
https://editor.datatables.net/release/DataTables/extras/Editor/examples/fieldPlugin.html

The link is from this page:
https://editor.datatables.net/tutorials/field_types

tomduke

Hi,

This works (i.e. the non-SSL url):

http://editor.datatables.net/release/DataTables/extras/Editor/examples/fieldPlugin.html

- Tom

psharp

D'oh, thanks Tom.

allan

@psharp - My mistake. Server configuration error. It will work now :-)

@tomduke - That looks excellent. Thanks for sharing your solution with us!

Regards,
Allan

LuisGnzlz

Hi Guys, I need a help Can put the all code the datepicker boostrap? Sorry my English

allan

Hi Luiz,

It looks like your trial expired back in February. If you want to continue using Editor, please purchase a license so we can support it.

Regards,
Allan

Llgr1

Hi.. now can help me with the datepicker?

allan

I've put a Bootstrap plug-in for Editor up on the Editor field type plug-ins page now: https://editor.datatables.net/fields/plugins . It is available for all licensed users of Editor.

Regards,
Allan