Narcoleptic's Patch Mangler

    @beisen/time-picker

    0.2.69 • Public • Published

    time-picker 使用说明

    项目运行

    1. cnpm install 或 npm install cnpm使用教程

    2. npm run dev (开发环境打包 port:8080)

    3. npm run test (测试用例)

    4. npm run build (生产环境打包)

    time-picker参数

    const props = {
    
      title: '测试时测试按错撒',
    
      /**
       * 时间的值
       */
      value: '', //
    
      /**
       * 初始默认时间
       * 默认日期的格式需与format格式相同
       */
      defaultValue: '',
    
      /**
       * 没有值的时候显示的内容
       */
      placeholder: '大家好',
    
      /**
       * 展示的时间格式
       * HH:mm:ss
       * HH:mm
       * mm:ss
       */
      format: 'HH:mm',
    
      /**
       * 禁用全部操作
       */
      disabled: false,
      /**
       * 是否隐藏
       */
    
      hidden: false,
    
      /**
       * 是否只读
       */
      readonly: true,
    
      /**
       * 是否必填
       */
      required: true,
    
      open: false,
    
      /**
       * 不可选择的小时范围
       */
      disabledHours: {
    
        /**
         * [开始时间(小时),结束时间(小时)]
         * 范围:0~24
         */
        value: [22, 3],
    
        /**
         * 是否启用该限制规则
         * open  启用限制
         * close 关闭限制
         */
        limit: 'close'
      },
    
      /**
       * 不可选择的分钟范围
       */
      disabledMinutes: {
    
        /**
         * [开始时间(分钟),结束时间(分钟)]
         * 范围:0~60
         */
        value: [
          [13, 18],
          [40, 10]
        ],
    
        /**
         * 是否启用该限制规则
         * open  启用限制
         * close 关闭限制
         */
        limit: 'open'
      },
    
      /**
       * 不可选择的秒范围
       * 配置规范同分钟
       */
      disabledSeconds: {
        value: [0, 30],
        limit: 'close'
      },
    
      /**
       * 外部包围输入框的大小
       * 可选:large  small
       */
      size: '',
    
      /**
       * 隐藏禁止选择的选项
       */
      hideDisabledOptions: false,
    
      /**
       * 显示状态 
       * search或''
       */
      showStatus: '',
    
      /**
       * 是否报错
       */
      errorStatus: false,
    
      /**
       * 报错信息
       */
      errorMsg: '出错了~~~!',
      helpMsg: 'dqwdqwdqw',
    
      /**
       * 控制外层close按钮是否显示
       * 非必需参数
       */
      closeBtn: false,
    
      /**
       * label位置
       * true  左边
       * false 上边
       */
      lablePos: true,
    
      /**
       * label中文字对齐方式
       * true  左对齐
       * false 右对齐
       */
      lableTxt: false,
    
      /**
       * 点击时间后回调
       */
      onChange: function (time, booldata) {
        console.log(time, booldata)
      },
    
      /**
       * 弹层出现回调
       */
      onOpen: function (bool) {
        console.log(bool)
      },
    
      /**
       * 弹层关闭回调
       */
      onClose: function (bool) {
        console.log(bool)
      },
      translation: {
          localeName: 'zh_CN' //多语言参数
      }
    }

    TimePicker调用方法

    1.安装npm组件包

    npm install @beisen/time-picker --save-dev
    

    2.引用组件

    import TimePicker from "@beisen/time-picker"
    1. 传入参数

    该参数为上述参数,传入方式使用:

    render () {
        return (
          <TimePicker {...this.state} />
        )
      }

    Install

    npm i @beisen/time-picker

    DownloadsWeekly Downloads

    16

    Version

    0.2.69

    License

    ISC

    Unpacked Size

    3.62 MB

    Total Files

    102

    Last publish

    Collaborators

    • beisencorp