2.2.2 • Published 5 years ago

hg-datepicker v2.2.2

Weekly downloads
34
License
MIT
Repository
github
Last release
5 years ago

hg-datepicker

移动端的日期选择器,支持多种类型的日期选择。具有很好的适应性,可以在任何前端框架中使用。

这里是 2.x 的文档,1.x 文档请点击这里

Demo

点击这里跳转到演示页面,请在移动端打开或者使用浏览器移动端调试工具打开。

Install

  • yarn 下载:yarn add hg-datepicker
  • npm 下载:npm install --save hg-datepicker
  • CND 地址:
    • js:https://unpkg.com/hg-datepicker/dist/hg-datepicker.js
    • css:https://unpkg.com/hg-datepicker/picker.css

Usage

在 vue 等框架中使用

<template>
  <div @click="select">选择年月</div>
</template>
<script>
  import "hg-datepicker/picker.css";
  import DatePicker from "hg-datepicker";

  export default {
    data() {
      return {
        picker: null
      };
    },
    methods: {
      select() {
        this.picker.show()
      }
    },
    mounted () {
      this.picker = new DatePicker({
        type: 'month', // 选择器类型
        start: [2020, 2], // 开始时间
        end: [2120, 4], // 结束时间
        hasSuffix: 'no', // 不添加时间单位
        onOk: function (arr) {
          console.log(arr)
        }
      })
    },
    beforeDestroy() {
      if (this.picker) {
        this.picker.destroy()
        this.picker = null
      }
    }
  }
</script>

组件销毁时需要销毁 DatePicker 实例,防止内存溢出

在传统页面中使用

<head>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://unpkg.com/hg-datepicker/picker.css"
  />
  <script src="https://unpkg.com/hg-datepicker/dist/hg-datepicker.js"></script>
</head>
<body>
  <div onclick="select(1)" id="date-input1">选择年月日</div>
  <script>
    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
      }
    });
    window.select = function (number) {
      picker.set({
          pickerNumber: number,
          title: `${number}号选择器`
      })
      picker.show()
    }
  </script>
</body>

调用实例方法 show 呼起选择器,完整案例见这里

配置项

configuration是一个配置项的对象,可以接受如下选项:

keyvaluedescription
onOkFuntion确定后的回调函数,第一个参数为表示时间的数组,如2002,2,2表示 2002 年 2 月 2 号,必填
cancelFuntion点击取消按钮或者背景后的回调函数,选填
typetime/dateTime/date/month日期选择器的类型,time(分时),dateTime(年月日时分),month(年月),默认 date(年月日)
startArray\<Number>规定选择范围的开始时间,默认四年前
endArray\<Number>规定选择范围的结束时间,默认四年后
initValueArray\<Number>规定初始显示的时间,默认当前时间
titleString选择器标题,默认为空
sureTextString确定按钮文本,默认为“确定”
cancelTextString取消按钮文本,默认为“取消”
hasSuffixyes/no是否添加时间单位,默认 yes
hasZeroyes/no一位数前是否加零,默认 yes
aNumber惯性滚动加速度(正数, 单位 px/(ms * ms)),规定滚动阻力,加速度越小缓冲距离越长,默认 0.001
styleObject包含样式配置的对象

style对象可以接受如下选项(以下配置项若仍无法满足需求,可自行修改并引入picker.css):

keyvaluedescription
liHeightNumber每一个选择栏的高度(px),默认 40
btnHeightNumber按钮栏的高度(px),默认 44
btnOffsetString按钮离边框的距离,默认 20px
titleColorString选择器标题的字体颜色
okColorString选择器确定按钮的字体颜色
cancelColorString选择器取消按钮的字体颜色
btnBgColorString选择器按钮栏的背景颜色
contentColorString选择器选择区域的文字颜色
contentBgColorString选择器选择区域的背景颜色
upShadowColorString选择器顶部朦层颜色
downShadowColorString选择器底部朦层颜色
lineColorString选择器分隔线颜色

实例方法

functionparamdescription
show()--呼起选择框
hide()--关闭选择框
set(obj)obj:Object设置选择器属性
get(key)key:String获取选择框属性
destroy()--销毁选择器

当 key 为titlecancelTextokTextaonOkonCancel时,视为设置/获取对应的选择器配置。当 key 为value时,视为设置/获取选择器的值。其实情况视为自定义的参数。

picker.set({value: 1992, 3}) 可用于实现动态地设置呼起选择器时初始显示的时间

Change Log

2020.3.19

v2.2.2 实现选择器销毁的实例方法

2020.3.17

v2.1.0 实现设置选择器值的实例方法

2020.3.16

v2.0.2 支持年月选择

2019.6.29

v2.0.0 使用 ES6 重构项目 & 添加实例方法 set、get

2.2.2

5 years ago

2.2.1

5 years ago

2.2.0

5 years ago

2.1.0

5 years ago

2.0.2

5 years ago

2.0.1

6 years ago

2.0.0

6 years ago

1.3.4

6 years ago

1.3.3

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.3

7 years ago

1.2.2

7 years ago

1.2.1

7 years ago

1.2.0

7 years ago

1.1.0

7 years ago

1.0.0

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.17

7 years ago

0.1.16

7 years ago

0.1.15

7 years ago

0.1.14

7 years ago

0.1.13

8 years ago

0.1.12

8 years ago

0.1.11

8 years ago

0.1.10

8 years ago

0.1.9

8 years ago

0.1.8

8 years ago

0.1.7

8 years ago

0.1.6

8 years ago