Jquery Datepicker is working only one and only for one input field

Question

I have implemented jquery datepicker for the first time in my project and i have two input fields which will take date as input and i have used class selector to in jquery. My jquery version is jquery-1.11.0.js and UI is jquery-ui-1.10.4.custom.js. But for only one field date picker is opening and that ti it is taking long time to open.

My HTML code is

<div>
    <label for="dateFrom" class="desc">
        <fmt:message key="date.from"/>
    </label>
    <input type="text" name="dateFrom" id="dateFrom" class="datepicker" value="" readonly="readonly"  />
</div>

<div>
    <label for="dateTo" class="desc">
        <fmt:message key="date.to"/>
    </label>
    <input type="text" name="dateTo" class="datepicker" id="dateTo" readonly="readonly" value=""/>
</div>

My Jquery Code is

$(function() {
    $('#dateFrom').click(function() {
        $('#dateFrom').datepicker();
    });

    $('#dateTo').click(function() {
        $('#dateFrom').datepicker();
    });
});

Shaunak D · Accepted Answer · 2014-05-29 05:42:59Z

1

Check this Demo Fiddle

If you wan't Date picker for all inputs,

$(function() {
    $('input').datepicker();
});

Else, for inputs with datepicker class.

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

And always specify, such functions on DOM ready, instead of on click of the target element.

answered May 29, 2014 at 5:42

Shaunak D

20.7k10 gold badges48 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Shaunak D Over a year ago

Check console for errors, or post your whole html including html with <script> tags. The fiddle is working.

user3244376 Over a year ago

Some errors are coming but how to make a jsp not include default js files

Quincy · Accepted Answer · 2014-05-29 05:58:28Z

0

Probably error in your code. You tried to create datepicker to #dateFrom in your #dateTo click event. It should be

 $(function() {
     $('#dateFrom').click(function() {
           $('#dateFrom').datepicker();
             });

     $('#dateTo').click(function() {

            $('#dateTo').datepicker();

        });

    });

or simply

 $(function() {
     $('.datepicker').click(function() {
           $(this).datepicker();
             });

    });

answered May 29, 2014 at 5:58

Quincy

4,4433 gold badges30 silver badges40 bronze badges

Collectives™ on Stack Overflow

Jquery Datepicker is working only one and only for one input field

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related