PHP HTML 表单和 Java 日期选择器答案

【问题标题】：PHP HTML form and Java datepickerPHP HTML 表单和 Java 日期选择器
【发布时间】：2017-08-28 09:55:33
【问题描述】：

我有一个预加载 MySQL 数据的 HTML 表单。我添加了一个表单字段“New Follow Up”以使用 datepicker 弹出日历。 datepicker 返回一个 DATE 格式，我需要将它转换为 MySQL 的 DATETIME。目前返回的是date_followup。

我想知道这是否可以在 <script> 函数中完成，以便 date_followup 可以采用标准 DATETIME 格式，消除转换。或者有没有更简单的方法？

<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>

【问题讨论】：

标签： javascript php jquery html datapicker

【解决方案1】：

首先，我建议您拆分代码。创建您自己的 JavaScript 文件，例如main.js，编写所有 JavaScript 函数，并在 HTML 标头中引用 main.js 文件。调试代码会容易得多。此外，您需要一个用于 Datetimepicker 的 JavaScrip-Lib。正如我之前的演讲者所说，使用eonasdan-picker 并在你的头文件中引用它。所以：

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
    })
});

重要提示：CSS- 和 JS-Libs 的顺序很重要。例如。 EONASDAN 的 datetimepicker 需要 jQuery-Lib。如果在 eonasdan 之后引用了 jQuery-lib，它将不起作用。与 main.js 相同，它应该永远作为最后一个文件引用。

【讨论】：

【解决方案2】：

**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/

【讨论】：