评论

DatePicker 年月日时分秒 任你选

微信上的时间选择,有的时候你会发现,你不能同时选择日期和时间,而且时间不能选到秒。DatePicker让你想选什么选什么.......

DatePicker

微信上的时间选择,有的时候你会发现,你不能同时选择日期和时间,而且时间不能选到秒。DatePicker让你想选什么选什么…

Mode

DatePicker分为四个mode:YMDhms(年月日时分秒)、YMD(年月日)、MD(月日)、hm(时分)。
我自己觉得用起来很爽快。

效果图

  • mode:YMDhms (年月日时分秒)

  • mode:YMD(年月日)

  • mode:MD (月日)

  • mode:hm (时分)

gitHub地址

点赞 6
收藏
评论

12 个评论

  • 王珂
    王珂
    2019-05-11

    非常棒的组件,谢谢楼主的分享!~

    2019-05-11
    赞同 1
    回复 1
  • 十.白白🦄
    十.白白🦄
    05-25

    这个组件哪里找啊

    05-25
    赞同
    回复
  • 竹攸筱
    竹攸筱
    2019-07-29

    楼主,请问有选择 ‘年月 日周 时分’ 这种格式吗?

    2019-07-29
    赞同
    回复
  • 对不起,我瘦不了😂 😂
    对不起,我瘦不了😂 😂
    2019-07-12

    建议楼主看一下  一个页面存在两个相同的 日期时间  那么第一个选择后  第二个 不选择直接点击确定  选择的不是自己传进去的  而是第一个选择的   两个插件会相互影响

    2019-07-12
    赞同
    回复
  • 对不起,我瘦不了😂 😂
    对不起,我瘦不了😂 😂
    2019-07-12
    <view class='form-list-item' bindtap='onYMDhm' data-name="aaa" data-value="{{yMDhm}}">
      <view class='form-item-name'>模式(YMDhm)</view>
      <text class='form-item-content color-desc'>{{yMDhm}}</text>
      <image class='form-left-arrow' mode='aspectFit' src='/images/left_icon.png'></image>
    </view>
    <view class='form-list-item' bindtap='onYMDhmss' data-name="bbb" data-value="{{yMDhm1}}">
      <view class='form-item-name'>模式(YMDhm1)</view>
      <text class='form-item-content color-desc'>{{yMDhm1}}</text>
      <image class='form-left-arrow' mode='aspectFit' src='/images/left_icon.png'></image>
    </view>
     
     
    <date-picker bind:datePickerCancellEvent="datePickerCancellEvent" bind:datePickerOkEvent="datePickerOkEvent" isShowDatePicker="{{isShowPicker}}" mode="{{mode}}" data="{{data}}" date="{{date}}">
     
    </date-picker>
     
    <date-picker bind:datePickerCancellEvent="datePickerCancellEvents" bind:datePickerOkEvent="datePickerOkEvents" isShowDatePicker="{{isShowPickers}}" mode="{{modes}}" data="{{datas}}" date="{{dates}}">
     
    </date-picker>
     
    showPicker: function(e) {
     
        this.setData({
          isShowPicker: true
        })
      },
      showPickers: function (e) {
     
        this.setData({
          isShowPickers: true
        })
      },
     
      datePickerCancellEvent: function(e) {
        this.setData({
          isShowPicker: false
        })
        console.log(e)
      },
      datePickerCancellEvents: function (e) {
        this.setData({
          isShowPickers: false
        })
        console.log(e)
      },
      datePickerOkEvent: function(e) {
        this.setData({
          isShowPicker: false
        })
        let mode = e.detail.data.type;
        let date = e.detail.date;
        console.log(date)
        switch (mode){
     
          case "YMDhm":
            {
              console.log(dateUtils.formatLongTime(date, "Y-M-D h:m"))
              this.setData({
                yMDhm: dateUtils.formatLongTime(date, "Y-M-D h:m")
              })
               
     
              break;
            }
          
          
        }
     
     
      },
      datePickerOkEvents: function (e) {
        console.log(e)
        this.setData({
          isShowPickers: false
        })
        let mode = e.detail.data.type;
        let date = e.detail.date;
        console.log(date)
        switch (mode) {
     
          
          case "YMDhm":
            {
              console.log(dateUtils.formatLongTime(date, "Y-M-D h:m"))
              this.setData({
                yMDhm1: dateUtils.formatLongTime(date, "Y-M-D h:m")
              })
     
              break;
            }
          
        }
     
     
      },


    2019-07-12
    赞同
    回复
  • 对不起,我瘦不了😂 😂
    对不起,我瘦不了😂 😂
    2019-07-11

    你好 非常感谢楼主的分享  还有 一些问题想请教楼主  就是 一个页面如果有两个时间  一个是开始  一个是结束  我每次点击都会判断 点击的是开始或者结束  并且判断有没有时间  如果有时间  那么打开后默认显示我传过去的时间  如果没有时间  就显示当前时间  但是我发现传入的时间好像并不能每次打开时更改  只有在data里的传的初始时间才会更改 之后修改data里的date  没有效果


    2019-07-11
    赞同
    回复 6
    查看更多(1)
  • 昵称加载中...
    昵称加载中...
    2019-05-14

    可以限制只能选择某一段时间内的日期吗,比如选择5月1号到5月30这期间的日期

    2019-05-14
    赞同
    回复 1
    • 梦随兴飞
      梦随兴飞
      2019-05-15

      这两天项目忙,等有时间在加上

      2019-05-15
      回复
  • RuiLin
    RuiLin
    2019-05-14

    你好,可以选择年月日 时分嘛?项目精确到分就可以

    2019-05-14
    赞同
    回复 2
    • 梦随兴飞
      梦随兴飞
      2019-05-14

      你重新试试,加上了

      2019-05-14
      1
      回复
    • RuiLin
      RuiLin
      2019-05-14

      刚在作者项目基础上给加上,还想着给你推送一波,挣个表现分,哈哈,在现有基础上很好扩展哈,厉害

      2019-05-14
      回复
  • 青青
    青青
    2019-05-13

    感谢分享,已收藏

    2019-05-13
    赞同
    回复
  • x_Qiang
    x_Qiang
    2019-05-12

    nice👍

    2019-05-12
    赞同
    回复

正在加载...

登录 后发表内容