Spry Date Picker Problem

Discussion in 'Programming' started by Techd, Aug 15, 2012.

0
  1. #1
    Hello everyone,

    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>
    Code (markup):
    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 script.


    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>
    Code (markup):

    Thanks
     
    Techd, Aug 15, 2012 IP
  2. sarahk

    sarahk iTamer Staff

    Messages:
    28,827
    Likes Received:
    4,541
    Best Answers:
    123
    Trophy Points:
    665
    #2
    What is the problem you are experiencing?
     
    sarahk, Aug 16, 2012 IP
  3. Techd

    Techd Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Sorry I could have been a bit clearer. The Problem is that i can't figure out how to link the datepicker to the chosenDate part of this script:

    [COLOR=#111111]<script>[/COLOR]
var chosenDate = '2012-09-04';function checkDate(rgn, doIt) {if (doIt('{dsDates::datebooked}') == chosenDate) {Spry.Utils.addClassName('id'+doIt('{dsArtists::@id}'),'hidden');}} [COLOR=#111111]</script>[/COLOR]
    Code (markup):
    so that when the date is ''picked'' on the datepicker it will change the chosenDate in the script.

    Thanks
     
    Techd, Aug 17, 2012 IP
  4. Techd

    Techd Peon

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #4
    Ok i've now got a new datepicker:

    <input class="dmxCalendar2" name="dmxCalendar21" id="dmxCalendar21" /><script type="text/javascript">  // <![CDATA[ jQuery(document).ready(   function()     {       jQuery("#dmxCalendar21").dmxCalendar2(         {"altFormat": "yy-mm-dd", "condDates": [], "firstDay": 1, "showOn": "both", "duration": "slow", "showOptions": {"direction": "up", "easing": "swing"}, "yearRange": "c-10:c+10", "onSelect": "MM_goToURL(\'parent\',\'allactstest.html\');"}       );     } );  // ]]></script>
    Code (markup):
    and this function:

    <script>var chosenDate = (document.getElementById("dmxCalendar21").value !=""  )? document.getElementById("dmxCalendar21").value :  '2012-08-14' ; function checkDate(rgn, doIt) {    if (doIt('{dsDates::datebooked}') == chosenDate) {        Spry.Utils.addClassName('id'+doIt('{dsArtists::@id}'),'hidden');    }}</script>
    Code (markup):
    But it still doesn't collect the date when it is picked
     
    Techd, Aug 23, 2012 IP