[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
http://www.vbforums.com/attachment.p...id=46742&stc=1

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>

---

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