DatePicker. How to use it???

9 Posts

heank Reply #1, 14 years, 2 months ago

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!

12 Posts

megab Reply #2, 13 years, 9 months ago

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>

788 Posts

breezer Reply #3, 13 years, 9 months ago

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