Custom plugin with two datepickers

jtoler5

I have tried creating a plugin to extend the current bootstrap datepicker field type. The reason for this we to have to datepickers for one cell (one column in a the database), w/ a start and end date. I know this is not the best way to create this plug in, but it seemed to work until I ran into an issue after creating 2 new entries. The second time you open the new entry modal, the values are not cleared. Any help fixing this issue would be awesome! Thanks.

$.fn.dataTable.Editor.fieldTypes.date_range = $.extend( true, {}, $.fn.dataTable.Editor.models.fieldType, {
    "create": function ( conf, id ) {
            var that = this;
            conf._enabled = true;

            conf._input = $(
                '<div class="input-daterange">'+
                '<input type="text" class="input-sm form-control date-range-picker" id="start" name="start" />'+
                '<span class="date-range-addon">to</span>'+
                '<input type="text" class="input-sm form-control date-range-picker" id="end" name="end" />'+
                '</div>').datepicker( conf.opts || {} );

            conf._input.children('#end').prop( 'disabled', true );

            if ( conf._enabled ) {
                conf._input.children('#start').datepicker().on('changeDate', function(e){
                    var endDate = conf._input.children('#end').datepicker('getDate').getTime();
                    if($(this).datepicker('getDate').getTime() == endDate){
                        
                        conf._input.children('#end').datepicker('update', '');
                    }
                });
            }

            /*
             * Add methods for Editor field, so they can be accessed using `editor.field('name').show();`.
             */
            $.each( [
                'remove',
                'show',
                'hide',
                'update',
                'setDate',
                'setUTCDate',
                'getDate',
                'getDates',
                'getUTCDate',
                'setStartDate',
                'setEndDate',
                'setDaysOfWeekDisabled'
            ], function (i, val) {
                $.fn.dataTable.Editor.fieldTypes.date[ val ] = function () {
                    var args = Array.prototype.slice.call(arguments);
                    var conf = args.shift();

                    args.unshift( val );
                    conf._input.datepicker.apply( conf._input, args );
                };
            } );

            return conf._input[0];
        },

        "get": function ( conf ) {
            var date = conf._input.children('#start').val()
            var date2 = conf._input.children('#end').val();
            if (date2.trim()) {
                date += '-'+ conf._input.children('#end').val();
            }
            conf._input.val(date).datepicker('update');
            return date;
        },

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

        "enable": function ( conf ) {
            conf._input.prop( 'disabled', false );
        },

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

        "node": function ( conf ) {
            /*
             * Non-standard Editor methods - custom to this plug-in
             */
            return conf._input;
        },

        owns: function ( conf, node ) {
            /* THe date control will have redrawn itself, creating new nodes by the
             * time this function runs if clicking on a date. So need to check based
             * on class if the date picker owns the element clicked on
             */
            var isCell = $(node).hasClass('day') || $(node).hasClass('month') || $(node).hasClass('year');
            return $(node).parents('div.datepicker').length || isCell ?
                true :
                false;
        }
});