Editor field type plugin for Bootstrap Datepicker

Editor field type plugin for Bootstrap Datepicker

tomduketomduke Posts: 9Questions: 1Answers: 0
edited May 2013 in Editor
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

Replies

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • tomduketomduke Posts: 9Questions: 1Answers: 0
    edited May 2013
    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
  • psharppsharp Posts: 39Questions: 0Answers: 0
    @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
  • tomduketomduke Posts: 9Questions: 1Answers: 0
    Hi,

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

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

    - Tom
  • psharppsharp Posts: 39Questions: 0Answers: 0
    D'oh, thanks Tom.
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    @psharp - My mistake. Server configuration error. It will work now :-)

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

    Regards,
    Allan
  • LuisGnzlzLuisGnzlz Posts: 1Questions: 0Answers: 0
    Hi Guys, I need a help Can put the all code the datepicker boostrap? Sorry my English
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
  • Llgr1Llgr1 Posts: 1Questions: 0Answers: 0
    Hi.. now can help me with the datepicker?
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    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
This discussion has been closed.