PHP HTML form and Java datepicker

I have an HTML form which preloads with data from MySQL. I have added one form field "New Follow Up" to have a popup calendar using datepicker. The datepicker returns a DATE format, which I need to convert to DATETIME for MySQL. The return is currently date_followup.

I was wondering if this could be done within the <script> function, so that the date_followup could be in the standard DATETIME format, elimination the conversion. Or is there an easier way?

<div class="control-group <?php echo !empty($date_followupError)?'error':'';?>">
    <label class="control-label">New Followup Date</label>
    <div class="controls">
        <input name="date_followup" type="text" placeholder="Enter Follow up date" value="<?php echo !empty($date_followup)?$date_followup:'';?>">
        <?php if (!empty($date_followupError)): ?>
        <span class="help-inline"><?php echo $date_followupError;?></span>
        <?php endif;?>

        <head>
            <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
            <script>
                $(document).ready(function() {
                    $("#datepicker").datepicker();
                });
            </script>
        </head>

        <body>
            <input id="datepicker" input name="date_followup">
        </body>
    </div>
</div>

Solution

First i recommend you to split your codes. Create your own JavaScript file e.g. main.js, program all your JavaScript function in and refer the main.js file in your HTML-header. It would be much easier to debug your code. Furthermore you need a JavaScrip-Lib for a Datetimepicker. As my previous speaker said, use the eonasdan-picker and refer it also in your header file. So:

HTML

 <head>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script type="text/javascript" src="https://github.com/Eonasdan/bootstrap-datetimepicker/blob/master/src/js/bootstrap-datetimepicker.js"></script>
  <script type="text/javascript" src="path/to/main.js"></script>
</head>
<body>
  <div class="form-group">
    <div class='input-group date' id='datepicker'>
      <input type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
  </div>
</body>

JavaScript (main.js)

$( document ).ready(function() {
    $('#datepicker').datetimepicker({
      //here you have the possibilty to configure the picker as you wish
      //e.g. the format
      format: 'y-m-d'
      //read the documentary of EONASDAN to see which attributes you can choose
    })
});

Important: The order of your CSS- and JS-Libs matters. E.g. the datetimepicker of EONASDAN needs the jQuery-Lib. If the jQuery-lib is reffered after eonasdan, it would not work. Same with the main.js, which should reffered evertime as the last file.