date picker take same values of date

Question

I have two date picker to select start date and end date.when I select date from 1st its work fine but when I select date from 2nd date picker it overwrites the date of first selected. My code is:

<script type="text/javascript" src="datetimepicker_css.js" /></script>
<table align="left" class="tbl_altcolor shadow" style="width:35%; margin-left:20px">
<tbody>
<tr>
     <td>Date-From:</td>
      <td>
         <input type="Text" id="demo3" class="input required" maxlength="20" size="15" name="time3">
         <img src="images2/date.png" align="center" width="20" height="20" border="0" onclick="javascript:NewCssCal('demo3','yyyyMMdd')" style="cursor:pointer"/>
        <span class="descriptions"></span>
        </td>

         <td>Date-To:</td>
      <td>
         <input type="Text" id="demo2" class="input required" maxlength="20" size="15" name="time5">
         <img src="images2/date.png" align="center" width="20" height="20" border="0" onclick="javascript:NewCssCal('demo3','yyyyMMdd')" style="cursor:pointer"/>
        <span class="descriptions"></span>
        </td>
</tr>

How to resolve this?

Answer 1

On clicking the image, your code triggers this:

javascript:NewCssCal('demo3','yyyyMMdd')

it is triggering the calendar on input with id demo3 while the element you provided in you example has an id demo2:

<input type="Text" id="demo2" class="input required" maxlength="20" size="15" name="time5">

Therefore ensure that you elements have the proper id and and correctly being referred to when the click is triggered.

The HTML code should be:

<table align="left" class="tbl_altcolor shadow" style="width:35%; margin-left:20px">
    <tbody>
        <tr>
            <td>Date-From:</td>
            <td>
                <input type="Text" id="demo2" class="input required" maxlength="20" size="15" name="time3">
                <img src="http://www.rainforestnet.com/datetimepicker/images2/cal.gif" align="center" width="20" height="20" border="0" onclick="javascript:NewCssCal('demo2','yyyyMMdd')" style="cursor:pointer" />    <span class="descriptions"></span>

            </td>
        </tr>
        <tr>
            <td>Date-To:</td>
            <td>
                <input type="Text" id="demo3" class="input required" maxlength="20" size="15" name="time5">
                <img src="http://www.rainforestnet.com/datetimepicker/images2/cal.gif" align="center" width="20" height="20" border="0" onclick="javascript:NewCssCal('demo3','yyyyMMdd')" style="cursor:pointer" />    <span class="descriptions"></span>

            </td>
        </tr>
    </tbody>
</table>

Here is the JSFiddle demo