Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Date Picker Problem

    Hello everyone,

    I've already posted this in a couple of other forums but getting no replies so thought I'd post here as it seems quite active.

    Here's my problem:

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

    Code:
    <!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:

    Code:
    <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/200...cker-widget-v5

    Thanks!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Since I don't use Spry, can you show the HTML that is actually generated by all that?

    Or, better, just give us the URL of your page?

    But I wonder if your use of a dash inside the ID is causing problems.

    How about if you try it with an underline, instead? "dp_1"?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sure here's the URL: http://tinyurl.com/cat5t2z

    Its nothing to do with the ID because that was just what was on the demo of where I got the date-picker from.

    Obviously it means that you should enter the form ID if you've got one but I need the date to be entered into a script, this one:

    Code:
    <script>
    var chosenDate = '2012-09-04';
    function checkDate(rgn, doIt) {
    if (doIt('{dsDates::datebooked}') == chosenDate) {
    Spry.Utils.addClassName('id'+doIt('{dsArtists::@id}'),'hidden');
    }
    }
    </script>
    the ''var chosenDate = '2012-09-04' needs to be connected to the datepicker as this is where the dataset find out which of the artists are available on that date. So when you click on the URL you'll find that 4 artists come up out of a possible five, the fifth being not available on that particular date.

    Thanks

    Dan

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,155
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Ahhh...you are going to have to ask this in a Spry forum, I think. Maybe somebody here knows.

    In order to make this work, you are going to have to tell Spry to layout the page *AGAIN*, using the newly picked date. So presumably the datepicker code will have to be tied into the Spry code in such a way that when a new date is picked the appropriate Spry code is then invoked.

    On top of that, you will probably need to handle an onchange even on the text field, in case a user opts to simply change the date by hand instead of using the date picker.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok thanks anyway. But is there no way of connecting the datepicker to the ''var chosenDate = '2012-09-04' '' part of the script. I don't see why I'll have to do anything more to the Spry because you could manually change the date above and it would alter the results depending on what date you put.

    So all that needs to be done is the date in: var chosenDate = '2012-09-04' be changed to what date is 'chosen' in the datepicker.

    I wouldn't have thought it would be anything to do with spry but just some JavaScript.

    Thanks

  • #6
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Would: document.getElementById work?

  • #7
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Not sure I've fully understood the requirement, but maybe:

    Code:
    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"},
      // Stipulate some callback functions
      callbackFunctions: {
        "dateset": [yourFunction]    // for change to both input and datepicker
        // or "datereturned" for just the input
    
      }
    };      
    datePickerController.createDatePicker(opts);
    
    function yourFunction() { 
        chosenDate = document.getElementById("dp-1").value;
    }
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #8
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok I got a different datepicker:

    Code:
      <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>
    and this script:

    Code:
    <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>
    Still not working though


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •