Figured it out! --------------------- At this part --------------------- console.log(selectedDates);
--------------------- Just add... --------------------- console.log(selectedDates); $(this).val(selectedDates); However the only remaining issue is now I get very long dates. I get this: Fri Jul 20 2007 00:00:00 GMT-0400 (EDT), Sat Jul 21 2007 00:00:00 GMT-0400 (EDT) I would like: Fri Jul 20 2007, Sat Jul 21 2007 I would like to loose the Time information in the array of dates. Does anyone know how this could be done? On Jul 19, 8:23 pm, newbie <[EMAIL PROTECTED]> wrote: > Hello all, > > ------------------------ > Current Issue > ------------------------ > I currently have a form that offers users a date picker to select > multiple dates. Currently the text field will only update it's self to > show the last date selected. > > Does anyon know how I can take the array of "selectedDates" and update > the textfield with the multiple dates once they "close" the calendar > for that selected input ? If I had 3 dates selected ideally the input > values would seperate each entry with a " , " and an example could > look like "01/01/07, 01/02/07, 01/03/07". > > ------------------------ > Code Below > ------------------------ > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/ > TR/html4/strict.dtd"> > > <html lang="en"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> > <title>untitled</title> > <!-- jQuery --> > <script type="text/javascript" > src="jquery-1.1.2.js"></script> > <!-- required plugins --> > <script type="text/javascript" src="date.js"></script> > <script type="text/javascript" > src="jquery.dimensions.js"></script> > <!--[if IE]><script type="text/javascript" > src="jquery.bgiframe.js"></script><![endif]--> > <!-- jquery.datePicker.js --> > <script type="text/javascript" > src="jquery.datePicker.js"></script> > <!-- datePicker required styles --> > <link rel="stylesheet" type="text/css" media="screen" > href="datePicker.css"> > <!-- page specific styles --> > <link rel="stylesheet" type="text/css" media="screen" > href="demo.css"> > <!-- page specific scripts --> > <script type="text/javascript" charset="utf-8"> > $(function() > { > $('.date-pick') > .datePicker( > { > > createButton:true, > > displayClose:true, > > closeOnSelect:false, > > selectMultiple:true > } > ) > .bind( > 'click', > function() > { > > $(this).dpDisplay(); > this.blur(); > return false; > } > ) > .bind( > 'dateSelected', > function(e, > selectedDate, $td, state) > { > > console.log('You ' + (state ? '' : 'un') // wrap > + > 'selected ' + selectedDate); > } > ) > .bind( > 'dpClosed', > function(e, > selectedDates) > { > > console.log('You closed the date picker and the ' // wrap > + > 'currently selected dates are:'); > > console.log(selectedDates); > } > ); > > }); > </script> > > </head> > <body> > > <div id="container"> > <h1>jquery.datePicker</h1> > <p><a href="index.html">< date picker home</a></p> > > <form name="chooseDateForm" id="chooseDateForm" > action="#"> > > <label for="date1">Date 1: Pick a range of > dates</label><br> > <input name="date1" > id="date1" class="date-pick" value=""/> > > <br><br> > > <label for="date2">Date 1: Pick a range of > dates<</label><br> > <input name="date2" > id="date4" class="date-pick" value=""/> > > </form> > > </body> > </html>
