Question

The following is code for a datepicker. When we select a date in from field, all the dates in “to” field which are below “from” field are blocked. I want to generate these ids with the help of for loop, but when I run this code the textbox only shows the datepicker with proper functionality of “from” and “to”.

$(function () {
    var frm = 0;
    var tu = 0;
    var i = 0;
    for (i = 1; i <= 5; i++) {
        frm = "#from" + i;
        tu = "#to" + i;
        $(frm).datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy/mm/dd',
            maxDate: '-1',
            onSelect: function (selected) {
                $(tu).datepicker("option", "minDate", selected)
            }
        });
        $(tu).datepicker({
            dateFormat: 'yy/mm/dd',
            changeMonth: true,
            changeYear: true,
            maxDate: '-1',
            onSelect: function (selected) {
                $(frm).datepicker("option", "maxDate", selected)
            }
        });
    }
});

html is generated by php
for ($a=1;$a<=$i;$a++) {

echo("
    <li>

    <input type=\"text\" name=\"course_name$a\" class=\"jq_watermark required\" placeholder=\"Course Name\" title=\"$x Certified Course Name\" style=\"width:11.6em;\"> 
    <tab></tab>
    <input type=\"text\" name=\"course_institute$a\" class=\"jq_watermark required\" placeholder=\"Institute Name\" title=\"$x Institute Name\" style=\"width:11.6em;\"> 
    <tab></tab>
        <br />
    <input type=\"text\" id=\"from$a\" name=\"course_start_date$a\" class=\"required\" placeholder=\"Certified Course Start Date\" title=\"$x Certified Course Start Date\" style=\"width:11.6em;\" readonly=\"readonly\"> 
    &nbsp to&nbsp
    <input type=\"text\" id=\"to$a\" name=\"course_end_date$a\" class=\"required\" placeholder=\"Certified Course End Date\" title=\"$x Certified Course End Date\" style=\"width:11.6em;\"> 
    <br />
     <input type=\"text\" name=\"course_city$a\" class=\"required\" placeholder=\"City\" title=\"$x Training Institute City Name!\" style=\"width:11.6em;\"> 
    <tab></tab>
     <input type=\"text\" name=\"course_country$a\" class=\" required\" placeholder=\"Country\" title=\"$x Training Institute Country Name!\" style=\"width:11.6em;\"> 
    <tab></tab>
    <button title=\"Your Training Certificate Scanned Picture, Please!\">Upload Training Certificate</button>
    </li> 
    ");

}

Answer 1

Due to the closure created by your anonymous functions you always have the same frm/tu (should be to btw.) variable. By introducing a self-calling anonymous function which receives those variables as parameters you create new ones avoiding this issue:

$(function () {
    var frm = 0;
    var tu = 0;
    var i = 0;
    for (i = 1; i <= 5; i++) {
        frm = "#from" + i;
        tu = "#to" + i;
        (function (frm, tu) {
            $(frm).datepicker({
                changeMonth: true,
                changeYear: true,
                dateFormat: 'yy/mm/dd',
                maxDate: '-1',
                onSelect: function (selected) {
                    $(tu).datepicker("option", "minDate", selected)
                }
            });
            $(tu).datepicker({
                dateFormat: 'yy/mm/dd',
                changeMonth: true,
                changeYear: true,
                maxDate: '-1',
                onSelect: function (selected) {
                    $(frm).datepicker("option", "maxDate", selected)
                }

            });
        })(frm, tu);
    }
});