[jQuery] DatePicker | adding multiple selectedDates into input field
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>
<a href="index.html">< date picker home</a>
<form name="chooseDateForm" id="chooseDateForm" action="#">
<label for="date1">Date 1: Pick a range of
dates</label>
<input name="date1" id="date1" class="date-pick" value=""/>
<label for="date2">Date 1: Pick a range of
dates<</label>
<input name="date2" id="date4" class="date-pick" value=""/>
</form>
</body>
</html>