Results 1 to 2 of 2

Thread: [PHP + AJAX] Date Select

  1. #1

    Thread Starter
    <?="Moderator"?> john tindell's Avatar
    Join Date
    Jan 2002
    Location
    Brighton, UK
    Posts
    1,099

    [PHP + AJAX] Date Select

    Here is a script that will let the user select a date. Its written in PHP and uses AJAX. There is one PHP file which does all the work. You need to write a call back function so that you can handle the date how ever you want to, eg if you need it for a form, stick it in a textbox.

    This is what the date selector looks like


    It is only a quick test to see if i could make a working solution so there could be some bugs in it.

    Ok here comes the code

    PHP Code:
    <?php

    if(isset($_GET['script']))
    {
        
    ?>
            function createRequestObject()
            {
                var request_o; //declare the variable to hold the object.
                var browser = navigator.appName; //find the browser name
                if(browser == "Microsoft Internet Explorer"){
                    /* Create the object using MSIE's method */
                    request_o = new ActiveXObject("Microsoft.XMLHTTP");
                }else{
                    /* Create the object using other browser's method */
                    request_o = new XMLHttpRequest();
                }
                return request_o; //return the object
            }
            /* Function called to handle the list that was returned from the internal_request.php file.. */
            function handleCalender(){
                /* Make sure that the transaction has finished. The XMLHttpRequest object 
                    has a property called readyState with several states:
                    0: Uninitialized
                    1: Loading
                    2: Loaded
                    3: Interactive
                    4: Finished */
                try
                {
                    if(http.readyState == 4){ //Finished loading the response
                        /* We have got the response from the server-side script,
                            let's see just what it was. using the responseText property of 
                            the XMLHttpRequest object. */
                        var response = http.responseText;
                        //alert(response);
                        //document.write(response);
                        document.getElementById("calender").innerHTML = response;
                    }
                }
                catch(Exception)
                {
                }

            }

            /* Function called to get the product categories list */
            var http = createRequestObject();
            function init()
            {
                http.open('get', 'dateselect.php');
                http.onreadystatechange = handleCalender; 
                http.send(null);
            }
            function getCalender(month,year)
            {
                try
                {
                    http.open('get', 'dateselect.php?month=' + month + '&year=' + year);
                    http.onreadystatechange = handleCalender; 
                    http.send(null);
                }
                catch(Exception)
                {
                    http = createRequestObject();
                    alert('error');
                }
            }        
            document.write('<div id="calender"><a href="javascript:init();">Select a Date</a></div>');
        <?
    }
    else
    {

        if(isset($_GET['month']))
        {
            $month = $_GET['month'];
        }
        else
        {
            $month = date("m");
        }

        if(isset($_GET['year']))
        {
            $year = $_GET['year'];
        }
        else
        {
            $year = date("Y");
        }

        $t = strtotime("j");
        //die( date("j") );
        $t = date("j");
        $days = date("t",mktime(1,1,1,$month,$t,$year));
        $currentMonth = date("M",mktime(1,1,1,$month,1,$year));
        $m_prevMonth = $m_nextMonth = $month;
        $iprevYear = $inextYear = $year;
        if((($m_prevMonth + 1) % 12 ) == 2)
        {
            $m_prevMonth = 12;
            $iprevYear--;    
        }
        else
        {
            $m_prevMonth--;
        }
        if((($m_nextMonth + 1) % 12 ) == 1)
        {
            $m_nextMonth = 1;
            $inextYear++;
        }
        else
        {    
            $m_nextMonth++;
            
        }

        $prevMonth = date("M",mktime(1,1,1,$m_prevMonth,1,$year));
        $nextMonth = date("M",mktime(1,1,1,$m_nextMonth,1,$year));

        $iprevMonth = date("m",mktime(1,1,1,$m_prevMonth,1,$year));
        $inextMonth = date("m",mktime(1,1,1,$m_nextMonth,1,$year));

        $leep_prevYear = $year - 1;
        $leep_nextYear = $year + 1;

        ?>
            <style>
                td
                {
                    width: 25px;
                    height: 25px;
                    background: #CFCFCF;
                    text-align: center;
                }
                th
                {
                    width: 25px;
                    height: 25px;
                    background: #B3B3B3;
                }
            </style>
        <table>
        <tr>
            <th colspan="7">
                <a href="javascript: getCalender('<?=$month?>','<?=$leep_prevYear?>');"><?=$leep_prevYear?></a>
                <?=$year?>
                <a href="javascript: getCalender('<?=$month?>','<?=$leep_nextYear?>');"><?=$leep_nextYear?></a> 
            </th>
        </tr>
        <tr>
            <td colspan="7"><a href="javascript: getCalender('<?=$iprevMonth?>','<?=$iprevYear?>');"><?=$prevMonth?></a> <?=$currentMonth?> <a href="javascript: getCalender('<?=$inextMonth?>','<?=$inextYear?>');"><?=$nextMonth?></a></td>
        </tr>
        <th>mon</th><th>tue</th><th>wed</th><th>thurs</th><th>fri</th><th>sat</th><th>sun</th>
        </tr><tr>
        <?php

        $firstRow 
    true;
        
    $weekPos 1;

        for(
    $i 1$i <= $days$i++)
        {
            if(
    $firstRow)
            {
                
    $temp date("N",mktime(1,1,1,$month,$i,$year));
                for(
    $x 1$x $temp;$x++)
                {
                    print 
    "<td>&nbsp;</td>";
                }
                if( 
    date("j") == $i)
                {
                    
    ?>
                    <td><b><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></b></td>
                    <?
                }
                else
                {
                    ?>
                    <td><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></td>
                    <?
                }
                $weekPos += $temp;
                $firstRow = false;
            }
            else
            {
                if( date("j") == $i)
                {
                    ?>
                    <td><b><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></b></td>
                    <?
                }
                else
                {
                    ?>
                    <td><a href="javascript:selectDate(<?=$i?>,<?=$month?>,<?=$year?>);"><?=$i?></a></td>
                    <?
                }
            }
            if( ($weekPos % 7) == 1)
            {
                print "</tr><tr>";
            }
            $weekPos++;
        }
        while(($weekPos % 7) != 2)
        {
            print "<td>&nbsp;</td>";
            $weekPos++;
        }
        ?>
            </tr>
        </table>
    <?
    }
    ?>

    Now this is how you use it.

    Code:
    <html>
    	<head>
    		
    	</head>
    	<body>
    		<script>
    			//this is the callback function that processes the selected date
    			function selectDate(day,month,year)
    			{
    				//there is a layer called "calender" which holds the date selector
    				document.getElementById("calender").innerHTML = day + '/' + month + '/' + year + ' ' + '<a href="javascript:init();">Select a Date</a>';
    			}
    		</script>
    		<script src="dateselect.php?script"></script>
    	</body>
    </html>
    Attached Images Attached Images  

  2. #2

    Thread Starter
    <?="Moderator"?> john tindell's Avatar
    Join Date
    Jan 2002
    Location
    Brighton, UK
    Posts
    1,099

    Re: [PHP + AJAX] Date Select

    Ok i have made some changes so that this script will be useful. It now allows instances to be used on a single page.

    Heres the new script
    PHP Code:
    <?php
    /****************************************************
    Creator:        John Tindell
    Email:            linal[_AT_]mindlessant.co.uk
    Version:        1.1
    Last-Update:    21st April 2006
    ****************************************************/
    if(isset($_GET['script']))
    {
        
    ?>
            function createRequestObject_<?=$_GET['name']?>()
            {
                var request_o; //declare the variable to hold the object.
                var browser = navigator.appName; //find the browser name
                if(browser == "Microsoft Internet Explorer"){
                    /* Create the object using MSIE's method */
                    request_o = new ActiveXObject("Microsoft.XMLHTTP");
                }else{
                    /* Create the object using other browser's method */
                    request_o = new XMLHttpRequest();
                }
                return request_o; //return the object
            }
            var http_<?=$_GET['name']?> = createRequestObject_<?=$_GET['name']?>();
            
            /* Function called to handle the list that was returned from the internal_request.php file.. */
            function handleCalender_<?=$_GET['name']?>(){
                /* Make sure that the transaction has finished. The XMLHttpRequest object 
                    has a property called readyState with several states:
                    0: Uninitialized
                    1: Loading
                    2: Loaded
                    3: Interactive
                    4: Finished */
                try
                {
                    if(http_<?=$_GET['name']?>.readyState == 4){ //Finished loading the response
                        /* We have got the response from the server-side script,
                            let's see just what it was. using the responseText property of 
                            the XMLHttpRequest object. */
                        var response = http_<?=$_GET['name']?>.responseText;
                        //alert(response);
                        //document.write(response);
                        document.getElementById("calenderSelect_<?=$_GET['name']?>").innerHTML = response;
                    }
                }
                catch(Exception)
                {
                }

            }

            /* Function called to get the product categories list */
            
            function init_<?=$_GET['name']?>()
            {
                try
                {
                    
                    http_<?=$_GET['name']?>.open('get', 'dateselect.php?name=<?=$_GET['name']?>');
                    http_<?=$_GET['name']?>.onreadystatechange = handleCalender_<?=$_GET['name']?>
                    http_<?=$_GET['name']?>.send(null);
                    showCalender_<?=$_GET['name']?>();
                }
                catch(Exception)
                {
                    http_<?=$_GET['name']?> = createRequestObject_<?=$_GET['name']?>();
                }
            }
            function getCalender_<?=$_GET['name']?>(month,year)
            {
                try
                {
                    http_<?=$_GET['name']?>.open('get', 'dateselect.php?name=<?=$_GET['name']?>&month=' + month + '&year=' + year);
                    http_<?=$_GET['name']?>.onreadystatechange = handleCalender_<?=$_GET['name']?>
                    http_<?=$_GET['name']?>.send(null);
                }
                catch(Exception)
                {
                    http_<?=$_GET['name']?> = createRequestObject_<?=$_GET['name']?>();
                    getCalender_<?=$_GET['name']?>(month,year);
                }
            }
            function showCalender_<?=$_GET['name']?>()
            {
                document.getElementById('calenderSelect_<?=$_GET['name']?>').style.display = 'block';
            }
            function hideCalender_<?=$_GET['name']?>()
            {
                document.getElementById('calenderSelect_<?=$_GET['name']?>').style.display = 'none';
            }    
            document.write('<div id="calender_<?=$_GET['name']?>"><a href="javascript:init_<?=$_GET['name']?>();">Select a Date</a></div>');
            document.write('<div style="display:none;position:absolute;" id="calenderSelect_<?=$_GET['name']?>"></div>');
        <?
    }
    else
    {

        if(isset($_GET['month']))
        {
            $month = $_GET['month'];
        }
        else
        {
            $month = date("m");
        }

        if(isset($_GET['year']))
        {
            $year = $_GET['year'];
        }
        else
        {
            $year = date("Y");
        }

        $t = strtotime("j");
        //die( date("j") );
        $t = date("j");
        $days = date("t",mktime(1,1,1,$month,$t,$year));
        $currentMonth = date("M",mktime(1,1,1,$month,1,$year));
        $m_prevMonth = $m_nextMonth = $month;
        $iprevYear = $inextYear = $year;
        if((($m_prevMonth + 1) % 12 ) == 2)
        {
            $m_prevMonth = 12;
            $iprevYear--;    
        }
        else
        {
            $m_prevMonth--;
        }
        if((($m_nextMonth + 1) % 12 ) == 1)
        {
            $m_nextMonth = 1;
            $inextYear++;
        }
        else
        {    
            $m_nextMonth++;
            
        }

        $prevMonth = date("M",mktime(1,1,1,$m_prevMonth,1,$year));
        $nextMonth = date("M",mktime(1,1,1,$m_nextMonth,1,$year));

        $iprevMonth = date("m",mktime(1,1,1,$m_prevMonth,1,$year));
        $inextMonth = date("m",mktime(1,1,1,$m_nextMonth,1,$year));

        $leep_prevYear = $year - 1;
        $leep_nextYear = $year + 1;

        ?>
        <table class="calender_<?=$_GET['name']?>">
        <tr>
            <th colspan="7">
                <a href="javascript: getCalender_<?=$_GET['name']?>('<?=$month?>','<?=$leep_prevYear?>');"><?=$leep_prevYear?></a>
                <?=$year?>
                <a href="javascript: getCalender_<?=$_GET['name']?>('<?=$month?>','<?=$leep_nextYear?>');"><?=$leep_nextYear?></a> 
                <a href="javascript: hideCalender_<?=$_GET['name']?>();">Close</a>
            </th>
        </tr>
        <tr>
            <td colspan="7"><a href="javascript: getCalender_<?=$_GET['name']?>('<?=$iprevMonth?>','<?=$iprevYear?>');"><?=$prevMonth?></a> <?=$currentMonth?> <a href="javascript: getCalender_<?=$_GET['name']?>('<?=$inextMonth?>','<?=$inextYear?>');"><?=$nextMonth?></a></td>
        </tr>
        <th>mon</th><th>tue</th><th>wed</th><th>thurs</th><th>fri</th><th>sat</th><th>sun</th>
        </tr><tr>
        <?php

        $firstRow 
    true;
        
    $weekPos 1;

        for(
    $i 1$i <= $days$i++)
        {
            if(
    $firstRow)
            {
                
    $temp date("N",mktime(1,1,1,$month,$i,$year));
                for(
    $x 1$x $temp;$x++)
                {
                    
    ?>
                    <td>&nbsp;</td>
                    <?
                }
                if( date("j") == $i)
                {
                    ?>
                    <td><b><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></b></td>
                    <?
                }
                else
                {
                    ?>
                    <td><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></td>
                    <?
                }
                $weekPos += $temp;
                $firstRow = false;
            }
            else
            {
                if( date("j") == $i)
                {
                    ?>
                    <td><b><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></b></td>
                    <?
                }
                else
                {
                    ?>
                    <td><a href="javascript:selectDate_<?=$_GET['name']?>(<?=$i?>,<?=$month?>,<?=$year?>);hideCalender_<?=$_GET['name']?>();"><?=$i?></a></td>
                    <?
                }
            }
            if( ($weekPos % 7) == 1)
            {
                ?>
                </tr><tr>
                <?
            }
            $weekPos++;
        }
        while(($weekPos % 7) != 2)
        {
            ?>
                <td>&nbsp;</td>
            <?
            $weekPos++;
        }
        ?>
            </tr>
        </table>
    <?
    }
    ?>
    Heres the news example of how to use it
    Code:
    <html>
    	<head>
    		<style>
    			#calenderSelect_one
    			{
    				background: #000000;
    			}
    			.calender_one td
    			{
    				width: 25px;
    				height: 25px;
    				background: #CFCFCF;
    				text-align: center;
    			}
    			.calender_one th
    			{
    				width: 25px;
    				height: 25px;
    				background: #B3B3B3;
    			}
    			#calenderSelect_two
    			{
    				background: #000000;
    			}
    			.calender_two td
    			{
    				width: 25px;
    				height: 25px;
    				background: #CFCFCF;
    				text-align: center;
    			}
    			.calender_two th
    			{
    				width: 25px;
    				height: 25px;
    				background: #B3B3B3;
    			}
    		</style>
    	</head>
    	<body>
    		<script>
    			function selectDate_one(day,month,year)
    			{
    				document.getElementById("calender_one").innerHTML = day + ' - ' + month + ' - ' + year + ' ' + '<a href="javascript:init_one();">Select a Date</a>';
    			}
    		</script>
    		<script src="dateselect.php?script=true&name=one"></script>
    		<script>
    			function selectDate_two(day,month,year)
    			{
    				document.getElementById("calender_two").innerHTML = day + ' - ' + month + ' - ' + year + ' ' + '<a href="javascript:init_two();">Select a Date</a>';
    			}
    		</script>
    		<script src="dateselect.php?script=true&name=two"></script>
    	</body>
    </html>
    The name of the object is dependable on the src values in the <script> tags.

    Enjoy

Posting Permissions

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



Click Here to Expand Forum to Full Width