I am adding date field to datatable editable. When clicked on add button it displays a form and allows to add date field. What I want to know is how to add date selection to it. So that it accepts only dates.
@aakp: This was a little convoluted but I did figure out how to add the jQuery UI element 'datepicker' to my Add New Record Form.
Here you go.
1. Go to the jQuery UI page at http://jqueryui.com/ and create a custom jquery-ui-VER.NUM.custom.min.js file and make sure you pick datepicker and grab the rest of it while you are at it.
3. Create a form in your section and make a link to the 'datepicker'
[code]
Broadcast Date:
[/code]
Hope this helps. It took me a while to figure it out.
I am currently stuck though on adding 'datepicker' to the Edit in Place update function. Will figure it out soon.
mysql_connect(localhost,$username,$password);
mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * from carsubs2 ORDER BY datesubbed DESC";
$result=mysql_query($query);
Replies
Here you go.
1. Go to the jQuery UI page at http://jqueryui.com/ and create a custom jquery-ui-VER.NUM.custom.min.js file and make sure you pick datepicker and grab the rest of it while you are at it.
2. add to your Datatable web page as
$(function() {
$( "#datepicker" ).datepicker();
});
3. Create a form in your section and make a link to the 'datepicker'
[code]
Broadcast Date:
[/code]
Hope this helps. It took me a while to figure it out.
I am currently stuck though on adding 'datepicker' to the Edit in Place update function. Will figure it out soon.
<!--
Created using /
Source can be edited via /ilofuv/3/edit
-->
@import "/media/css/demo_page.css";
@import "/media/css/demo_table_jui.css";
Min date:
Max date:
id
Promo
datesubbed
<?php
$username="root";
$password="";
$database="carsubexporter";
mysql_connect(localhost,$username,$password);
mysql_select_db($database) or die( "Unable to select database");
$query="SELECT * from carsubs2 ORDER BY datesubbed DESC";
$result=mysql_query($query);
$num=mysql_numrows($result);
mysql_close();
echo "Database Output
";
$i=0;
while ($i < $num) {
$id=mysql_result($result,$i,"id");
$promoid=mysql_result($result,$i,"promoid");
$datesubbed=mysql_result($result,$i,"datesubbed");
?>
<?php echo $id; ?>
<?php echo $promoid; ?>
<?php echo $datesubbed; ?>
<?php
$i++;
}
?>
var minDateFilter;
var maxDateFilter;
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( typeof aData._date == 'undefined' ) {
aData._date = new Date(aData[1]).getTime();
}
if ( minDateFilter && !isNaN(minDateFilter) ) {
if ( aData._date < minDateFilter ) {
return false;
}
}
if ( maxDateFilter && !isNaN(maxDateFilter) ) {
if ( aData._date > maxDateFilter ) {
return false;
}
}
return true;
}
);
$(document).ready( function() {
var oTable = $('#example').dataTable( {
"bJQueryUI": true
} );
$( "#datepicker_min" ).datepicker ( {
dateFormat: 'yy-mm-dd',
"onSelect": function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
} ).keyup( function () {
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
} );
$( "#datepicker_max" ).datepicker( {
dateFormat: 'yy-mm-dd',
"onSelect": function(date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
} ).keyup( function () {
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
} );
} );