CODEWITHSUNDEEP
javascriptjquerydatecalendar
John Ken
John Ken

Reputation: 962

Javascript datepicker

I 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 ?

Upvotes: 0

Views: 3117

Answers (4)

Eonasdan
Eonasdan

Reputation: 7763

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"/>

Upvotes: 0

K6t
K6t

Reputation: 1845

 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

Upvotes: 0

Chandu
Chandu

Reputation: 82943

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"  />

Upvotes: 1

Clive
Clive

Reputation: 36965

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"
});

Upvotes: 2

Related Questions