Retrieve date from database PHP (set date to Jquery Datepicker)
Hi,
I have a problem setting the default date of my jquery datepicker to the date that I retrieved from my database.
I'm currently using the jquery datepicker linked to selects/ drop downs. I auto-fill my selects (month, day, year) from an external javascript. (fbDateTime.js)
Could someone please help me. Thanks!
Here is my code below:
- <html>
<?php
$username="root";
$password="";
$database="datepicker";
mysql_connect('localhost',$username,$password);
@mysql_select_db($database) or die("Unable to select database");
$query = "SELECT date_value FROM `date` WHERE id = '3'";
$result = mysql_query($query) or die(mysql_error());
$row = mysql_fetch_assoc($result);
$temp_mydate = explode("-",$row['date_value']);
$year = $temp_mydate["0"];
$month = $temp_mydate["1"];
$day = $temp_mydate["2"];
?>
<meta content= "text/html; charset= utf-8" http-equiv="Content-Type"/>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<link rel="stylesheet" href="jquery.datepick.css" type="text/css" />
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="fbDateTime.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// Prevent selection of invalid dates through the select controls
function checkLinkedDays() {
var daysInMonth = $.datepick.daysInMonth(
$('#selectedYear').val(), $('#selectedMonth').val());
$('#selectedDay option:gt(27)').attr('disabled', '');
$('#selectedDay option:gt(' + (daysInMonth - 1) +')').attr('disabled', 'disabled');
if ($('#selectedDay').val() > daysInMonth) {
$('#selectedDay').val(daysInMonth);
}
}
function updateSelected(dates) {
$('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
$('#selectedDay').val(dates.length ? dates[0].getDate() : '');
$('#selectedYear').val(dates.length ? dates[0].getFullYear() : '');
checkLinkedDays();
}
$('#selectedPicker').datepick({
yearRange: '1980:2010',
alignment: 'bottomRight', onSelect: updateSelected, altField: '#setDate',
showTrigger: '#calImg'});
// Update datepicker from three select controls
$('#selectedMonth,#selectedDay,#selectedYear').change(function() {
$('#selectedPicker').datepick('setDate', new Date(
$('#selectedYear').val(), $('#selectedMonth').val() - 1,
$('#selectedDay').val()));
});
$('#selectedDay,#selectedMonth,#selectedYear').change(function() {
var date = $.datepick.day(
$.datepick.month(
$.datepick.year(
$.datepick.today(), $('#selectedYear').val()),
$('#selectedMonth').val()),
$('#selectedDay').val());
$('#setDate').val($.datepick.formatDate(date));
});
// change();
$().fbDateTime({
date:'#selectedDay',
month:'#selectedMonth',
year:'#selectedYear',
yearStart:1980
});
});
</script>
</head>
<body>
<form id = "list" action="" method="post">
<select id = 'selectedMonth' name = 'selectedMonth' onchange="showSelected();" >
</select>
<select id = 'selectedDay' name = 'selectedDay' >
</select>
<select id = 'selectedYear' name = 'selectedYear' >
</select>
<input size="10" id = "selectedPicker" name = "selectedPicker" value="<?php echo $row['date_value'];?>" type="text" />
<div style="display:none"><img src="calicon.jpg" width="16" height="15" alt="Popup" id = "calImg"/></div>
<input type="text" size="10" id = "setDate" readonly="" value="<?php echo $row['date_value']; ?>"/>
</form>
</body>
</html>