PHP HTML 表单和 Java 日期选择器
PHP HTML form and Java datepicker
我有一个 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>
**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/
首先,我建议您拆分代码。创建您自己的 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 相同,它应该始终作为最后一个文件重新引用。
我有一个 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>
**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/
首先,我建议您拆分代码。创建您自己的 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 相同,它应该始终作为最后一个文件重新引用。