jQuery - Start date/end date datepicker calendar and datatable - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul jQuery - Start date/end date datepicker calendar and datatable, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan
Artikel calendar,
Artikel datatable,
Artikel datepicker,
Artikel end date,
Artikel jQuery,
Artikel loading image,
Artikel start date, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.
Judul : jQuery - Start date/end date datepicker calendar and datatable
link : jQuery - Start date/end date datepicker calendar and datatable
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.
Anda sekarang membaca artikel jQuery - Start date/end date datepicker calendar and datatable dengan alamat link https://dev-create.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html
Judul : jQuery - Start date/end date datepicker calendar and datatable
link : jQuery - Start date/end date datepicker calendar and datatable
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.
Demikianlah Artikel jQuery - Start date/end date datepicker calendar and datatable
Sekianlah artikel jQuery - Start date/end date datepicker calendar and datatable kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.
Anda sekarang membaca artikel jQuery - Start date/end date datepicker calendar and datatable dengan alamat link https://dev-create.blogspot.com/2010/07/jquery-start-dateend-date-datepicker.html
