Javascript datepicker

开发者_如何学JAVAI have following javascript function

    window.onload = function(){
        new JsDatePick({
            useMode:2,
            target:"datafield",
            dateFormat:"%d-%M-%Y"
        });
    };


<input name="fromdate" type="text" id="datafield"  /> 

<input name="todate" type="text" id="datafield"  />

and when i click fromdate text field datepicker shows, when i click todate text field datepicker not display due to same ID ,how it overcomes ?

You can't actually have two elements with the same ID, it's invalid. Either change your code to work from a class name, or change the ID of the second datepicker input (e.g. to datafield2) and add another line in your javascript:

new JsDatePick({
  useMode:2,
  target:"datafield2",
  dateFormat:"%d-%M-%Y"
});

As you have rightly identified the issues is with repeating ID.

Change your Code to as follows to use different ID for each textbox.

  window.onload = function(){
        new JsDatePick({
            useMode:2,
            target:"fromdate",
            dateFormat:"%d-%M-%Y"
        });
                        new JsDatePick({
            useMode:2,
            target:"todate",
            dateFormat:"%d-%M-%Y"
        });
    };


<input name="fromdate" type="text" id="fromdate"  /> 

<input name="todate" type="text" id="todate"  />

 window.onload = function(){
        new JsDatePick({
            useMode:2,
            target:"fromdate",
            dateFormat:"%d-%M-%Y"
        });
new JsDatePick({
            useMode:2,
            target:"todate",
            dateFormat:"%d-%M-%Y"
        });
    };


<input name="fromdate" type="text" id="fromdate"  /> 

<input name="todate" type="text" id="todate"  />

id replacement takes one time if 2 similar id name in same page

why not just use jquery ui's datepicker? then use

$(function() {
    $(".datepicker" ).datepicker();
});

where a class of datepicker has been added to each textbox

<input name="fromdate" type="text" id="fromdate" class="datepicker"/> 
<input name="todate" type="text" id="todate" class="datepicker"/>