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>
