日期时间不起作用（php + html）答案

【问题标题】：Datetime not working (php+html)日期时间不起作用（php + html）
【发布时间】：2014-04-19 11:07:25
【问题描述】：

我的日期时间输入有问题...在 HTML 代码中我添加了日期时间，但它只显示常规形式... 我会发布一些图片让你更好地理解我的意思...... 这是html代码：

<form method='post'>
<br>Sport:<br>
<select name='sport'>
<option value='football' selected>Football</option>
<option value='basketball'>Basketball</option>
<option value='tennis'>Tennis</option>
<option value='hockey'>Hockey</option>
<option value='handball'>Handball</option>
<option value='volleyball'>Volleyball</option>
<option value='baseball'>Baseball</option>
<option value='waterpolo'>Water polo</option>
<option value='other'>Other</option>
</select>
<br>Starting time:<br>
<input type='datetime' name='start'/>
<br>Home:<br>
<input type='text' name='home'/><br>
Away:<br>
<input type='text' name='away'/><br>
Pick:<br>
<input type='text' name='pick'/><br>
Odd:<br>
<input type='number' step='0.01' name='odd'/><br>
Stake:<br>
<input type='number' step='0.01' name='stake'/><br>
Analysis:
<br><textarea style='width:100%;' rows='20' name='analiza'></textarea>
<input type='submit' value='Place a bet' name='postavi'/>
</form>

但日期时间看起来像这样：

我不想看起来像这样，我希望常规的约会时间女巫看起来像这样：

感谢所有试图提供帮助的人。干杯，托尼。

【问题讨论】：

您正在测试什么浏览器？ See Browser support
您需要一个 javascript 插件来提供该功能。无论是你自己的还是第三方的（我推荐第三方来做这样的标准）。我使用 jQuery 和 jQuery UI Datepicker 购买 YMMV
在 chrome 和 firefox 中测试
Adam，你能解释一下我该怎么做吗？因为我是这方面的新手，我总是尽量远离 javascript，因为它们对我来说太复杂了。

标签： php html date datetime time

【解决方案1】：

一些浏览器已经实现了日期时间，但随后将其删除（不知道为什么）。要查看哪些浏览器支持 DateTime 输入检查caniuse.com/input-datetime

编辑：使用像JQuery Datepicker这样的javascript插件

来自 Jquery 页面的示例：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>

【讨论】：

Almis，你能解释一下我如何在我的代码中使用 JQuery Datepicker 吗？我几乎从不使用 Jquery 和 js。谢谢
@StevenPHP 我刚刚添加了源代码，因为 OP 要求我，我不会复制粘贴其他答案
还有选择时间的选项吗？

【解决方案2】：

您需要作为 jQueryUI 库一部分的 datepicker 函数

演示http://jsfiddle.net/Fa8Xx/1768/

jQuery UI link

这也是 HTML5 date 类型属性。不过，这在很大程度上依赖于 HTML 浏览器支持。

演示http://jsfiddle.net/Fa8Xx/1769/

 <input type="date" />

【讨论】：

Vector，你能解释一下我是怎么做的吗，我几乎从不使用 javascripts。谢谢。
我已经使用date HTML5 浏览器输入类型编辑了我的答案。就最佳前进方式而言，它确实取决于您需要支持哪些浏览器。由于浏览器支持，我个人使用 jQuery UI 日期选择器而不是依赖 HTML5。
@user3511855 您只需在 html 的头部包含 jQuery 库和 jquery UI 库。然后只需将 datepicker 类添加到您希望用作日历类型日期选择器的任何 html 输入中。
谢谢，Vector 我会试试的。
再问一个问题。我只是添加 datepicker 及其工作，但它的显示只是为了选择一个日期。是否也可以选择时间。谢谢

【解决方案3】：

我相信您需要 datetime-localtype 代替。所以 HTML 看起来像这样：

<input type='datetime-local' name='start'/>

【讨论】：