UICalendar

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

插件概述

UICalendar 是一个日历选择插件;可自定义日历的样式,添加特殊日期标注,切换月份,设置指定日期;用于实现常用的日期选择,日历展示功能。UICalendar 插件是 calendar 插件的优化版。

注:针对单日的样式优先级序列为:

selected>setSpecialDate>specialDate>styles_specialDate>today

插件截图:

图片说明

***该插件源码已开源,地址

实例widget下载地址

插件接口

open

打开日历

open({params}, callback(ret))

params

multipleSelect:

  • 类型:布尔类型
  • 描述:(可选项)是否可以多选日期
  • 默认值:false

rect:

  • 类型:JSON 对象
  • 描述:(可选项)插件的位置及尺寸
  • 内部字段:
{
    x: 0,   //(可选项)数字类型;插件左上角的 x 坐标(相对于所属的 Window 或 Frame);默认:0
    y: 0,   //(可选项)数字类型;插件左上角的 y 坐标(相对于所属的 Window 或 Frame);默认:0
    w: 320, //(可选项)数字类型;仅iOS支持设置'auto';插件的宽度;默认:所属的 Window 或 Frame 的宽度
    h: 220  //(可选项)数字类型;仅iOS支持设置'auto';插件的高度;默认:220
}

styles:

  • 类型:JSON 对象
  • 描述:(可选项)插件各部分的样式
  • 内部字段:
{
    bg: 'rgba(0,0,0,0)',            //(可选项)字符串类型;日历整体背景,支持 rgb、rgba、#、图片路径,要求本地路径(fs://、widget://);默认:'rgba(0,0,0,0)'
    week: {                         //(可选项)JSON对象,星期的样式
        weekdayColor: '#3b3b3b',    //(可选项)字符串类型;平日文字的颜色,支持 rgb、rgba、#;默认:'#3b3b3b'
        weekendColor: '#a8d400',    //(可选项)字符串类型;周末文字的颜色,支持 rgb、rgba、#;默认:'#a8d400'
        size: 24                    //(可选项)数字类型;星期文字的大小;默认:24
    },
    date: {                         //(可选项)JSON对象,普通日期的样式
        color: '#3b3b3b',           //(可选项)字符串类型;普通日期文字的颜色;支持 rgb、rgba、#;默认:'#3b3b3b'
        selectedColor: '#fff',      //(可选项)字符串类型;普通日期选中后的文字颜色,支持 rgb、rgba、#;默认:'#fff'
        selectedBg: '#a8d500',      //(可选项)字符串类型;普通日期选中后的背景,支持 rgb、rgba、#,图片路径,要求本地路径(fs://、widget://);默认:'#a8d500'
        size: 24                    //(可选项)数字类型;普通日期文字的大小;默认:24
    },
    today: {                        //(可选项)JSON对象,设备当前日期的样式
        color: '#a8d500',           //(可选项)字符串类型;当前日期的文字颜色,支持 rgb、rgba、#;默认:'#a8d500'
        bg: 'widget://'             //(可选项)字符串类型;当前日期的背景,支持 rgb、rgba、#,图片路径,要求本地路径(fs://、widget://)
    },
    specialDate: {                  //(可选项)JSON对象,需要标记的特殊日期的通用样式                  
        color: '#3b3b3b',           //(可选项)字符串类型;文字颜色,支持 rgb、rgba、#;默认:与普通日期文字颜色一致
        bg: 'widget://'             //(可选项)字符串类型;支持 rgb、rgba、#,图片路径,要求本地路径(fs://、widget://);默认:与普通日期选中后的背景一致
    }
}

specialDate:

  • 类型:数组
  • 描述:(可选项)需要标记的特殊日期数组
  • 内部字段:
[{
    date: '2015-07-27'          //字符串类型;日期字符串,格式为:yyyy-MM-dd
    color: '#3b3b3b',           //(可选项)字符串类型;文字颜色,支持 rgb、rgba、#;默认:与 styles->specialDate->color 一致
    bg: 'widget://'             //(可选项)字符串类型;支持 rgb、rgba、#,图片路径,要求本地路径(fs://、widget://);默认:与 styles->specialDate->bg 一致
}]

switchMode:

  • 类型:字符串
  • 描述:(可选项)月份的切换方式
  • 默认值:'vertical'
  • 取值范围:
    • vertical(上下切换)
    • horizontal(左右切换)
    • none(不支持通过手势切换月份)

isBefore:

  • 类型:布尔
  • 描述:(可选项)今天以前的日期是否置灰不可选
  • 默认值:false

isAfter:

  • 类型:布尔
  • 描述:(可选项)今天以后的日期是否置灰不可选
  • 默认值:false

showTodayStyle:

  • 类型:布尔
  • 描述:(可选项)当天日期是否使用特殊格式显示(仅android有效)
  • 默认值:true

canScroll:

  • 类型:布尔
  • 描述:是否可以滚动 (注意:只有在switchMode为none 并且改参数为true时可以滚动)
  • 默认:false

fixedOn:

  • 类型:字符串类型
  • 描述:(可选项)插件视图添加到指定 frame 的名字(只指 frame,传 window 无效)
  • 默认:插件依附于当前 window

fixed:

  • 类型:布尔
  • 描述:(可选项)插件是否随所属 window 或 frame 滚动
  • 默认值:true(不随之滚动)

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    eventType: 'show',          //字符串类型;交互事件类型
                                //取值范围:
                                //show(日历显示)
                                //switch(水平或垂直切换月份)
                                //special(点击特殊日期)
                                //normal(点击普通日期)
                                //cancelNormal(取消点击普通日期)
                                //cancelSpecial(取消点击特殊日期)
                                                                                                
    year: 2015,                 //数字类型;当前选择的年份
    month: 7,                   //数字类型;当前选择的月份
    day: 27,                     //数字类型;当前选择的日期
    id:0                      //数字类型,打开日历视图的ID
}

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.open({
    rect: {
        x: 30,
        y: api.frameHeight / 2 - 170,
        w: api.frameWidth - 60,
        h: 340
    },
    styles: {
        bg: 'rgba(0,0,0,0)',
        week: {
            weekdayColor: '#3b3b3b',
            weekendColor: '#a8d400',
            size: 12
        },
        date: {
            color: '#3b3b3b',
            selectedColor: '#fff',
            selectedBg: '#a8d500',
            size: 12
        },
        today: {
            color: 'rgb(230,46,37)',
            bg: ''
        },
        specialDate: {
            color: '#a8d500',
            bg: 'widget://image/a.png'
        }
    },
    specialDate: [{
        date: '2015-06-01'
    }],
    switchMode: 'vertical',
    fixedOn: api.frameName,
    fixed: false
}, function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setSpecialDates

设置特殊日期

setSpecialDates({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

specialDates:

  • 类型:数组
  • 描述:需要标记的特殊日期数组,格式为:yyyy-MM-dd
  • 内部字段:
[{
    date: '2015-07-27'          //字符串类型;日期字符串,格式为:yyyy-MM-dd
    color: '#3b3b3b',           //(可选项)字符串类型;文字颜色,支持 rgb、rgba、#;默认:与 styles->specialDate->color 一致
    bg: 'widget://'             //(可选项)字符串类型;支持 rgb、rgba、#,图片路径,要求本地路径(fs://、widget://);默认:与 styles->specialDate->bg 一致
}]

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.setSpecialDates({
    id: ,
    specialDates: [{
        date: '2015-12-07',
        color: '#abckde',
        bg: '#ff0000'
    }, {
        date: '2015-12-08',
        color: '#abckde',
        bg: '#ff0000'
    }]
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

cancelSpecialDates

取消已设置的特殊日期状态

cancelSpecialDates({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

specialDates:

  • 类型:数组
  • 描述:需要取消的特殊日期组成的数组,格式为:yyyy-MM-dd

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.cancelSpecialDates({
    specialDates: ['2015-12-08', '2015-12-07']
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

close

关闭日历

close({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.close({id:0});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

show

显示日历

show({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.show({id:0});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

hide

隐藏日历

hide({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.hide({id:0});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

nextMonth

显示下个月

nextMonth({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    year: '2015',          //数字类型;当前显示的年份
    month: '8'             //数字类型;当前显示的月份
}

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.nextMonth({
  id:0
},function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

prevMonth

显示上个月

prevMonth({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    year: '2015',          //数字类型;当前显示的年份
    month: '6'             //数字类型;当前显示的月份
}

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.prevMonth({
  id:0
},function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

nextYear

显示下一年

nextYear({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    year: '2016',          //数字类型;当前显示的年份
    month: '6'             //数字类型;当前显示的月份
}

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.nextYear({
 id:0
},function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

prevYear

显示上一年

prevYear({params},callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

callback(ret, err)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    year: '2014',          //数字类型;当前显示的年份
    month: '6'             //数字类型;当前显示的月份
}

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.prevYear({
 id:0
},function(ret, err) {
    if (ret) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

setDate

设置选中日期(不支持日期多选模式)

setDate({params}, callback(ret))

params

id:

  • 类型:数字类型
  • 描述:日历视图id

date:

  • 类型:字符串
  • 描述:(可选项)选中日期,格式为:yyyy-MM-dd
  • 默认值:当前日期

ignoreSelected:

  • 类型:布尔
  • 描述:(可选项)选中日期是否忽略选中日期样式(open -> styles -> date -> selectedColor、selectedBg)
  • 默认值:false

callback(ret)

ret:

  • 类型:JSON 对象
  • 内部字段:
{
    status: true        //布尔型;true||false
}

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.setDate({
    date: '2015-08-08',
    ignoreSelected: false,
    id:0
}, function(ret, err) {
    if (ret.status) {
        api.alert({msg: JSON.stringify(ret)});
    } else {
        api.alert({msg: JSON.stringify(err)});
    }
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

turnPage

翻到指定的页

turnPage({params})

params

id:

  • 类型:数字类型
  • 描述:日历视图id

date:

  • 类型:字符串
  • 描述:选中日期,格式为:yyyy-MM

示例代码

var UICalendar = api.require('UICalendar');
UICalendar.turnPage({
    date: '2015-08'
});

可用性

iOS系统,Android系统

可提供的1.0.0及更高版本

论坛示例

为帮助用户更好更快的使用插件,论坛维护了一个示例,示例中包含示例代码、知识点讲解、注意事项等,供您参考。

是否仍需要帮助? 请保持联络!
最后更新于 2024/10/10