Skip to content

Commit

Permalink
add: 增加时间选择器的success返回值类型
Browse files Browse the repository at this point in the history
  • Loading branch information
@AppianZ
AppianZ committed Jul 20, 2017
1 parent db5f8b2 commit 87d707e
Show file tree
Hide file tree
Showing 4 changed files with 723 additions and 710 deletions.
319 changes: 163 additions & 156 deletions DateSelector/DateSelector.html
View file
Original file line number Diff line number Diff line change
@@ -1,177 +1,184 @@
<!DOCTYPE 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>DateSelector</title>
<link rel="stylesheet" type="text/css" href="./DateSelector.css?rev=@@hash"/>
<style>
body {
background-color: #fafafa;
}
h3 {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #555;
}
h3:after {
content: '';
position: absolute;
width: 100px;
height: 5px;
left: 50%;
bottom: 0;
margin: 0 -50px;
background: #ddd;
border-radius: 10px;
}
article {
color: #333;
line-height: 1.3;
padding: 0 30px;
margin: 20px 0;
}
p {
color: #777;
font-size: 14px;
margin: 5px 0 0 0;
}
.block {
background : rgb(241,241,241);
border-left : 8px solid #D6DBDF;
padding: 10px 12px;
margin: 0 0 15px 0;
overflow: auto;
}
input {
display: block;
width: 200px;
margin: 5px auto 10px;
padding: 5px 20px;
border: 1px solid #cbcbcb;
border-radius: 8px;
}
</style>
<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>DateSelector</title>
<link rel="stylesheet" type="text/css" href="./DateSelector.css?rev=@@hash"/>
<style>
body {
background-color: #fafafa;
}

h3 {
position: relative;
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: #555;
}

h3:after {
content: '';
position: absolute;
width: 100px;
height: 5px;
left: 50%;
bottom: 0;
margin: 0 -50px;
background: #ddd;
border-radius: 10px;
}

article {
color: #333;
line-height: 1.3;
padding: 0 30px;
margin: 20px 0;
}

p {
color: #777;
font-size: 14px;
margin: 5px 0 0 0;
}

.block {
background: rgb(241, 241, 241);
border-left: 8px solid #D6DBDF;
padding: 10px 12px;
margin: 0 0 15px 0;
overflow: auto;
}

input {
display: block;
width: 200px;
margin: 5px auto 10px;
padding: 5px 20px;
border: 1px solid #cbcbcb;
border-radius: 8px;
}
</style>
</head>


<body>

<h3>DateSelector.</h3>
<article>
<p>0.请在移动端下打开~~</p>
<p>1.点击下面的输入演示样式</p>
<input id="date-selector-input" type="text" placeholder="点我~~看固定效果" disabled/>
<div class="block">
优化版的自定义功能不仅是【单位】自定义<br/><br/>
【时间范围】也可以自定义,并且尽可能的进行数据校正<br/><br/>
下面的input会展现【2011年13月-27日 102时12分 ~ 2020年10月21日 20时20分】的效果<br/><br/>
</div>
<input id="date-selector-inputs" type="text" placeholder="点我~~看自定义效果" disabled/>
<p>2.如何引用css和js文件？</p>
<div class="block">
sass文件:引用DateSelector/DateSelector.scss<br/><br/>
css文件:引用DateSelector/DateSelector.css<br/><br/>
js文件:引用DateSelector/DateSelector.js<br/><br/>
</div>
<p>3.如何调用构造函数？</p>
<div class="block">
基本格式：new DateSelector({ ... });<br/><br/>
参数配置:<br/>
input : {String}，点击触发插件的input框的id<br/><br/>
container ： {String}，插件即将插入的容器id<br/><br/>
type ：{0或1}，0为自定义插件的日期单位(不带tab切换)，1为固定插件的日期单位为【年月日】【时分】(带tab切换)<br/><br/>
param : {Array},例如 [1,1,0,0,0]，分别设置['year','month','day','hour','minute'],1为需要，0为不需要,需要为连续的1
<br/><br/>
beginTime : {Array},空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点如[2011,13,-27,102,12]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
endTime : {Array},空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点如[2020,10,21,20,20]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
recentTime : {Array},空数组默认设置为当前时间，如需要设置当前的时间点如[2016,8,5,12,0]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
success : function(arr){} 回调函数，可以自定义结果格式化
</div>
<p>3.有什么优越性？</p>
<div class="block">
带有加速度的滑动 (•‿•) <br/><br/>

