Apply jQuery datepicker to multiple instances

Question

I've got a jQuery date picker control that works fine for once instance, but I'm not sure how to get it to work for multiple instances.

<script type="text/javascript">
    $(function() {
        $('#my_date').datepicker();
    });
</script>

<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
<%=Html.TextBox("my_date")%> <br/>
<% Next%>
<% End Using%>

Without the For Each loop, it works fine, but if there's more than one item in the "MyRecords" collection, then only the first text box gets a date picker (which makes sense since it's tied to the ID). I tried assigning a class to the text box and specifying:

$('.my_class').datepicker();

but while that shows a date picker everywhere, they all update the first text box.

What is the right way to make this work?

That's VB inside an ASP.NET page - just a quick way to illustrate the point of the question. — gfrizzle
– gfrizzle, Commented Jan 15, 2010 at 20:07
Ensure the input fields are not disabled, the datepicker won't show up for input fields with the disabled attribute — bobobobo
– bobobobo, Commented Jan 6, 2018 at 17:25

SeanJA · Accepted Answer · 2009-04-01 23:01:40Z

133

html:

<input type="text" class="datepick" id="date_1" />
<input type="text" class="datepick" id="date_2" />
<input type="text" class="datepick" id="date_3" />

script:

$('.datepick').each(function(){
    $(this).datepicker();
});

(pseudo coded up a bit to keep it simpler)

answered Apr 1, 2009 at 23:01

SeanJA

10.4k5 gold badges34 silver badges43 bronze badges

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

5 Comments

gfrizzle Over a year ago

It looks like the heart of my problem is that the text boxes all have the same ID, so every date picker is updating the first text box. Your example doesn't suffer from that, so it works. How do I get the ID's to be different in a loop?

gfrizzle Over a year ago

Duh, don't let the text boxes have the same ID. Sometimes you have to step away from a problem for a while for the obvious answer to bubble up.

rapcal Over a year ago

Wouldn't $(".datepick").datepicker(); work once you have different ids on the input fields?

Will Over a year ago

I didn't have ID's on the inputs but had the same class. Work ok on Chrome and FF but not IE. To fix I just get the inputs ID's

techie_28 Over a year ago

I have attached datepicker to some HTML textboxes using CSS class name & onSelect event handler I need to know the selector class name on which current onSelect happened.. the elements have 2 other classes applied other then the one I am using to attach datepicker

Shuo · Accepted Answer · 2011-09-29 05:55:35Z

11

I just had the same problem.

The correct way to use date pick is $('.my_class').datepicker(); but you need to make sure you don't assign the same ID to multiple datepickers.

edited Sep 29, 2011 at 5:55

answered Dec 6, 2010 at 21:46

Shuo

4,8979 gold badges47 silver badges65 bronze badges

Comments

evilpenguin · Accepted Answer · 2009-04-01 22:45:24Z

The obvious answer would be to generate different ids, a separate id for each text box, something like

[int i=0]
<% Using Html.BeginForm()%>
<% For Each item In Model.MyRecords%>
[i++]
<%=Html.TextBox("my_date[i]")%> <br/>
<% Next%>
<% End Using%>

I don't know ASP.net so I just added some general C-like syntax code within square brackets. Translating it to actual ASP.net code shouldn't be a problem.

Then, you have to find a way to generate as many

$('#my_date[i]').datepicker();

as items in your Model.MyRecords. Again, within square brackets is your counter, so your jQuery function would be something like:

<script type="text/javascript">
    $(function() {
        $('#my_date1').datepicker();
        $('#my_date2').datepicker();
        $('#my_date3').datepicker();
        ...
    });
</script>

3 revs, 3 users 66% · Accepted Answer · 2011-03-25 14:11:18Z

<html>
<head>
 <!-- jQuery JS Includes -->
 <script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.core.js"></script>
 <script type="text/javascript" src="jquery/ui/ui.datepicker.js"></script>

 <!-- jQuery CSS Includes -->
 <link type="text/css" href="jquery/themes/base/ui.core.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.datepicker.css" rel="stylesheet" />
 <link type="text/css" href="jquery/themes/base/ui.theme.css" rel="stylesheet" />

 <!-- Setup Datepicker -->
 <script type="text/javascript"><!--
  $(function() {
   $('input').filter('.datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showOn: 'button',
    buttonImage: 'jquery/images/calendar.gif',
    buttonImageOnly: true
   });
  });
 --></script>
</head>
<body>

 <!-- Each input field needs a unique id, but all need to be datepicker -->
 <p>Date 1: <input id="one" class="datepicker" type="text" readonly="true"></p>
 <p>Date 2: <input id="two" class="datepicker" type="text" readonly="true"></p>
 <p>Date 3: <input id="three" class="datepicker" type="text" readonly="true"></p>

</body>
</html>

CSchulz · Accepted Answer · 2014-02-19 09:53:11Z

