Question

I suppose this should work , but its not. Where did I went wrong?

<link rel="stylesheet" type="text/css" media="all" href="jsDatePick_ltr.min.css" />

<script type="text/javascript" src="jsDatePick.min.1.3.js"></script>

<script type="text/javascript">
window.onload = function(){
    new JsDatePick({
        useMode:2,
        target:"inputField",
        dateFormat:"%j-%n-%Y"
    });
};
</script>

This is the date picker script, working fine with one date picker on a single page, but my requirement is to have two of them.

I did :

 From Date :<input type="text" size="12"  name="date1" id="inputField"    
readonly="readonly"/>  


To Date :<input type="text" size="12"  name="date2" id="inputField"  
readonly="readonly"/>

But it’s not working. The date picker is showing up only for the second input field. If I am creating two ids, then do I have to make the same function twice? I did that too, but it does not helped.

Answer 1

Two element in the same page can not have the same id. You can try the following code:

<script type="text/javascript">
window.onload = function(){
 new JsDatePick({
    useMode:2,
    target:"inputField",
    dateFormat:"%j-%n-%Y"
});

 new JsDatePick({
    useMode:2,
    target:"inputField2",
    dateFormat:"%j-%n-%Y"
});
};
</script>

HTML can be like the following one:

 From Date :<input type="text" size="12"  name="date1" id="inputField"    
readonly="readonly"/>



To Date :<input type="text" size="12"  name="date2" id="inputField2"  
readonly="readonly"/>   

Hope it helps.