<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no, email=no" />
<meta name="full-screen" content="true" />
<meta name="screen-orientation" content="portrait" />
<meta name="x5-fullscreen" content="true" />
<meta name="360-fullscreen" content="true" />
<title></title>
<link rel="stylesheet" type="text/css" href="iosSelect/iosSelect.css" />
</head>
<body>
<div class="form">
<div class="input-container">
<div class="input-box">
<span class="label">时间</span>
<div style="position: relative;">
<div class="selectTime">
<input class="dateTime" value="开始时间" type="button" id="startTime">
<div>至</div>
<input class="dateTime" value="结束时间" type="button" id="endTime">
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 引入iosSelect文件用来兼容ios -->
<script src="iosSelect/iosSelect.js" type="text/javascript" charset="utf-8"></script>
<script src="./utils.js" type="text/javascript" charset="utf-8"></script>
<script src="./jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function () {
var util = new Utils();
var dateTimeStr;
var dateStr;
var curentDate;
window.onload = function () {
dateTimeStr = util.getNowFormatDateTime();
curentDate = util.getNowFormatDate();
initComponets();
}
function initComponets () {
$("#startTime").bind("click", function () {
var d = $("#startTime").val();
var maxArr = util.getDateArray(new Date().getTime(), true);
var minArr = [2008, 01, 01];
var arrDefualt = d.split("-");
util.DateTimePicker(minArr, maxArr, arrDefualt, -1, function (year, month, date, hour, minutes, seconds) {
dateTimeStr = year + "-" + month + "-" + date + " " + hour + ":" + minutes + ":" + seconds;
$("#startTime").val(dateTimeStr);
});
});
$("#endTime").bind("click", function () {
var d = $("#endTime").val();
var maxArr = util.getDateArray(new Date().getTime(), true);
var minArr = [2008, 01, 01];
var arrDefualt = d.split("-");
util.DateTimePicker(minArr, maxArr, arrDefualt, -1, function (year, month, date, hour, minutes, seconds) {
dateTimeStr = year + "-" + month + "-" + date + " " + hour + ":" + minutes + ":" + seconds;
if (new Date($('#startTime').val()) >= new Date(dateTimeStr)) {
$('.theText').html('结束时间需要超过开始时间');
$('.dialog').show();
return false;
}
$("#endTime").val(dateTimeStr);
});
});
}
});
</script>
<style scoped>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
color: #000;
font-family: Arial, Helvetica, sans-serif;
background: #fff;
}
.form {
padding: 30px;
}
.form .label {
line-height: 2;
display: block;
color: #8188A5;
font-size: 16px;
}
.selectTime {
display: flex;
justify-content: space-around;
font-size: 10px;
box-sizing: border-box;
border: 1px solid #D4D4D4;
border-radius: 4px;
background: #FAFAFA;
}
.selectTime div {
height: 42px;
line-height: 42px;
}
.selectTime input {
border: none;
background: none;
height: 42px;
}
</style>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
h5日期选择与时间选择组件
![preview](https://csdnimg.cn/release/downloadcmsfe/public/img/white-bg.ca8570fa.png)
共5个文件
js:3个
html:1个
css:1个
![preview-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/scale.ab9e0183.png)
需积分: 40 4 下载量 52 浏览量
2022-12-09
09:58:51
上传
评论
收藏 88KB ZIP 举报
温馨提示
h5日期选择与时间选择组件
资源推荐
资源详情
资源评论
![text/plain](https://img-home.csdnimg.cn/images/20210720083646.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![Zip](https://img-home.csdnimg.cn/images/20210720083646.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
收起资源包目录
![package](https://csdnimg.cn/release/downloadcmsfe/public/img/package.f3fc750b.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![folder](https://csdnimg.cn/release/downloadcmsfe/public/img/folder.005fa2e5.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/HTML.png)
![file-type](https://csdnimg.cn/release/download/static_files/pc/images/minetype/UNKNOWN.png)
共 5 条
- 1
资源评论
![avatar-default](https://csdnimg.cn/release/downloadcmsfe/public/img/lazyLogo2.1882d7f4.png)
![avatar](https://profile-avatar.csdnimg.cn/bdc076707ba145688e0b0d43618c2611_m0_46613429.jpg!1)
落雪小轩韩
- 粉丝: 515
- 资源: 4
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助
![voice](https://csdnimg.cn/release/downloadcmsfe/public/img/voice.245cc511.png)
![center-task](https://csdnimg.cn/release/downloadcmsfe/public/img/center-task.c2eda91a.png)
安全验证
文档复制为VIP权益,开通VIP直接复制
![dialog-icon](https://csdnimg.cn/release/downloadcmsfe/public/img/green-success.6a4acb44.png)