Question

When I use the jquery datepicker, it almost always is configured as such:

$('#dateFld').datepicker({ 
  dateFormat: 'mm/dd/yy', 
  showOn: 'button', 
  buttonText: 'Edit date value', 
  buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>', 
  buttonImageOnly: true 
});

...

<p>Date: <input type="text" id="dateFld" /></p>

The only thing that tends to change each time I define a field like this is the buttonText value. I would love to be able to use the input field’s title attribute as the buttonText value so that I could configure all my datepickers using a .datepicker class selector instead. Something like this:

$('.datepicker').datepicker({ 
  dateFormat: 'mm/dd/yy', 
  showOn: 'button', 
  buttonText: $(this).attr('title'), 
  buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>', 
  buttonImageOnly: true 
});

...

<p>Date: <input class="datepicker" type="text" id="dateFld" title="Edit date value" /></p>

This approach almost works, but I’m ending up with the title from the page, not the selected input field. Thoughts?

Answer 1

$('.datepicker').each(function() {
    $currentDatepicker = $(this);
    $currentDatepicker.datepicker({ 
       dateFormat: 'mm/dd/yy', 
       showOn: 'button', 
       buttonText: $currentDatepicker.attr('title'), 
       buttonImage: '<s:url includeParams="none" value="/images/calendar.gif"/>', 
       buttonImageOnly: true 
    });
});

This should work !