[PHP日期时间函数]⑥--时间控件

Paste_Image.png

H5 新增表单插件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5中新增表单控件</title>
</head>
<body>
<h1>H5中新增表单时间相关控件</h1>
<form action="doAction.php" method="post">
    <input type="date" name="datetime" id=""><br/>
    <input type="datetime" name="datetime1"><br/>
    <input type="datetime-local" name="datetim2"><br/>
    <input type="week" name="datetim3">
    <input type="month" name="datetim4">
    <input type="time" name="datetim5">
    <input type="submit">
</form>
</body>

</html>
Paste_Image.png
Paste_Image.png

http://www.jq22.com/jquery-info332

http://plugins.jquery.com/flipcountdown/

datetimepicker IE8不支持

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" type="text/css"
          href="datetimepicker-master20160419/jquery.datetimepicker.css"/>


</head>
<body>
<form method="post" action="doAction.php">
    <input type="text" id="datetimepicker" name="datetime" value="">
</form>
<script src="datetimepicker-master20160419/jquery.js"></script>
<script src="datetimepicker-master20160419/jquery.datetimepicker.min.js"></script>
<script type="text/javascript">
    $('#datetimepicker').datetimepicker({lang:'ch'});
//    $('#datetimepicker').datetimepicker({value:'2016-8-12'});
</script>

</body>

</html>

flipcountdown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time控件</title>
    <link rel="stylesheet" type="text/css"
          href="flipcountdown-master/jquery.flipcountdown.css"/>


</head>
<body>
<div id="myClockBox1"></div>
<div id="myClockBox2"></div>
<div id="myClockBox3"></div>
<script src="flipcountdown-master/jquery.min.js"></script>
<script src="flipcountdown-master/jquery.flipcountdown.js"></script>
<script type="text/javascript">
    $(function () {
        $('#myClockBox1').flipCountDown();
        $('#myClockBox2').flipCountDown({
            size:'lg'
        });
        $('#myClockBox3').flipCountDown({
            size:'xs'
        });
    });
</script>
</body>

</html>
Paste_Image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容