CODEWITHSUNDEEP
jquerybootstrap-4datepickerjquery-ui-datepickerbootstrap-datepicker
Asl
Asl

Reputation: 1

Why is my Bootstrap datepicker being duplicated if opened too early?

I have a datePicker in my code and when I open the datepicker before all requests are done when they are done it's adding a inline-datepicker inside my datepicker dropdown here's my code

<div class="hand-date-picker mr-3">
@Html.TextBox("InHandDate", "", new { @class = "datepicker", @group = "inhanddate", @data_date_format = HelperMethods.GetDateFormat(), @data_test_selector = "txtInHandDate" })                                                                   <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span>
</div>

and init in class

$("#InHandDate").datepicker({
    //@ts-ignore
    daysOfWeekDisabled: '0,6'
});
$("#InHandDate").datepicker('setDaysOfWeekDisabled', [0, 6])

and in script element

$(document).ready(function () {
    let minDate;
    if ($("input[class='PickUpShipping']").is(":checked")){
        $(".CashOnPickup").show();
        $("#warehouses-select").css("display", "block");
        minDate = '@(HelperMethods.GetDateTime())';
    } else {
        $(".CashOnPickup").hide();
        $("#warehouses-select").css("display", "none");
        minDate = '@(HelperMethods.GetDateTime().AddDays(1))';
    }
    $("#InHandDate").datepicker('setStartDate', new Date(minDate))
});

$("input[name='ShippingOptions']").on("click", function (ev) {
    let minDate;
    if ($(this).data('shippingcode') === 'Pickup') {
        $(".CashOnPickup").show();
        $("#warehouses-select").css("display", "block");
        minDate = '@(HelperMethods.GetDateTime())';
    } else {
        $(".CashOnPickup").hide();
        $(".CashOnPickup input").prop('checked', false);
        $("#warehouses-select").css("display", "none");
        minDate = '@(HelperMethods.GetDateTime().AddDays(1))';
    }
    $("#InHandDate").datepicker('setStartDate', new Date(minDate))
});

$("input[name='ShippingOptions']").on("change", function (ev) {
    $("#InHandDate").datepicker('setDate', "");
});

I tried preventing it in multiple ways. but no luck so far

Upvotes: 0

Views: 61

Answers (1)

Asl
Asl

Reputation: 1

Apparently this was because no minDate attribute was set. adding '@minDate = ""' to HTML fixed the issue

Upvotes: 0

Related Questions