taro-calendar-picker

taro-calendar-picker

taro 时间/日期/周/月 多合一选择工具

npm i -s taro-calendar-picker

然后，引入并使用

import {
  Button,
} from "tea-component-mobile";
import Calendar from "taro-calendar-picker";
import 'taro-calendar-picker/dist/index.css';
import moment from 'moment';

export default () => {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    setInterval(() => {
      // setVisible(Math.round(Math.random()) === 0);
    }, 2000)
  }, [])
  return (
    <Calendar
      // dark="dark" // 主题；默认不设置是白色主体； dark 是黑色主体；
      weekFlag="Sun" // Sun: 星期日开始; Mon: 星期一开始
      data={["Hour", "Day", "Week", "Month", "Year"]} // 时间/日期/周/月
      activeTab="Day" // 默认类型；支持： Hour/Day/Week/Month
      multiple={true} // 是否多选；目前只对 Day/Week/Month 有效
      lastDay={true} //  是否展示(last day Last 7Days Last 30Days) 目前只对day页面有效
      value={[moment(), moment()]} // 已选值 时间/日期/月/周
      visible={visible} // 设置是否展示弹窗：visible 更改会直接影响是否弹窗；visbile不更改时，弹窗可以根据操作展示或者关闭；可以从 onVisibleChange 获取最新的弹窗状态
      onVisibleChange={(visible) => { // 日期插件弹窗与关闭的事件；visible为true表示是弹窗的
        console.log(visible)
      }}
      maskClosable={true} // 遮罩层是否可点击关闭；默认是 true
      isNeedLeastOne={false} //用于控制月、周、日是否开启至少选择一项的功能,默认是false
      defaultVisible={false} // 默认是否弹窗；默认是 false
      mask={true} // 是否展示遮罩层；默认是 true
      disables={() => { // 禁止日期处理 返回两个参数，第一个参数date是日期，第二个参数是type指的是tab标签的类型，有以下几个值：Day Week Month Quarter Year
        return (date, type) => {
          console.log(type)
          return date.isAfter('2021-8-01')
        }
        // return false;
      }}
      open={
        <Button style={{ marginTop: "10px" }}>筛选器</Button>
      }
      onChange={(value, allSelectedValue, type) => { // value: 当前选择值；type：类型，对应 [Hour|Day|Week|Month]；allSelectedValue 所有类型已选中的值
          alert(value)
      }}
      tabChange={(currentTab, preTab) => { // currentTab: 切换之后的tab值;preTab: 切换之前的tab值
         console.log(currrentTab, preTab)
      }}
      singleClose={false} // 单选立即关闭,默认值为false
      multipleClose={true} // 多选立即关闭，默认值为false
      isShowConfirm={true} // confirm按钮是否展示，默认为true
      afterTabChange={()=>{ //tab切换之后，进入到页面中后触发的回调函数
        console.log('afterTabChange')
      }}
       hourMode={false}//自定义选择时间范围:true, 自动选择开始时间是当前选中时间前24小时:false    默认值为false
    />
  )
}

版本更新：

• 2022-01-23
  • 增加关闭按钮
• 2022-01-13
  • 周选择器，周起止时间错误修复
• 2021-12-21
  • 日、周、月取消选择时，至少保留一个时间单位
• 2021-8-25
  • 添加控制confirm按钮是否隐藏功能,参数为isShowConfirm,默认值为true
• 2021-9-1
  • 添加afterChange参数,参数类型为函数，当tabchange完成之后调用的一个回调函数
• 2021-10-14
  • 添加hourMode参数,参数类型为布尔值.自定义选择时间范围:true;自动选择开始时间是当前选中时间前24小时:false;默认值为false
• 2020-11-04
  • hour模块时间展示精确到小时