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

Question

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

can you please add complete code snippet – Yash Soni Sep 30 '19 at 12:20 — Yash Soni, Sep 30 '19 at 12:20
code snippet of which part? – Aayush Dahal Sep 30 '19 at 12:24 — Aayush Dahal, Sep 30 '19 at 12:24

score 0 · Answer 1 · answered Mar 04 '20 at 12:52

0

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

answered Mar 04 '20 at 12:52

joseph

11
3

score 0 · Answer 2 · answered Jun 15 '20 at 22:16

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);

score -1 · Answer 3 · answered Sep 30 '19 at 12:12

-1

try using this command

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

reference from this link Similar question

answered Sep 30 '19 at 12:12

Yash Soni

764
3
14

`Cannot read property 'apply' of undefined`. It looks like the question you referenced is using different plugin. – Aayush Dahal Sep 30 '19 at 12:18
it is using bootstrap datepicker – Yash Soni Sep 30 '19 at 12:19

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

Body

Script

3 Answers3