CODEWITHSUNDEEP
jqueryeonasdan-datetimepicker
Aayush Dahal
Aayush Dahal

Reputation: 1182

Unable to destroy bootstrap datetimepicker - (Cannot read property 'destroy' of undefined)

I am using Eonasdan bootstrap datetimepicker which can be found at https://eonasdan.github.io/bootstrap-datetimepicker/.

I have a scenario where I want to destroy / reinitialize the plugin.

I have the following code:

Body

@foreach($available_slot as $ak => $av)

    <a href="#" data-slot_start_time="{{$av['start']}}" data-slot_end_time="{{$av['end']}}" data-enabled_hours="{{$av['enabledHours']}}" class="btn btn-xs btn-success bookNow">Book Now</a>

@endforeach

Script

$(function(){
    var $body = $('body');
    $body.on('click','.bookNow',function(){
        var slotStartTime = $(this).data('slot_start_time');
        var slotEndTime = $(this).data('slot_end_time');
        var enabledHours = $(this).data('enabled_hours');
        fillBookingModalForm(enabledHours,slotStartTime,slotEndTime);
        $('#bookingFormModal').modal('show');
    });

});

function fillBookingModalForm(hours,slotStartTime,slotEndTime)
{
    $('#bookingFormFront #slotStartTime').val(slotStartTime);
    $('#bookingFormFront #slotEndTime').val(slotEndTime);

    //in this line I tried to destroy
    $('#start_time').data("DateTimePicker").destroy();


    $("#start_time").datetimepicker({
        useCurrent: false,
        format: "hh:mm a",
        enabledHours: hours,
        stepping: 30
    });
}

This is the link where I found about the destroy function. https://eonasdan.github.io/bootstrap-datetimepicker/Functions/

But, when I added the line $('#start_time').data("DateTimePicker").destroy(); it display following error on the console window.

Uncaught TypeError: Cannot read property 'destroy' of undefined

Upvotes: 0

Views: 1614

Answers (3)

Aadam
Aadam

Reputation: 1541

Ok for someone who is trying $('#datetimepicker').data("DateTimePicker").date(null) and you get error .data is undefined. Then you can use below jugaad, I do not know how good it is, but it worked out for me

function getDateTimeObj(ele) {
    if(ele && ele[0]){
        for(k in ele[0]){
            if(ele[0][k].hasOwnProperty('DateTimePicker')){
                return ele[0][k]['DateTimePicker'];
            }
        }
    }
}

USAGE:

getDateTimeObj($('#datetimepicker')).date(null);

Upvotes: 0

joseph
joseph

Reputation: 11

$("#start_time").datetimepicker("remove") worked for me

Upvotes: 0

Yash Soni
Yash Soni

Reputation: 764

try using this command 

 $("#start_time").datepicker('remove');

reference from this link Similar question

Upvotes: -1

Related Questions