Dynamic binding datetimepicker

Question

I'm populating the page on load from php data. The datetimepicker class have been added to date field type input-text. This elementts are displayed in row similar to standard table but wrapped with div instead.

On each row an add button is available which create dynamic elements using jquery clone method (with events) and appended in div wrapper as last element set.

var div_item_clone = $(this).closest('.div-item-wrapper').clone(true, true);
$('.div-items-wrapper').append(div_item_clone );

Work just fine, except that when I click the cloned input-text associated to datetimepicker() the focus gets redirected to source input-text and the popup calendar, displayed in the source input-text rather than the selected input.

Dynamic binding solutions are mentioned here but did not resolve my issue.

Mohammad Ismail · Answer 1 · 2022-10-04T05:15:17.420

In this case I always use input type= date. but if you need to format the visual value to local format such as dd-mm-yyyy .. you can using following js and css code :

 $('input[type="date"]').each(function () {
        var today = new Date();
        var value = $(this).val();
        if (value == "") {
            var m = today.getMonth() < 9 ? "0" + (today.getMonth() + 1).toString() : (today.getMonth() + 1).toString();
            var d = today.getDate() <= 9 ? "0" + today.getDate().toString() : today.getDate().toString();
            value = "" + today.getFullYear().toString() + "-" + m + "-" + d;
             console.log(value);
        }

        var strDate = value.toString();
        var year = strDate.substring(0, 4);
        var month = strDate.substring(5, 7);
        var day = strDate.substring(8, 10);
        var full = day +"-"+ month + "-" + year;
        $(this).attr("data-value", full);
        $(this).val(value);

    });
    $("input[type='date']").change(function () {
        var value = $(this).val();
        var year = value.substring(0, 4);
        var month = value.substring(5, 7);
        var day = value.substring(8, 10);
        var full = day +"-"+ month + "-" + year;
        $(this).attr("data-value", full);
    });

input[type="date"] {
    position: relative;
}

    input[type="date"]::after {
        content: attr(data-value);
        position: absolute;
        z-index: 88;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: white;
        padding:3px 0px 2px 10px;
    }
    ::-webkit-datetime-edit {
    padding: 1em;
}

::-webkit-datetime-edit-fields-wrapper {
    background: white;
}

::-webkit-datetime-edit-text {
    color: black;
    padding: 0 0.3em;
}

::-webkit-datetime-edit-month-field {
    color: white;
}

::-webkit-datetime-edit-day-field {
    color: white;
}

::-webkit-datetime-edit-year-field {
    color: white;
}

::-webkit-inner-spin-button {
    display: none;
}

::-webkit-calendar-picker-indicator {
    background-image: none;
    background-color: transparent;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 99;
    right: 0;
    top: 2px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<input type="date" class="datepicker"/>

I have shared what I have do in this case. as I am not so interested with other date picker plugins

thank and best regards

Dynamic binding datetimepicker

1 Answers1