Friday, July 30, 2010

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 -

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=\"\"></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"]) &&
    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>";
    //Time to hide submit button and show loading image
    $table_contents = "<br/><br/><div style=\"width:500;\" >
    <table border=\"1\" width=\"500\" id=\"reading\">
            <th>Serial #</th>
    <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>
            <th>Serial #</th>
    </table></div><br/>    ";
    else {
        $table_contents.= "<font size=\"2\" color=\"red\">Start date/End date
                            is not valid!</font>";
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\"
        <span id=\"spanloader\" style=\"display: none;\"><img src=\"images/loading1.gif\"
            alt=\"Please wait...\"> Please wait...</span> 
        </form> ";

Create javascript file (js/myscript.js) with these contents:
//attach datepicker to start date
$(function() {
//attach datepicker to end date   
$(function() {
$().ready(function() { 
//hide the submit button after click and show loading image 
        $('[id$=submit_button]').click(function() { 
//set datatable   
$(document).ready(function() {
    "bJQueryUI": true,   
    "sPaginationType": "full_numbers"});
} );

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


Anonymous said...

Изумительная статья, как долго ожидать поступление новенького материала и вообщем стоит ожидать ?

Harpreet said...

Thanks, I try to add, as and when I find time between my classes.

Anonymous said...

Данный пост — одно из редких исключений, когда читаешь с удовольствием и что-то для себя выносишь. Спасибо автору. Добавлю в избранное[url=].[/url] :)