能够动态设置任意开始和结束【时间点】 (•‿•) <br/>
是的,你可以设置任何尴尬的时间了!<br/>
如【2016-11-11 11:11 ~ 2016-12-12 12:12】<br/><br/>

能够任意设置时间单位的组合 (•‿•) <br/>
有时候需要"年月日",<br/>
有时候需要"月日时分",<br/>
有时候又需要"年月日时分"!<br/><br/>

能够切换固定样式和自定义样式,简化参数 (•‿•) <br/>
小清新的样式一定能够打动你冰封的心!<br/><br/>

能利用我的模型处理更多联动 (•‿•) <br/>
比如城市三级联动,但是有待开发喔!<br/><br/>

Trust Me.
</div>
<p>4.有什么局限性？</p>
<div class="block">
样式主题可能和你的产品不符 >.< <br/><br/>

在实际开发过程中,改变主题颜色只能靠自己了~<br/>
你可以选择改变css<br/>
或改变sass的全局变量后重新编译<br/><br/>

如果遇到什么神bug,不要着急<br/>
这时候,请发起issue<br/><br/>

Trust Me. Again.
</div>
<p>0.请在移动端下打开~~</p>
<p>1.点击下面的输入演示样式</p>
<input id="date-selector-input" type="text" placeholder="点我~~看固定效果" disabled/>
<div class="block">
优化版的自定义功能不仅是【单位】自定义<br/><br/>
【时间范围】也可以自定义,并且尽可能的进行数据校正<br/><br/>
下面的input会展现【2011年13月-27日 102时12分 ~ 2020年10月21日 20时20分】的效果<br/><br/>
</div>
<input id="date-selector-inputs" type="text" placeholder="点我~~看自定义效果" disabled/>
<p>2.如何引用css和js文件？</p>
<div class="block">
sass文件:引用DateSelector/DateSelector.scss<br/><br/>
css文件:引用DateSelector/DateSelector.css<br/><br/>
js文件:引用DateSelector/DateSelector.js<br/><br/>
</div>
<p>3.如何调用构造函数？</p>
<div class="block">
基本格式：new DateSelector({ ... });<br/><br/>
参数配置:<br/>
input : {String}，点击触发插件的input框的id<br/><br/>
container ： {String}，插件即将插入的容器id<br/><br/>
type ：{0或1}，0为自定义插件的日期单位(不带tab切换)，1为固定插件的日期单位为【年月日】【时分】(带tab切换)<br/><br/>
param : {Array},例如 [1,1,0,0,0]，分别设置['year','month','day','hour','minute'],1为需要，0为不需要,需要为连续的1
<br/><br/>
beginTime : {Array},空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点如[2011,13,-27,102,12]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
endTime : {Array},空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点如[2020,10,21,20,20]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
recentTime : {Array},空数组默认设置为当前时间，如需要设置当前的时间点如[2016,8,5,12,0]，数组的值对应param参数的对应值,带有自动校正。<br/><br/>
success : function(arr){} 回调函数，可以自定义结果格式化
</div>
<p>3.有什么优越性？</p>
<div class="block">
带有加速度的滑动 (•‿•) <br/><br/>

能够动态设置任意开始和结束【时间点】 (•‿•) <br/>
是的,你可以设置任何尴尬的时间了!<br/>
如【2016-11-11 11:11 ~ 2016-12-12 12:12】<br/><br/>

