hg-datepicker
Version:
a datepicker in the mobile terminal
164 lines (150 loc) • 4.89 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="screen-orientation" content="portrait" />
<title>hg-datepicker</title>
<link rel="stylesheet" type="text/css" href="./picker.css" />
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
.wraper {
margin-bottom: 15px;
}
.title {
position: relative;
width: 100%;
height: 48px;
line-height: 48px;
text-align: center;
color: #000;
}
.title:after {
content: '';
position: absolute;
width: 100px;
height: 5px;
left: 48%;
bottom: 0;
margin: 0 -42px;
background: #bbb;
border-radius: 10px;
}
.inputDiv {
color: #333;
width: 200px;
height: 20px;
line-height: 20px;
margin: 10px auto;
padding: 5px 20px;
border: 1px solid #bbb;
border-radius: 8px;
}
</style>
</head>
<body>
<article class="wraper">
<h3 class="title">datePicker</h3>
<div class="inputDiv" onclick="select(1)" id="date-input1">选择年月日</div>
</article>
<article class="wraper">
<h3 class="title">datePicker2</h3>
<div class="inputDiv" onclick="select(2)" id="date-input2">选择年月日</div>
</article>
<article class="wraper">
<h3 class="title">timeSelector</h3>
<div class="inputDiv" onclick="select2()" id="time-input">选择时分</div>
</article>
<article class="wraper">
<h3 class="title">dateTimeSelector</h3>
<div class="inputDiv" onclick="select3()" id="datetime-input">选择年月日时分</div>
</article>
<article class="wraper">
<h3 class="title">monthSelector</h3>
<div class="inputDiv" onclick="select4()" id="month-input">选择年月</div>
</article>
<script type="text/javascript" src="./dist/hg-datepicker.js"></script>
<script>
var now = new Date()
var a1 = now.getFullYear()
var a2 = now.getMonth() + 1
var a3 = now.getDate()
var pass = new Date(now.getTime() - 86400 * 1000 * 5000)
var a4 = pass.getFullYear()
var a5 = pass.getMonth() + 1
var a6 = pass.getDate()
var picker = new DatePicker({
title: '日期选择',
initValue: [2018, 3, 31],
cancel: function () {
console.log('取消日期选择');
},
onOk: function (arr) { // 回调函数
console.log(arr);
document.getElementById('date-input' + picker.get('pickerNumber')).innerHTML = arr
}
});
var picker2 = new DatePicker({
inputId: 'date-input2',
type: 'time', // 选择器类型
start: [2, 30], // 开始时间
end: [22, 20], // 结束时间
style: {
btnHeight: 46
},
onOk: function (arr) {
console.log(arr)
document.getElementById('time-input').innerHTML = arr
}
})
var picker3 = new DatePicker({
type: 'dateTime',
style: {
btnHeight: 44
},
start: [2020, 2, 2, 2, 20], // 开始时间
end: [2120, 4, 4, 5, 50], // 结束时间
hasSuffix: 'no', // 不添加时间单位
hasZero: 'no', // 单位数不显两位
onOk: function (arr) {
console.log(arr)
document.getElementById('datetime-input').innerHTML = arr
}
})
window.select = function select(number) {
picker.set({
pickerNumber: number,
title: `${number}号选择器`
})
picker.show()
}
window.select2 = function () {
picker2.show()
}
window.select3 = function () {
picker3.show()
}
var picker4 = new DatePicker({
type: 'month',
initValue: [1979, 10],
start: [1960, 3],
end: [2020, 3],
hasSuffix: 'no', // 不添加时间单位
onOk: function (arr) {
console.log(arr)
document.getElementById('month-input').innerHTML = arr
}
})
window.select4 = function () {
picker4.show()
}
</script>
</body>
</html>