Several pickers on one page

[mayos]

In addition to my previous issue I've found out that if I create several pickers on one page(actually this is the same page with tabs, so all pickers are placed in one scope), each with its initial object, all pickers will be connected (or reinitialized) with the last called constructor with its object.

How this situation can be handled?

Thank you.

[nehakadam]

You can use parentElement parameter to achieve this. Add multiple elements to initialize each picker for which you want different object. Please try code below -

HTML Code -

<div id="tabs">
    <ul>
        <li><a href="#datepicker-tab">Date Picker</a></li>
        <li><a href="#timepicker-tab">Time Picker</a></li>
        <li><a href="#datetimepicker-tab">DateTime Picker</a></li>
    </ul>

    <div id="datepicker-tab">
        <p>Date : </p>
        <input type="text" data-field="date" readonly>
    </div>
    <div id="timepicker-tab">
        <p>Time : </p>
        <input type="text" data-field="time" readonly>
    </div>
    <div id="datetimepicker-tab">
        <p>DateTime : </p>
        <input type="text" data-field="datetime" readonly>
    </div>
</div>

<div id="dtBox-datepicker"></div>
<div id="dtBox-timepicker"></div>
<div id="dtBox-datetimepicker"></div>

Javascript Code -

<script type="text/javascript">

    var objDatePicker, objTimePicker, objDateTimePicker;

    $(document).ready(function()
    {
        $("#tabs").tabs();

        $("#dtBox-datepicker").DateTimePicker(
                {
            isPopup: false,
            parentElement: "#datepicker-tab",
            init: function()
            {
                objDatePicker = this;
            }
        });

        $("#dtBox-timepicker").DateTimePicker(
                {
            isPopup: false,
            parentElement: "#timepicker-tab",
            init: function()
            {
                objTimePicker = this;
            }
        });

        $("#dtBox-datetimepicker").DateTimePicker(
                {
            isPopup: false,
            parentElement: "#datetimepicker-tab",
            init: function()
            {
                objDateTimePicker = this;
            }
        });

        console.log("DatePicker : ");
        console.log(objDatePicker);
        console.log("TimePicker : ");
        console.log(objTimePicker);
        console.log("DateTimePicker : ");
        console.log(objDateTimePicker);
    });
</script>

[gtrbarbarian]

Unfortunately, it is not convenient to initialize in javascript for me, so I added a simple check for data-parentelement to the init function so I can decorate the div used for the datepicker

HTML Code -

<div id="dtBox" data-parentelement="#LoadList"></div>

DateTimePicker Plugin Code -

DateTimePicker.prototype = {

        // Public Method
        init: function () 
        {
            var oDTP = this;                    

            oDTP._setDateFormatArray(); // Set DateFormatArray
            oDTP._setTimeFormatArray(); // Set TimeFormatArray
            oDTP._setDateTimeFormatArray(); // Set DateTimeFormatArray

            if(oDTP.settings.isPopup)
            {
                oDTP._createPicker();
                $(oDTP.element).addClass("dtpicker-mobile");
            }

            // added if parentElement is specified through data-parentelement, then set here.
            if($(oDTP.element).attr('data-parentelement') !== undefined)
            {
               oDTP.settings.parentElement = $(oDTP.element).attr('data-parentelement');
            }


            if(oDTP.settings.init)
                oDTP.settings.init.call(oDTP);

            oDTP._addEventHandlersForInput();
        },

[nehakadam]

Thank you for a good suggestion to solve this issue @gtrbarbarian. Updated your comment to format it. I will make changes in the plugin, add example for this and release it tomorrow.