能够任意设置时间单位的组合 (•‿•) <br/>
有时候需要"年月日",<br/>
有时候需要"月日时分",<br/>
有时候又需要"年月日时分"!<br/><br/>

能够切换固定样式和自定义样式,简化参数 (•‿•) <br/>
小清新的样式一定能够打动你冰封的心!<br/><br/>

能利用我的模型处理更多联动 (•‿•) <br/>
比如城市三级联动,但是有待开发喔!<br/><br/>

Trust Me.
</div>
<p>4.有什么局限性？</p>
<div class="block">
样式主题可能和你的产品不符 >.< <br/><br/>

在实际开发过程中,改变主题颜色只能靠自己了~<br/>
你可以选择改变css<br/>
或改变sass的全局变量后重新编译<br/><br/>

如果遇到什么神bug,不要着急<br/>
这时候,请发起issue<br/><br/>

Trust Me. Again.
</div>
</article>

<div id="targetContainer"></div>
<div id="targetContainers"></div>



<script src="./DateSelector.js"></script>
<script>
//---------------------函数调用开始---------------------
new DateSelector({
input : 'date-selector-input',//点击触发插件的input框的id
container : 'targetContainer',//插件插入的容器id
type : 0,
//0：不需要tab切换，自定义滑动内容，建议小于三个；
//1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
param : [1,1,1,0,0],
//设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
beginTime : [2017,5,7],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
endTime : [2027,5,7],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
recentTime : [2017,5,9],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
success : function(arr){
alert(arr);
console.log(arr);
}//回调
});
//---------------------函数调用结束---------------------
//月份从1开始

new DateSelector({
input : 'date-selector-inputs',//点击触发插件的input框的id
container : 'targetContainers',//插件插入的容器id
type : 0,
//0：不需要tab切换，自定义滑动内容，建议小于三个；
//1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
param : [1,1,1,0,0],
//设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
beginTime : [2014,5,31],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
endTime : [2017,6,1],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
recentTime : [2017,5,9],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
success : function(arr){
alert(arr);
console.log(arr);
}//回调
});
//---------------------函数调用开始---------------------
new DateSelector({
input: 'date-selector-input',//点击触发插件的input框的id
container: 'targetContainer',//插件插入的容器id
type: 1,
//0：不需要tab切换，自定义滑动内容，建议小于三个；
//1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
param: [1, 1, 1, 1, 1],
//设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
beginTime: [2017, 5, 7, 1, 1],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
endTime: [2027, 5, 7, 12, 2],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
recentTime: [2017, 5, 9, 2, 2],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
success: function (arr, arr2) {
alert('打开控制台查看结果');
console.log(arr, '--- 数字结果');
console.log(arr2, '--- 字符串结果');
}//回调
});
//---------------------函数调用结束---------------------
//月份从1开始

new DateSelector({
input: 'date-selector-inputs',//点击触发插件的input框的id
container: 'targetContainers',//插件插入的容器id
type: 0,
//0：不需要tab切换，自定义滑动内容，建议小于三个；
//1：需要tab切换，【年月日】【时分】完全展示，固定死，可设置开始年份和结束年份
param: [0, 0, 1, 1, 1],
//设置['year','month','day','hour','minute'],1为需要，0为不需要,需要连续的1
beginTime: [1, 5, 31],//如空数组默认设置成1970年1月1日0时0分开始，如需要设置开始时间点，数组的值对应param参数的对应值。
endTime: [6, 6, 1],//如空数组默认设置成次年12月31日23时59分结束，如需要设置结束时间点，数组的值对应param参数的对应值。
recentTime: [2, 5, 9],//如不需要设置当前时间，被为空数组，如需要设置的开始的时间点，数组的值对应param参数的对应值。
success: function (arr, arr2) {
alert('打开控制台查看结果');
console.log(arr, '--- 数字结果');
console.log(arr2, '--- 字符串结果');
}//回调
});
</script>

</body>
Expand Down
Loading

0 comments on commit 87d707e

Please sign in to comment.