Tech talk!: jQuery - Start date/end date datepicker calendar and datatable

This post is basically a snippet of code to address the following -
1. Attach jQuery (datepicker) calendar to start date and end date inputs.
2. Create a jQuery datatable
3. On page submit, hide submit button and show a loading image instead.

After you have downloaded jQuery and extracted it to appropriate folders,
create a php file with these contents -

<?php

class InitPage {
    public $jscript = "
    <script type=\"text/javascript\" src=\"js/jquery-1.4.2.min.js\"></script>
    <script type=\"text/javascript\" src=\"ui/jquery.ui.core.js\"></script>
    <script type=\"text/javascript\" src=\"ui/jquery.ui.widget.js\"></script>
    <script type=\"text/javascript\" src=\"ui/jquery.ui.datepicker.js\"></script>
    <script type=\"text/javascript\" src=\"js/jquery.dataTables.js\"></script>
    <script type=\"text/javascript\" src=\"js/myjscript.js\"></script>";

    public $css =
        " <link type=\"text/css\" href=\"themes/redmond/jquery.ui.all.css\" rel=\"stylesheet\" />";
    public $header = "<html><head><title>Random Information</title>";
    public $body = "</head><body ><h1 >Random Information</h1>";
    public $footer =
        "<div id=\"footer\"><p><a href=\"http://rowsandcolumns.blogspot.com\">
        http://rowsandcolumns.blogspot.com</a></div></body> </html>";
    public function print_page($v_header,$v_jscript,$contents,$v_footer="") {
        if(!$v_header) {
            $v_header = $this->header.$this->jscript.$this->css.$this->body;
        }
        if(!$v_footer) {
            $v_footer = $this->footer;
        }
        echo $v_header.$contents.$v_footer;
    }
    function is_date( $str )
    {
    $stamp = strtotime( $str );
    if (!is_numeric($stamp)) {
        return FALSE;
    }
    $month = date( 'm', $stamp );
    $day   = date( 'd', $stamp );
    $year = date( 'Y', $stamp );
    if (checkdate($month, $day, $year)) {
        return TRUE;
    }
    return FALSE;
    }
}

$table_contents = "";

if(isset($_POST) && !empty($_POST)) { //On submit enter here
$bp = new InitPage();
// Get dates and validate if
//start date and end date are in proper format
    if (isset($_POST["start-date"]) &&
                $bp->is_date($_POST["start-date"]) &&
                    isset($_POST["end-date"]) &&
                        $bp->is_date($_POST["end-date"])
        ){

    list($start_date_m, $start_date_d, $start_date_Y)= explode("/",$_POST["start-date"]);
    list($end_date_m, $end_date_d, $end_date_Y)= explode("/",$_POST["end-date"]);

    $start_date = date("Y-m-d H:i:s", mktime(8, 0, 0, $start_date_m, $start_date_d, $start_date_Y));

    $end_date = date("Y-m-d H:i:s", mktime(8, 0, 0, $end_date_m, $end_date_d, $end_date_Y));
    if($end_date <= $start_date) {
        $table_contents.= "<font size=\"2\" color=\"red\">Start date should be
                            less than end date!</font>";
        $bp->print_page("","",$table_contents,"");
        die;
    }
    //Time to hide submit button and show loading image
    sleep(3);
    $table_contents = "<br/><br/><div style=\"width:500;\" >
    <table border=\"1\" width=\"500\" id=\"reading\">
    <thead>
        <tr>
            <th>Serial #</th>
            <th>Name</th>
            <th>Count</th>
        </tr>
    </thead>
    <tbody>
    <tr><td> 1 </td> <td> Managers </td> <td> 10 </td></tr>
    <tr><td> 2 </td> <td> Engineers </td> <td> 50 </td></tr>
    <tr><td> 3 </td> <td> Interns </td> <td> 5 </td></tr>
    <tr><td> 4 </td> <td> Executives </td> <td> 3 </td></tr>
    <tr><td> 5 </td> <td> Facilities </td> <td> 2 </td></tr>
    </tbody>
    <tfoot>
    <tr>
            <th>Serial #</th>
            <th>Name</th>
            <th>Count</th>
    </tr>
    </tfoot>
    </table></div><br/>    ";
    }
    else {
        $table_contents.= "<font size=\"2\" color=\"red\">Start date/End date
                            is not valid!</font>";
    }
    $bp->print_page("","",$table_contents,"");
    die;
}
else { // On first page load
$bp = new InitPage();
$select_cb = "<form action=\"index.php\" method=\"post\">Please select start and
        end date...<br/>
        <br/><label for=\"start-date\">Start date:</label>
        <input type=\"text\" name=\"start-date\" id=\"start-date\"/><br/><br/>
        <label for=\"end-date\">End date: </label>
        <input type=\"text\" name=\"end-date\" id=\"end-date\"/>

        <p><input type=\"submit\" id=\"submit_button\" name=\"submit_button\"
                value=\"Submit\"></p>
        <span id=\"spanloader\" style=\"display: none;\"><img src=\"images/loading1.gif\"
            alt=\"Please wait...\"> Please wait...</span>
        </form> ";
$bp->print_page("","",$select_cb,"");
}
?>

Create javascript file (js/myscript.js) with these contents:

//attach datepicker to start date
$(function() {
    $("#start-date").datepicker();
});
//attach datepicker to end date
$(function() {
    $("#end-date").datepicker();
});

$().ready(function() {
    $('#submit_button').show();

//hide the submit button after click and show loading image
        $('[id$=submit_button]').click(function() {
                $('#spanloader').show();
                $('#submit_button').hide();
            });
});

//set datatable
$(document).ready(function() {
    $('#reading').dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers"});
} );

This should get you started with a data table and start date end date datepicker using jquery.

Tech talk!

Friday, July 30, 2010

jQuery - Start date/end date datepicker calendar and datatable

2 comments: