• 更新记录
  • 1.3.0（2019-07-13）
    • Calendar 日历
    • 调用方式
    • 属性说明
    • 事件说明
    • 方法说明
    • 事件返回属性说明
    • 更新日志
  • v1.3.0
  • v1.2.0
  • v1.1.1
  • v1.1.0
  • v1.0.0

    更新记录

    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

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