PHP HTML form and Java datepicker

Question

PHP HTML form and Java datepicker

3.8k views Asked by AdieB At 28 August 2017 at 09:55

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>

Original Q&A

There are 2 answers

Pankaj Yadav On 28 August 2017 at 10:39

**include bootstrap files**

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker1').datetimepicker();
            });
        </script>
    </div>
</div>

https://eonasdan.github.io/bootstrap-datetimepicker/

**N3wbie** · Accepted Answer · 2017-08-28 12:02:35

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.

TechQA.

PHP HTML form and Java datepicker

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in JQUERY

Related Questions in HTML

Related Questions in DATAPICKER

Popular Questions

Popular Tags

Trending Questions