更新记录

1.3.0（2019-07-13）

  • 新增 弹出显示模式
  • 新增 标点功能，并携带额外信息 - 新增 多选模式
  • 新增 其他日期与今天高亮区分显示
  • 修复 不显示最后一行的 bug
  • 修复 初始化组件日期显示不对的 bug
  • 优化 性能问题，删除日历滑动
  • 优化 代码整体优化，解决在低版本设备上卡顿的问题

Calendar 日历

日历组件，组件名：uni-calendar，代码块： uCalendar。

调用方式

  1. <view>
  2.     <uni-calendar 
  3.     :insert="true"
  4.     :lunar="true" 
  5.     :disable-before="true" 
  6.     :start-date="'2019-3-2'"
  7.     :end-date="'2019-5-20'"
  8.     @change="change"
  9.      />
  10. </view>
  2. import {uniCalendar} from "@/components/uni-calendar/uni-calendar"
  3. export default {
  4.     components: {
  5.         uniCalendar
  6.     },
  7.     data() {
  8.         return {};
  9.     },
  10.     methods: {
  11.         change(e) {
  12.             console.log(e);
  13.         }
  14.     }
  15. };

属性说明

属性名类型默认值说明
dateString自定义当前时间，默认为今天
lunarBooleanfalse显示农历
disableBeforeBooleanfalse禁用今天之前的日期
startDateString日期选择范围-开始日期
endDateString日期选择范围-结束日期
rangeBooleanfalse范围选择
insertBooleanfalse插入模式,可选值，ture：弹窗模式；false：插入模式 ；默认为插入模式
selectedArray打点，期待格式[{date: '2019-06-27', info: '签到', data: { custom: '自定义信息', name: '自定义消息头',xxx:xxx… }}]

事件说明

事件名类型说明
@changefunction日期改变，insert :ture 时生效
@confirmfunction确认选择 insert :false 时生效

方法说明

在 calendar 组件上定义 ref 属性，通过 ref 属性使用方法。

属性名类型说明
openfunction弹出日历组件，insert :false 时生效，通过 ref 触发

代码示例

  1. <view>
  2.     <uni-calendar 
  3.     ref="calendar"
  4.     :insert="false"
  5.     @confirm="confirm"
  6.      />
  7.      <button @click="open">打开日历</button>
  8. </view>
  2. import {uniCalendar} from "@/components/uni-calendar/uni-calendar"
  3. export default {
  4.     components: {
  5.         uniCalendar
  6.     },
  7.     data() {
  8.         return {};
  9.     },
  10.     methods: {
  11.         open(){
  12.             this.$refs.calendar.open();
  13.         },
  14.         confirm(e) {
  15.             console.log(e);
  16.         }
  17.     }
  18. };

事件返回属性说明

  2. {
  3.     // 范围选择
  4.     "range": {  
  5.         // 范围开始日期
  6.         "begin": "2019-06-25", 
  7.         // 范围结束日期
  8.         "end": "2019-06-27",  
  9.         // 范围日期数组
  10.         "data": [               
  11.             "2019-06-25",       
  12.             "2019-06-26",
  13.             "2019-06-27"
  14.         ]
  15.     },
  16.     // 当前年
  17.     "year": 2019,
  18.     // 当前月
  19.     "month": 6,
  20.     // 当前日
  21.     "date": 27,
  22.     // 农历
  23.     "lunar": {
  24.         // 农历年
  25.         "lYear": 2019,
  26.         // 农历月
  27.         "lMonth": 5,
  28.         // 农历日
  29.         "lDay": 25,
  30.         // 生效
  31.         "Animal": "猪",
  32.         // 农历月
  33.         "IMonthCn": "五月",
  34.         // 农历日
  35.         "IDayCn": "廿五",
  36.         // 公历年
  37.         "cYear": 2019,
  38.         // 公历月
  39.         "cMonth": 6,
  40.         // 公历日
  41.         "cDay": 27,
  42.         "gzYear": "己亥",
  43.         "gzMonth": "庚午",
  44.         "gzDay": "乙未",
  45.         // 是否今天
  46.         "isToday": true,
  47.         "isLeap": false,
  48.         // 周
  49.         "nWeek": 4,
  50.         "ncWeek": "星期四",
  51.         // 是否节气
  52.         "isTerm": false,
  53.         // 节气名
  54.         "Term": null,
  55.         // 星座
  56.         "astro": "巨蟹座"
  57.     },
  58.     //打点信息
  59.     "clockinfo": {
  60.         // 是否打点
  61.         "have": true,
  62.         // 打点日期
  63.         "date": "2019-06-27",
  64.         // 打点描述
  65.         "info": "签到",
  66.         // 额外信息
  67.         "data": {
  68.             "custom": "自定义信息",
  69.             "name": "自定义消息头"
  70.         }
  71.     },
  72.     // 当前完整日期
  73.     "fulldate": "2019-6-27"
  74. }

本组件农历转换使用的js是 @1900-2100区间内的公历、农历互转

Tips:

  • 仅支持自定义组件模式
  • date 传入的应该是一个 String ，如： 2019-06-27 ，而不是 new Date()
  • insert 属性，确定当前的事件是 @change 还是 @confirm 。理应合并为一个事件，但是为了区分模式，现使用两个事件，这里需要注意

更新日志

v1.3.0

  • 新增 弹出显示模式
  • 新增 标点功能，并携带额外信息
  • 新增 多选模式
  • 新增 其他日期与今天高亮区分显示
  • 修复 不显示最后一行的 bug
  • 修复 初始化组件日期显示不对的 bug
  • 优化 性能问题，删除日历滑动
  • 优化 代码整体优化，解决在低版本设备上卡顿的问题

v1.2.0

  • 新增 水平垂直滑动选择月份
  • 新增 当天日期高亮显示
  • 修复 选中当前日期，返回两遍信息的问题
  • 修复 二月份切换月份直接跳到三月份的bug

v1.1.1

  • 修复 小程序不显示农历的问题
  • 修复 小程序不能设置开始日期和结束日期的问题

v1.1.0

  • 新增 是否开启农历选项
  • 新增 是否禁止今天之前的日期
  • 新增 开始日期
  • 新增 结束日期

v1.0.0

  • 新增 基础日历
  • 新增 基础打点功能