JQuery UI, multiple datepickers on single page

Question

I'm creating a PHP site for property. I'm new to jQuery and jQuery UI but can't seem to find the answer anywhere else.

Please see this screen shot (full size):

Screen shot

For for every "received" and "expiry" box I want a jQuery datePicker box to appear and format as shown.

To test this I tried to create an example.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="Stylesheet" />    
<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>

<script>
    $(function() {
        $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });
        $( "#datepicker2" ).datepicker({ dateFormat: 'yy-mm-dd' });
    });
</script>
<style>
.ui-datepicker {
  font-size: 80%;
}
</style>

<p>Date: <input id="datepicker" type="text" /></p>
<p>Date2: <input id="datepicker2" type="text" /></p>

Which works fine, but how do I get a date picker to come up for ANY textbox without having to repeat the JS so many times.

For say, 50 properties, there may be 200 input boxes on the page with a date needing to be filled in.

Here is some example code from the screen shot.

<tr>
  <td>Property ID</td>
  <td>House Number</td>
  <td>Address Line 1</td>
  <td>Gas Expiry</td>
  <td>Gas Received</td>
  <td>Electric Expiry</td>
  <td>Electric Received</td>
  <td>Property Active</td>
  <td>Update</td>
</tr>

<tr>
  <td>4</td>
  <td>6</td>
  <td>East Street</td>
  <td><input name="gas_expiry[4]" type="text" id="gas_expiry[4]" value="2011-08-03" /></td>
  <td><input name="gas_received[4]" type="text" id="gas_received[4]" value="" /></td>
  <td><input name="electric_expiry[4]" type="text" id="electric_expiry[4]" value="" /></td>

  <td><input name="electric_received[4]" type="text" id="electric_received[4]" value="" /></td>
  <td>
    <select name="active[4]" id="active[4]">
      <option value="0" selected="selected">No</option>
      <option value="1">Yes</option>
    </select>
  </td>
  <td><input name="edit[]" type="checkbox" id="edit[]" value="4" /></td>

</tr>

Probably something really simple, I appreciate any help.

score 14 · Accepted Answer · answered Feb 04 '11 at 16:08

14

What I do is create a calendar CSS class and have the behavior attached to each member of that CSS class like so:

$( ".calendar" ).datepicker({ dateFormat: 'yy-mm-dd' });

answered Feb 04 '11 at 16:08

JMP

7,734
6
33
34

One other thing JMP - how do I change the alignment? Eg: http://i56.tinypic.com/2u5c6bp.png covering the box itself, could it be moved to the right so it doesn't cover the boxes? – Matt Feb 04 '11 at 16:19
This SO should help you with positioning: http://stackoverflow.com/questions/662220/how-to-change-the-pop-up-position-of-the-jquery-datepicker-control – JMP Feb 04 '11 at 16:26
4

This helps to popout calender to all the input fields. But i have observed that changes made by the datepicker are reflected only in the first input whose class is .calendar – Abhishek Singh Sep 25 '13 at 09:45
1

@AbhishekSingh For anybody running into this problem, set a different id to your inputs and datepicker should behave. – fkoessler Mar 24 '15 at 09:34

score 7 · Answer 2 · answered Feb 04 '11 at 16:09

You should set up class attribute for each text box

<input class="datepicker" type="text" />

and then

$( ".datepicker" ).datepicker({ dateFormat: 'yy-mm-dd' });

Or if you have only dates textboxes, you can attach datepicker for all textboxes by

$( 'input[type="text"]' ).datepicker({ dateFormat: 'yy-mm-dd' });

score 3 · Answer 3 · answered Feb 04 '11 at 16:15

3

Another method, just for your reference, would be

$("#datepicker, #datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });

answered Feb 04 '11 at 16:15

Thank you, was not aware they could be comma separated either. – Matt Feb 04 '11 at 16:25
No probs. Thought it might come in handy even though you had an answer to your question. – Feb 04 '11 at 16:26

score 2 · Answer 4 · answered Feb 04 '11 at 16:10

2

For ANY textbox on the page:

$('input[type="text"]').datepicker({ dateFormat: 'yy-mm-dd' });

answered Feb 04 '11 at 16:10

acme

14,654
7
75
109

Be careful of side-effects! What happens when there's a textbox on the page that doesn't need a datepicker? – JMP Feb 04 '11 at 16:11
Of course you're right, it's better to use css classes but he asked for **ANY** textboxes ;-) – acme Feb 04 '11 at 16:12
Sorry yes, should have stated. JMP I'll be using your solution :) – Matt Feb 04 '11 at 16:16

score 0 · Answer 5 · answered Aug 23 '14 at 21:43

to get functional datepickers on different input boxes on the same page of a custom post with the least hassle and without messing with the jquery-ui.css and jquery-ui.theme.css or any other code of the jQuery ui library:

<input class="datepicker" name="first_intake" id="first_intake" value="" size="30" type="date">
<input class="datepicker" name="second_intake" id="first_intake" value="" size="30" type="date">

In the footer I initiate the datepicker in a function as I use wordpress and this page is in the admin backend, but you can just use the javascript snippet, if you do not use wordpress:

    <?php
function my_admin_footer() { ?>
    <script type="text/javascript">
    jQuery(document).ready(function(){
    jQuery('#first_intake.datepicker').datepicker({
        dateFormat : 'd M, yy'
    });
    jQuery('#second_intake.datepicker').datepicker({
        dateFormat : 'd M, yy'
    });
    });
</script>
<?php
 }
 add_action('admin_footer', 'my_admin_footer');
?>

score 0 · Answer 6 · answered Nov 19 '21 at 14:45

0

Here's what worked for me...
PHP + jquery

$(function() {
    for(let i = 1; i<= <?php echo count($rows) ?>; i++)
    {
      $( "#datepicker-popup"+i ).datepicker({ dateFormat: 'yy-mm-dd' });
    }
  });

answered Nov 19 '21 at 14:45

Hassan Anwar

86
3

JQuery UI, multiple datepickers on single page

6 Answers6

Linked