PHP HTML 表单和 Java 日期选择器

Question

我有一个 HTML 表单，它预加载了来自 MySQL 的数据。我添加了一个表单字段 "New Follow Up" 以使用日期选择器生成弹出式日历。日期选择器 return 是一种 DATE 格式，我需要将其转换为 MySQL 的 DATETIME。 return 目前是 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>

Answer 1

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

Answer 2

首先，我建议您拆分代码。创建您自己的 JavaScript 文件，例如main.js，对所有 JavaScript 函数进行编程，并在 HTML-header 中引用 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 的日期时间选择器需要 jQuery-Lib。如果在 eonasdan 之后引用 jQuery-lib，它将无法工作。与 main.js 相同，它应该始终作为最后一个文件重新引用。

PHP HTML 表单和 Java 日期选择器

PHP HTML form and Java datepicker

html

javascript

php

jquery

datapicker