jQuery datepicker onSelect event

JavaScript
1

I’m trying to make use of jQuery’s datepicker.

The hidden field is used to make the datepicker appear and stores the date data that will be sent to the server. The SPAN tag will show the “pretty” date format for the user.

The altField option doesn’t seem to work, as the SPAN tag is not an INPUT tag.

So, I saw that I could add a custom function using the onSelect event, so I attempted to write what you see below. I can’t seem to find any clear documentation on how to handle the “inst” variable or how to pull the date from it so it can be formatted.

If I use the “dateText” variable, that only seems to contain the date as a formatted string, and not as a Date() object that I can format.

<input id="urltype_temp_date_start" name="urltype_temp_date_start" type="hidden" /><span id="temp_date_start"></span>


$(function() {

$("#urltype_temp_date_start").datepicker(
				{buttonText: 'Select Date', showOn: 'button', dateFormat: 'm-d-yy', minDate: new Date(),
					onSelect: function(dateText, inst){
						//dateFormat: 'DD, MM d, yy'
						var theDate = $(inst).datepicker.formatDate('DD, MM d, yy', $(inst).datepicker.('getDate'));
						$("#temp_date_start").text(theDate);
					}
				}
		);


});

Any suggestions? Thanks :slight_smile:

2

After a considerable amount of fiddling, I ended up with this working:

$(function() {
		
		$("#urltype_temp_date_start").datepicker(
				{buttonText: 'Select Date', showOn: 'button', dateFormat: 'mm-dd-yy', minDate: new Date(),
					onSelect: function(dateText, inst){
						var theDate = new Date(Date.parse($(this).datepicker('getDate')));
						var dateFormatted = $.datepicker.formatDate('D, MM d, yy', theDate);
						$("#temp_date_start").text(dateFormatted);
					}
				}
		);
		
	});