Search jQuery

jQuery Forum

Retrieve date from database PHP (set date to Jquery Datepicker)

in Using jQuery Plugins • 1 year ago

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>

Replies(6)

kbwood.au

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

1 year ago

Instead of setting the date directly into the #selectedPicker field, use the setDate command:

$('#selectedPicker').datepick('setDate', '<?php echo $row['date_value']; // in current dateFormat ?>');

raq0619

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

1 year ago

Thanks for the help! but I still couldn't make it work..

could you check if this is right? I just added the line of code that you gave me.. Thanks again!

$('#selectedPicker').datepick
      ({
          yearRange: '1980:2010',
          alignment: 'bottomRight',
onSelect: updateSelected,
altField: '#set_Date',
'setDate', '<?php echo $row['date_value'];?>',
showTrigger: '#calImg'
});

kbwood.au

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

1 year ago

No, you add it after initialising the datepicker:

$('#selectedPicker').datepick({yearRange: '1980:2010', alignment: 'bottomRight',
onSelect: updateSelected, altField: '#set_Date', showTrigger: '#calImg'}).
datepick('setDate', '<?php echo $row['date_value'];?>');

raq0619

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

1 year ago

thank you again for the help!

I was able to retrieve the date from the database and set the default date of the jquery datepicker from the retrieved date. But i encountered another problem. regarding the dropboxes

as seen in the image above, I can't seem to place the date that i retrieved there, since i'm using another javascript file to populate the month, days and years.

If you still have the time to help., I would really appreciate your great help!

here is my whole code:

<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_array($result);

function mysql2date($row){
$splitArray = explode("-",$row);
$newDate = $splitArray[1] . "/" . $splitArray[2] . "/" . $splitArray[0]; return $newDate;
}

$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: '#set_Date', showTrigger: '#calImg'}).
            datepick('setDate', '<?php echo mysql2date($row['date_value']); ?>');

// 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());
        $('#set_Date').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" type="text" value="<?php echo mysql2date($row['date_value']); ?> " />
    <div style="display:none"><img src="calicon.jpg" width="16" height="15" alt="Popup" id = "calImg"/></div>
    <input type="text" size="10" id = "set_Date" readonly="" value="<?php echo mysql2date($row['date_value']); ?>"/>
</form>
</body>
</html>

kbwood.au

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

1 year ago

Try initialising the drop-downs with fbDateTime before setting up the datepicker.

You shouldn't need the second selectedXXX change event as #set_date is automatically set from the datepicker.

raq0619

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

1 year ago

Thanks! i'll try it out

Top Reply

Response title

Attachments

jQuery Forum

Retrieve date from database PHP (set date to Jquery Datepicker)

Replies(6)

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

Re: Retrieve date from database PHP (set date to Jquery Datepicker)

Statistics

Tags

Actions

Related Posts