Populating array of input fields as alternate fields using jQuery UI datepicker

Question

I am using jquery ui datepicker in order to populate start and end dates for multiple events on the same page, the number of events is dynamic and I need to post day, month and year as separate fields, so I have something like this:

<input type="text" name="event[0].startDate" class="date"/>
<input type="hidden" name="event[0].startDate_day" class="startDate_day" />
<input type="hidden" name="event[0].startDate_month" class="startDate_month" />
<input type="hidden" name="event[0].startDate_year" class="startDate_year" />

<input type="text" name="event[0].endDate" class="date"/>
<input type="hidden" name="event[0].endDate_day" class="endDate_day" />
<input type="hidden" name="event[0].endDate_month" class="endDate_month" />
<input type="hidden" name="event[0].endDate_year" class="startDate_year" />

event[1]...
event[2]...

I started working on jQuery functionality and this is what I have so far, which will populate alternate fields for startDate by class, of course it will not do what I need because I need to populate by field name rather then class:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        $('.startDate_month').val( dateText.split(/\//)[0] );
        $('.startDate_day').val( dateText.split(/\//)[1] );
        $('.startDate_year').val( dateText.split(/\//)[2] );
}});

I need help figuring out how can I get the name of the input field within datepicker function so the alternate field assignment done by that field name + _day, month, year so this function can work for all the events on the page, making function above look more like:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        $('input[' + $name + '_month' + ']').val( dateText.split(/\//)[0] );
        $('input[' + $name + '_day' + ']').val( dateText.split(/\//)[1] );
        $('input[' + $name + '_year' + ']').val( dateText.split(/\//)[2] );
}});

Hope that makes sense :) Thanks

issa marie tseng · Accepted Answer · 2010-04-08 06:56:20Z

1

Two possibilities.

One is to give each item an ID as well (eg <input id="event_0_endDate_day"…, which is incidentally how Rails handles the naming conversion), and then select it with

$('#event_' + index + '_endDate_day')

The other is to use the property selection bits of Sparkle:

$('input["name"="event[' + index + '].startDate_day"])

The former would be greatly preferred, as the latter will perform much, much more poorly, but perhaps you have no other choice.

edit:

More specifically:

<input type="text" id="event_0_startDate" name="event[0].startDate" class="date"/>
<input type="hidden" id="event_0_startDate_day" name="event[0].startDate_day" class="startDate_day" />
<input type="hidden" id="event_0_startDate_month" name="event[0].startDate_month" class="startDate_month" />
<input type="hidden" id="event_0_startDate_year" name="event[0].startDate_year" class="startDate_year" />

<input type="text" id="event_0_endDate" name="event[0].endDate" class="date"/>
<input type="hidden" id="event_0_endDate_day" name="event[0].endDate_day" class="endDate_day" />
<input type="hidden" id="event_0_endDate_month" name="event[0].endDate_month" class="endDate_month" />
<input type="hidden" id="event_0_endDate_year" name="event[0].endDate_year" class="startDate_year" />

Then, you can do:

$(".date").datepicker({
    onClose: function(dateText,picker) {
        var prefix = $(this).attr('id');
        $('#' + prefix + '_month').val( dateText.split(/\//)[0] );
        $('#' + prefix + '_day').val( dateText.split(/\//)[1] );
        $('#' + prefix + '_year').val( dateText.split(/\//)[2] );
    }
});

edited Apr 8, 2010 at 6:56

answered Apr 8, 2010 at 4:40

issa marie tseng

3,23424 silver badges21 bronze badges

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

1 Comment

Micor Over a year ago

Thank you for your suggestion. I can assign input ids the way you recommend but I still have two problems then. 1. How do I get the index and 2. This will only work for startDate and then i have to replicate the function for endDate. Any suggestions?

bobthenob · Accepted Answer · 2013-11-29 11:49:42Z

0

To to add my comment to this problem. I used the id="" to assign a counter onto every field so that I could successfully add a jQuery Date picker to each field

Html

<input class="span2" onmouseover="autoCompleteMedicalHistory();"  type="text" id="MedicalHistoryOnset0" name="MedicalHistoryOnset[]" placeholder="Date of Diagnosis"/>

Javascript

var counter=1
var row=' <input class="span2" onmouseover="autoCompleteMedicalHistory();"  type="text" id="MedicalHistoryOnset'+counter+'" name="MedicalHistoryOnset[]" placeholder="Date of Diagnosis"/>"

Jquery Date Picker

jQuery("#MedicalHistoryOnset"+counter).datepicker({dateFormat : 'yy-mm-dd'});

answered Nov 29, 2013 at 11:49

bobthenob

1492 silver badges2 bronze badges

Collectives™ on Stack Overflow

Populating array of input fields as alternate fields using jQuery UI datepicker

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related