how to create Multiple instances on the same page of js function

Question

Consider the following code snippet :

    var from,to;
    to = $(".range-to-dt").persianDatepicker({
    inline: true,
    minDate: new persianDate(cleanDate(serverDateTime)),
    altField: '.range-to-dt-alt',
    altFormat: 'YYYY/MM/DD',
    initialValue: false,
    onSelect: function (unix) {
        to.touched = true;
        if (from && from.options && from.options.maxDate != unix) {
            var cachedValue = from.getState().selected.unixDate;
            from.options = { maxDate: unix };
            if (from.touched) {
                from.setDate(cachedValue);
            }
        }
    }
});
from = $(".range-from-dt").persianDatepicker({
    inline: true,
    observer: true,
    minDate: new persianDate(cleanDate(serverDateTime)),
    altField: '.range-from-dt-alt',
    altFormat: 'YYYY/MM/DD',
    initialValue: false,
    onSelect: function (unix) {
        from.touched = true;
        if (to && to.options && to.options.minDate != unix) {
            var cachedValue = to.getState().selected.unixDate;
            to.options = { minDate: unix };
            if (to.touched) {
                to.setDate(cachedValue);
            }
        }
    }
});

How can I use the js function on the same page more than once (in several different forms) to perform correctly?

<form id="form1" ...>
   <input asp-for="DateTimeRange.StartDate"  ltr-input range-from-dt-alt">
   <input asp-for="DateTimeRange.EndDate"  ltr-input range-to-dt-alt">
</form>
<form id="form2" ...>
    <input asp-for="DateTimeRange.StartDate"   ltr-input range-from-dt-alt">
   <input asp-for="DateTimeRange.EndDate"  ltr-input range-to-dt-alt">
</form>

Actually how to create Multiple instances on the same page of js function?

Please note that an id should always be unique. id="min-date-input" — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Jun 23, 2020 at 13:07
@CarstenLøvboAndersen : Yes, that's right. I deleted it ... how about now? — farshid
– farshid, Commented Jun 23, 2020 at 13:57

Théo Benoit · Accepted Answer · 2020-06-23 14:54:37Z

1

You have to loop through each form containing the 2 inputs.

You can add a class to your form instead of ID for example, like

<form class="startEndForm">
   // Your 2 inputs here
</form>

And then do something like that :

$('.startEndForm').each(function () {
 $(this).find(".range-to-dt").persianDatepicker({
    inline: true,
    minDate: new persianDate(cleanDate(serverDateTime)),
    altField: '.range-to-dt-alt',
    altFormat: 'YYYY/MM/DD',
    initialValue: false,
    onSelect: function (unix) {
        var from = $(this).parent().find('.range-from-dt');
        var to = $(this);
        to.touched = true;
        if (from && from.options && from.options.maxDate != unix) {
            var cachedValue = from.getState().selected.unixDate;
            from.options = { maxDate: unix };
            if (from.touched) {
                from.setDate(cachedValue);
            }
        }
    }
});
$(this).find(".range-from-dt").persianDatepicker({
    inline: true,
    observer: true,
    minDate: new persianDate(cleanDate(serverDateTime)),
    altField: '.range-from-dt-alt',
    altFormat: 'YYYY/MM/DD',
    initialValue: false,
    onSelect: function (unix) {
        var from = $(this);
        var to = $(this).parent().find('.range-to-dt');
        from.touched = true;
        if (to && to.options && to.options.minDate != unix) {
            var cachedValue = to.getState().selected.unixDate;
            to.options = { minDate: unix };
            if (to.touched) {
                to.setDate(cachedValue);
            }
        }
    }
});
});

edited Jun 23, 2020 at 14:54

answered Jun 23, 2020 at 13:56

Théo Benoit

5871 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

farshid Over a year ago

Uncaught TypeError: can't access property "touched", from is undefined

farshid Over a year ago

@ ThéoBenoit : Uncaught TypeError: $(...).forEach is not a function But if I use each one, it's not a problem!

Théo Benoit Over a year ago

Ah yes my bad, it's .each() in jQuery ! I'll edit it ;)

farshid Over a year ago

@ ThéoBenoit : Thank you very much for your guidance. But there is still a problem. There are range-from-dt-alt in both forms and it causes information to enter both forms at the same time.

Théo Benoit Over a year ago

@farshid I edited the answer, pretty sure it comes from the "onSelect" not assigned from and to with the good input. If it's not working, could you please provide a codepen or something so I can better help

|

Collectives™ on Stack Overflow

how to create Multiple instances on the same page of js function

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related