On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Hi!

    I’m currently building an calendar application for my website.
    The feature i’d really like to implement is the option to use an "datepicker"

    After some research, i’ve decided to use the built in DatePicker.

    The only problem is the documentation...
    Even using the forums, i couldn’t get it to work.

    Could someone help me?
    I’m using the following code:

    <script language="javascript" type="text/javascript" src='manager/media/script/mootools/mootools.js'></script>
    <script language="javascript" type="text/javascript" src='manager/media/calendar/DatePicker.js'></script>
    <script language="javascript" type="text/javascript">
    function init_datepicker() 
    {
    	$$('input.DatePicker').each( 
    		function(){
    		$$('input.DatePicker').each( function(el){
    		new DatePicker(el);
    	);
    }
    window.addEvent('domready',init_datepicker);
    </script>
    <form name='requestForm'>
    <input type='text' class='DatePicker' onChange="updateTable();" autocomplete=off name=startdate />Startdate<br />
    <input type='text' class='DatePicker' onChange="updateTable();" autocomplete=off name=enddate />Enddate<br />
    </form>
    


    Thanks!

    • I was trying too. Even made a snippet based on the template variable code. I can’t get the DatePicker to work 100%. Using the headers below the picker works but won’t have any theme images and the clear-date button won’t work. I think I will probably switch to the JQuery DatePicker.

      <link rel="stylesheet" type="text/css" href="[(base_url)]manager/media/calendar/datepicker.css" />
      
          <script src="/manager/media/script/mootools/mootools.js" type="text/javascript"></script>
          <script src="/manager/media/script/mootools/moodx.js" type="text/javascript"></script>
      <script language="javascript" type="text/javascript" src='manager/media/calendar/datepicker.js'></script>
      <script language="javascript" type="text/javascript">
      function init_datepicker() 
      {
      $$('input.DatePicker').each( function(el){
          new DatePicker(el);
      });
      
      }
      window.addEvent('domready',init_datepicker);
      </script>
      • Heres a basic working snippet example which might help:
        <?php
        /*  datepicker
        
            [!datepicker!]
        */
        
        $output ='';
        
        $datepicker_js_include ='
            <script src="manager/media/script/mootools/mootools.js" type="text/javascript"></script>
            <script src="manager/media/script/mootools/moodx.js" type="text/javascript"></script>
        
           <link rel="stylesheet" type="text/css" href="manager/media/calendar/datepicker.css" />
           <script type="text/javascript" src="manager/media/calendar/datepicker.js"></script>
           <script type="text/javascript">
           window.addEvent(\'domready\', function() {
                var dpOffset = '.$modx->config['datepicker_offset'].';
                var dpformat = "'.$modx->config['datetime_format'].'" + \' hh:mm:00\';
                new DatePicker($(\'pubdate\'), {\'yearOffset\': dpOffset,\'format\':dpformat});
                new DatePicker($(\'unpubdate\'), {\'yearOffset\': dpOffset,\'format\':dpformat});
           });
           </script>
            ';
        
        $modx->regClientStartupScript($datepicker_js_include);
        
        if(isset($_POST['pubdate']) || isset($_POST['unpubdate'])){
            $output .=isset($_POST['pubdate']) ? '<p>pubdate: '.$_POST['pubdate'] .'</p>' : '';
            $output .=isset($_POST['unpubdate']) ? '<p>unpubdate: '.$_POST['unpubdate'] .'</p>' : '';
        }
        
        $output .='
        <form action="" method="post">
        <table>
            <tr>
                <td><b>Date From</b></td>
                <td align="right">
                    <input type="text" id="pubdate" name="pubdate" class="DatePicker" value="" />
                    <a onclick="document.createnew.pubdate.value=\"\"; return true;" style="cursor:pointer; cursor:hand"><img src="manager/media/style/MODxCarbon/images/icons/cal_nodate.gif" width="16" height="16" border="0" alt="No date" /></a>
                </td>
            </tr>
            <tr>
                <td><b>Date To</b></td>
                <td align="right">
                    <input type="text" id="unpubdate" name="unpubdate" class="DatePicker" value="" />
                    <a onclick="document.createnew.unpubdate.value=\"\"; return true;" style="cursor:pointer; cursor:hand"><img src="manager/media/style/MODxCarbon/images/icons/cal_nodate.gif" width="16" height="16" border="0" alt="No date" /></a>
                </td>
            </tr>
            <tr>
                <td colspan="2"><input value="Show Dates" type="submit" /></td>
            </tr>
        </table>
        
        </form>';
        
        return $output;
        ?>
          xforum
          http://frsbuilders.net (under construction) forum for evolution