There is a simple solution.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>      
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"> </script> 
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/flexcroll.js"></script>
        <script type="text/javascript" src="../js/jquery-ui-1.8.18.custom.min.js"></script>
        <script type="text/javascript" src="../js/JScript.js"></script>
        <title>calendar</title>    
        <script type="text/javascript"> 
            $(function(){$('.dateTxt').datepicker(); }); 
        </script> 
    </head>
    <body>
        <p>Date 1: <input id="one" class="dateTxt" type="text" ></p>
        <p>Date 2: <input id="two" class="dateTxt" type="text" ></p>
        <p>Date 3: <input id="three" class="dateTxt" type="text" ></p>
    </body>
</html>

Harshit Singh · Accepted Answer · 2013-10-08 08:54:20Z

2

When adding datepicker at runtime generated input textboxes you have to check if it already contains datepicker then first remove class hasDatepicker then apply datePicker to it.

function convertTxtToDate() {
        $('.dateTxt').each(function () {
            if ($(this).hasClass('hasDatepicker')) {
                $(this).removeClass('hasDatepicker');
            } 
             $(this).datepicker();
        });
    }

answered Oct 8, 2013 at 8:54

Harshit Singh

211 bronze badge

Comments

Alex Grande · Accepted Answer · 2009-11-10 17:44:49Z

1

The solution here is to have different IDs as many of you have stated. The problem still lies deeper in datepicker. Please correct me, but doesn't the datepicker have one wrapper ID - "ui-datepicker-div." This is seen on http://jqueryui.com/demos/datepicker/#option-showOptions in the theming.

Is there an option that can change this ID to be a class? I don't want to have to fork this script just for this one obvious fix!!

answered Nov 10, 2009 at 17:44

Alex Grande

111 bronze badge

1 Comment

gfrizzle Over a year ago

That may just be the "sample" part of the sample code. I don't think it actually generates a div with that ID. Making sure each of my target objects had unique ID's made everything work as expected.

user1572418 · Accepted Answer · 2014-11-23 11:17:11Z

1

A little note to the SeanJA answer.

Interestingly, if you use KnockoutJS and jQuery together the following inputs with different IDs, but with the same data-bind observable:

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: first_dt" id="date_2" class="datepick" />

will bind one (the same) datepicker to both of the inputs (even though they have different ids or names).

Use separate observables in your ViewModel to bind a separate datepicker to each input:

<data-bind="value: first_dt" id="date_1" class="datepick" />
<data-bind="value: second_dt" id="date_2" class="datepick" />

Initialization:

$('.datepick').each(function(){
    $(this).datepicker();
});

edited Nov 23, 2014 at 11:17

answered Nov 23, 2014 at 11:06

user1572418

3732 silver badges9 bronze badges

1 Comment

Gigi2m02 Over a year ago

You should never work that way in combination with KnockoutJS. It's way better and cleaner if you bind your datepicker using a bindingHandler.

Aehandasa · Accepted Answer · 2010-11-01 06:54:56Z

0

To change use of class instead of ID

<script type="text/javascript"> 
    $(function() { 
        $('.my_date1').datepicker(); 
        $('.my_date2').datepicker(); 
        $('.my_date3').datepicker(); 
        ... 
    }); 
</script>

answered Nov 1, 2010 at 6:54

Aehandasa

312 bronze badges

1 Comment

brichins Over a year ago

And surely we wouldn't want alternate approaches... although I admit that while this would work, I wouldn't use it. Especially after seeing the accepted answer - but to each his own.

kad81 · Accepted Answer · 2012-01-12 23:18:16Z

0

I had the same problem, but finally discovered that it was an issue with the way I was invoking the script from an ASP web user control. I was using ClientScript.RegisterStartupScript(), but forgot to give the script a unique key (the second argument). With both scripts being assigned the same key, only the first box was actually being converted into a datepicker. So I decided to append the textbox's ID to the key to make it unique:

Page.ClientScript.RegisterStartupScript(this.GetType(), "DPSetup" + DPTextbox.ClientID, dpScript);

answered Jan 12, 2012 at 23:18

kad81

11k3 gold badges40 silver badges44 bronze badges

Comments

mozgras · Accepted Answer · 2013-07-30 06:46:51Z

0

I had a similar problem with dynamically adding datepicker classes. The solution I found was to comment out line 46 of datepicker.js

// this.element.on('click', $.proxy(this.show, this));

answered Jul 30, 2013 at 6:46

mozgras

3,3253 gold badges23 silver badges18 bronze badges

Comments

jamsandwich · Accepted Answer · 2015-09-07 01:23:10Z

0

In my case, I had not given my <input> elements any ID, and was using a class to apply the datepicker as in SeanJA's answer, but the datepicker was only being applied to the first one. I discovered that JQuery was automatically adding an ID and it was the same one in all of the elements, which explained why only the first was getting datepickered.

answered Sep 7, 2015 at 1:23

jamsandwich

3835 silver badges13 bronze badges

Comments

Satheesan K · Accepted Answer · 2025-05-28 06:56:38Z

0

$('#date1, #date2', #date3').datepicker({ autoclose: true, todayHighlight: true, format: 'dd-M-yyyy' });

answered May 28 at 6:56

Satheesan K

1

1 Comment

Community May 28 at 11:42

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Apply jQuery datepicker to multiple instances

13 Answers 13

5 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

13 Answers 13

5 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related