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

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:
  1. <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>