SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)

    jQuery datepicker onSelect event

    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.

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

    Code JavaScript:
    $(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

  2. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    After a considerable amount of fiddling, I ended up with this working:

    Code JavaScript:
    $(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);
    					}
    				}
    		);
     
    	});


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •