CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
HPWD
HPWD

Reputation: 2240

trigger jquery datepicker via a function

I have a long list of items with date fields. Allowing jQuery to assign the datepicker to all the items with the class of datepicker is creating a pop up script (something to the effect of the script is runnning a really long time, do you want to stop the script, yes or no) not to mention it is taking a while for the document be rendered. When we remove the datepicker class, the page is rendered almost immediately. So, what I'd like to do is have the input field where the date would normally be populated with a trigger (link or graphic) that can be clicked to fire the datepicker popup calendar. This way, we only need to provide the popup calendar only on the field that actually needs it.

IDs are not available, only the name attribute is. 

    <tr>
    <td><input type='text' name='StartDate' /> <span onclick='ShowCalendar()'>Calendar</span></td>
    <td>other fields</td>
    <td>more fields</td>
    </tr>

Upvotes: 0

Views: 1360

Answers (3)

Ata ul Mustafa
Ata ul Mustafa

Reputation: 1192

You needed to have your datepicker files loaded in the page. Then use something like this In below code "todo_date" is a textfield id which is used to trigger the jquery datepicker.

$( "#todo_date" ).datepicker();
function myFunc(){
  $("#calendar_img").click(function(e) { 
     $("#todo_date").datepicker("show");
  });
}

Hope this helps

Upvotes: 0

Ondřej Xicht Světl&#237;k
Ondřej Xicht Světl&#237;k

Reputation: 591

I tried the following:

<script type="text/javascript">
    function createDatepicker(input) {
        $(input).datepicker().datepicker("show");
    }
</script>

<input type="text" name="someText" /><br />
<input type="text" name="someDate" onclick="createDatepicker(this)" /><br />
<input type="text" name="someText" /><br />
<input type="text" name="someDate" onclick="createDatepicker(this)" /><br />

Using this answer, I constructed the above solution: How to run date picker on the first onclick event?

Upvotes: 1

AlbertVo
AlbertVo

Reputation: 772

What you can do is pass the current element to your ShowCalendar function using the "this" keyword. You can then use that as a reference to find the corresponding date field by traversing the dom using jQuery functions. In your example, you could use the prev() function.

<tr>
<td><input type='text' name='StartDate' /> <span  onclick='ShowCalendar(this)'>Calendar</span></td>
<td>other fields</td>
<td>more fields</td>
</tr>

Upvotes: 0

Related Questions