Date Picker Problem

JavaScript
1

Hi all.

I’ve got a spry dataset and a function that filters out dates. Heres the html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/en-stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/datepicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/datepicker.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="SpryAssets/SprySpotlightColumn.css" rel="stylesheet">
<script src="SpryAssets/xpath.js"></script>
<script src="SpryAssets/SpryData.js"></script>
<script src="SpryAssets/SpryNestedXMLDataSet.js"></script>
<script>
var dsArtists = new Spry.Data.XMLDataSet("artistsearch.xml", "artists/artist");
dsArtists.setColumnType("picture", "html");
dsArtists.setColumnType("button", "html");
var dsDates = new Spry.Data.NestedXMLDataSet(dsArtists, "datesbooked/datebooked");
</script>
<style>
.hidden {display: none;}
</style>
</head>
<body>
<div id="container">


<div id="allactsmain">

<div id="dataRegion" spry:region="dsArtists" class="SpotlightAndStacked">
<div id="id{@id}" spry:repeat="dsArtists" class="SpotlightAndStackedRow">
<div class="SpotlightContainer">
<div class="SpotlightColumn"> {dsArtists::picture}</div>
</div>
<div class="StackedContainer">
<div class="StackedColumn"> {dsArtists::name}</div>
<div class="StackedColumn"> {dsArtists::type}</div>
<div class="StackedColumn"> {dsArtists::button}</div>
</div>
<br style="clear:both; line-height: 0px" />
</div>
</div>
<div spry:region="dsArtists dsDates">
<div spry:repeat="dsArtists">
<div spry:repeat="dsDates">
<div spry:if="function::checkDate">{dsDates::datebooked}</div>
</div>
</div>
</div>

</div>

</div>


<script>
var chosenDate = '2012-09-04';
function checkDate(rgn, doIt) {
if (doIt('{dsDates::datebooked}') == chosenDate) {
Spry.Utils.addClassName('id'+doIt('{dsArtists::@id}'),'hidden');
}
}
</script>


</body>
</html>

So the script at the bottom is the function for the filter. All I want is for a datepicker to assign a date when it is ‘‘picked’’ to the chosenDate part of the filter.

And here is the datepicker:

<p><label for="dp-1">Demo 1</label> : <input type="text" class="w16em" id="dp-1" name="dp-1" value="13/03/2009" /></p>
         <script type="text/javascript">
         // <![CDATA[
         var opts = {
                         // Attach input with an id of "dp-1" and give it a "d-sl-m-sl-Y" date format (e.g. 13/03/1990)
                         formElements:{"dp-1":"d-sl-m-sl-Y"}
         };
         datePickerController.createDatePicker(opts);
         // ]]>
         </script>

here is where I got the datepicker from if its any help: http://www.frequency-decoder.com/2009/09/09/unobtrusive-date-picker-widget-v5

Thanks!

2

Really stuck here, surely its just a bit of JavaScript to connect the datepicker to the: var chosenDate = ‘2012-09-04’ part of the script?