- User-defined units. You can set year and month or month, date, hour and minute.
- User-defined time ranges. You can set anytime with the precision of a minute
- For example, you can set begin time at Dec -27(th), 2011 102:12 and end time at Oct 21(st), 2020 20:20
- You also can use NPM.
- Open the demo on the mobile
npm i mob-date-selector --save-dev
webpack.config.js:
var path = require('path');
module.exports = {
entry : {...},
output : {...},
module : {
loaders :[{
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.js$/,
exclude: path.resolve('./node_modules'),
loader: 'babel',
}]
}
}html：
<body>
<!-- the #date-selector-input can be any other dom for your convenient-->
<input id="date-selector-input" type="text" readonly/>
<!-- the #targetContainer must be the outermost dom below body -->
<div id="targetContainer"></div>
</body>js：
import DateSelector from 'mob-date-selector';
new DateSelector({ ... });sass: DateSelector/DateSelector.scss
css: DateSelector/DateSelector.css
js: DateSelector/DateSelector.js
html：
<link rel="stylesheet" type="text/css" href="./DateSelector.css"/>
<body>
<!-- the #date-selector-input can be any other dom for your convenient-->
<input id="date-selector-input" type="text" readonly/>
<!-- the #targetContainer must be the outermost dom below body -->
<div id="targetContainer"></div>
</body>js：
<script src="./DateSelector.js"></script>
<script>
new DateSelector({ ... });
</script>Parameter List：
| Attributes | Type | Value | Details |
|---|---|---|---|
| input | {String} | eg:'date-selector-input' | the id of the dom you touch. |
| container | {String} | eg:'targetContainers' | the id of the container you ready to append dom. |
| type | {Number} | 0 OR 1 | 0: fixed style with tab; 1: free style without tab. |
| param | {Array} | eg:[0, 1, 1, 1, 1] | user-defined units, every position means ['year', 'month', 'day', 'hour', 'minute']. 1 means you need the unit，0 means you dont need it. There must be serial 1. |
| beginTime | {Array} | eg:[3,27,12,12] Mar 27(th) 12:12 default : [1970, 1, 1, 0, 0] |
user-defined begin time points. An empty array means default array. The equivalent of every position is the sequent position of 1 in param. |
| endTime | {Array} | the same to beginTime default : [nextYear, 12, 31, 23, 59] |
user-defined end time points. An empty array means default array. The equivalent of every position is the sequent position of 1 in param. |
| recentTime | {Array} | the same to beginTime | user-defined recent time points. An empty array means NOW. The equivalent of every position is the sequent position of 1 in param. |
| success | {function} | function(arr1, arr2){alert(arr1)} | function(arr){} User-defined callback. The first param is the result. The arr1 is an array of Number, and the other is an array of String. |
- type = 0，this type can set unit freely, and the style without tab.
- type = 1 this type was made up by year, month, date, hour and minute. And the style is fixed.
- If you want to define the JSON by yourself, you can go to see MultiPicker.
- For questions and issues please use THIS WAY
- I am Appian.
【时间单位】自定义组合, 无论是年月日还是时分都能随心所欲的排列组合
【时间范围】自定义设置, 自定义的时间可以精确到分钟，并尽可能的进行数据合法性校正
例如可以设置【2011年13月(-27)日 102时12分 ~ 2020年10月21日 20时20分】的效果
你也可以使用 NPM.
npm i mob-date-selector --save-dev
webpack.config.js:
var path = require('path');
module.exports = {
entry : {...},
output : {...},
module : {
loaders :[{
test: /\.css$/,
loader: 'style!css'
}, {
test: /\.js$/,
exclude: path.resolve('./node_modules'),
loader: 'babel',
}]
}
}html：
<body>
<!-- #date-selector-input 可以是任意的dom, 只要你方便展示 -->
<input id="date-selector-input" type="text" readonly/>
<!-- #targetContainer 最好是位于body下的最外层的dom -->
<div id="targetContainer"></div>
</body>js：
import DateSelector from 'mob-date-selector';
new DateSelector({ ... });sass文件:引用DateSelector/DateSelector.scss
css文件:引用DateSelector/DateSelector.css
js文件:引用DateSelector/DateSelector.js
html的基本格式：
<link rel="stylesheet" type="text/css" href="./DateSelector.css"/>
<body>
<!-- #date-selector-input 可以是任意的dom, 只要你方便展示 -->
<input id="date-selector-input" type="text" readonly/>
<!-- #targetContainer 最好是位于body下的最外层的dom -->
<div id="targetContainer"></div>
</body>调用js的基本格式：
<script src="./DateSelector.js"></script>
<script>
new DateSelector({ ... });
</script>参数配置：
| 参数 | 字符类型 | 取值 | 说明 |
|---|---|---|---|
| input | {String} | eg:'date-selector-input' | 点击触发插件的input框的id |
| container | {String} | eg:'targetContainers' | 插件即将插入的容器id |
| type | {Number} | 0 或 1 | 0为自定义插件的日期单位(不带tab切换)，1为固定插件的日期单位为【年月日】【时分】(带tab切换) |
| param | {Array} | eg:[0, 1, 1, 1, 1] | 设置单位，元素分别对应设置['year','month','day','hour','minute'],1为需要，0为不需要,需要为连续的1 |
| beginTime | {Array} | eg:[3,27,12,12] 3月27日12点12分 | 设置开始时间点,空数组默认设置成1970年1月1日0时0分开始，数组的值对应param参数的对应值。 |
| endTime | {Array} | 同beginTime | 设置结束时间点,空数组默认设置成次年12月31日23时59分结束，数组的值对应param参数的对应值。 |
| recentTime | {Array} | 同beginTime | 设置当前时间点,空数组默认设置为系统当前时间，数组的值对应param参数的对应值。 |
| success | {function} | function(arr1, arr2){alert(arr2)} | function(arr){} 回调函数，可以自定义结果格式化, arr1为数字结果, arr2为字符串结果 |
-
type = 0 自定义单位，【年月日时分】的自定义任意组合
-
type = 1 带tab切换，固定单位【年月日时分】的固定样式
-
配色可以改吗?样式可以修改吗?
这个插件主要实现的是逻辑方便的功能，所以在样式上是很开放的，甚至你可以审查元素到你想修改的dom上，直接覆盖样式。样式问题根据你的需要，实时修改即可。
如果你使用的是rem或flexible，可以用sass版本的样式。
如果你使用的是px，可以使用css版本的样式。
-
这个插件能配合Vue，React，Angluar 或者 jQuery 吗？
这是一个原生插件，能够配合任何框架使用。同时，插件支持多个实例，可放心使用。
-
触发弹窗的dom一定要是input吗？
在文档中明确指出，触发弹层的dom可以是任意的dom。并建议弹层的容器，是body的第一级子元素。
demo中使用了input disabled只是为了返回值可以通过设置value返回，演示方便。input readonly可能存在一些兼容问题.
开发者可以使用任意dom，将回调的返回值innerHTML或者双向绑定等。这里不再赘述。
带有加速度的滑动 (•‿•)
能够动态设置任意开始和结束【时!间!点!】 (•‿•)
是的,你可以设置任何尴尬的时间了~ 比如:【2016-11-11 11:11 ~ 2016-12-12 12:12】
能够任意设置时间单位的组合 (•‿•)
"年月日" OR "月日时分" OR "年月日时分"
能够切换固定样式和自定义样式,简化参数 (•‿•)
能利用我的模型处理更多、更自由的联动 (•‿•)
比如城市多级联动，请移步自定义json选择器 - MultiPicker.
样式主题可能和你的产品风格不符，可以通过更改sass中的全局变量来解决问题 >.<
如果遇到什么神bug,不要着急。这时候,请对我发起issue~ 一定让您满意！
我是嘉宝Appian，一个卖萌出家的算法妹纸。