百度智能小程序 日历

2020-09-03 16:20 更新

calendar 日历

解释: 日历组件,可配置选中日期、日历数据、星期文案,适用于信息输入,并可放置在页面的任何位置。

属性说明

属性名 类型 必填 默认值 说明

value

Object

默认选中日期,value 示例:{day: '2020-06-15', state: 1},详细代码请阅读代码示例

range

Array

日历数据,range 示例:{name: '2020-06', value: [{day: '2020-06-01', state: 1}]},详细代码请阅读代码示例

separation

String

'-'

连接年月日的符号

repeatable

Boolean

false

选中的日期是否可以多次点击

disabled

Boolean

false

是否禁用该组件

allDayValid

Boolean

false

所有日期是否可选

weekText

Array

['日', '一', '二', '三', '四', '五', '六']

星期默认文案

showOptionPanel

Boolean

false

是否展示月份面板

binddayclick

EventHandle

点击日历中的某个日期时触发

bindchange

EventHandle

改变选中的日期时触发

示例 

在开发者工具中打开


代码示例

<view class="wrap">
    <view class="content">
            <view class="comp-wrap">
                <smt-calendar
                    class="calendar"
                    range="{{range}}"
                    value="{{value}}"
                    bind:dayclick="dayClick"
                    showOptionPanel="{{false}}"
                >
                </smt-calendar>
            </view>
        </view>
        <view class="card-panel">
            <view class="comp-wrap">
                <smt-calendar
                    class="calendar"
                    range="{{range}}"
                    value="{{allDayValue}}"
                    bind:dayclick="allDayClick"
                >
                </smt-calendar>
            </view>
        </view>
    </view>
</view>
Page({
    data: {
        range: [
            {
                name: '2020-06',
                value: [
                    {
                        day: '2020-06-01',
                        state: 1
                    },
                    {
                        day: '2020-06-02',
                        state: 1
                    },
                    {
                        day: '2020-06-03',
                        state: 1
                    },
                    {
                        day: '2020-06-04',
                        state: 1
                    },
                    {
                        day: '2020-06-05',
                        state: 1
                    },
                    {
                        day: '2020-06-06',
                        state: 1
                    },
                    {
                        day: '2020-06-07',
                        state: 0
                    },
                    {
                        day: '2020-06-08',
                        state: 0
                    },
                    {
                        day: '2020-06-09',
                        state: 1
                    },
                    {
                        day: '2020-06-10',
                        state: 1
                    },
                    {
                        day: '2020-06-11',
                        state: 1
                    },
                    {
                        day: '2020-06-12',
                        state: 1
                    },
                    {
                        day: '2020-06-13',
                        state: 1
                    },
                    {
                        day: '2020-06-14',
                        state: 0
                    },
                    {
                        day: '2020-06-15',
                        state: 1
                    },
                    {
                        day: '2020-06-16',
                        state: 1
                    },
                    {
                        day: '2020-06-17',
                        state: 1
                    },
                    {
                        day: '2020-06-18',
                        state: 1
                    },
                    {
                        day: '2020-06-19',
                        state: 1
                    },
                    {
                        day: '2020-06-20',
                        state: 1
                    },
                    {
                        day: '2020-06-21',
                        state: 0
                    },
                    {
                        day: '2020-06-22',
                        state: 0
                    },
                    {
                        day: '2020-06-23',
                        state: 1
                    },
                    {
                        day: '2020-06-24',
                        state: 1
                    },
                    {
                        day: '2020-06-25',
                        state: 1
                    },
                    {
                        day: '2020-06-26',
                        state: 1
                    },
                    {
                        day: '2020-06-27',
                        state: 1
                    }
                ]
            },
            {
                name: '2020-07',
                value: [
                    {
                        day: '2020-07-01',
                        state: 0
                    },
                    {
                        day: '2020-07-02',
                        state: 0
                    },
                    {
                        day: '2020-07-03',
                        state: 0
                    },
                    {
                        day: '2020-07-04',
                        state: 0
                    },
                    {
                        day: '2020-07-05',
                        state: 0
                    },
                    {
                        day: '2020-07-06',
                        state: 0
                    },
                    {
                        day: '2020-07-07',
                        state: 0
                    },
                    {
                        day: '2020-07-08',
                        state: 1
                    },
                    {
                        day: '2020-07-09',
                        state: 1
                    },
                    {
                        day: '2020-07-10',
                        state: 1
                    },
                    {
                        day: '2020-07-11',
                        state: 1
                    },
                    {
                        day: '2020-07-12',
                        state: 0
                    },
                    {
                        day: '2020-07-13',
                        state: 0
                    },
                    {
                        day: '2020-07-14',
                        state: 1
                    },
                    {
                        day: '2020-07-15',
                        state: 1
                    },
                    {
                        day: '2020-07-16',
                        state: 1
                    },
                    {
                        day: '2020-07-17',
                        state: 1
                    },
                    {
                        day: '2020-07-18',
                        state: 1
                    },
                    {
                        day: '2020-07-19',
                        state: 0
                    },
                    {
                        day: '2020-07-20',
                        state: 0
                    },
                    {
                        day: '2020-07-21',
                        state: 1
                    },
                    {
                        day: '2020-07-22',
                        state: 1
                    },
                    {
                        day: '2020-07-23',
                        state: 1
                    },
                    {
                        day: '2020-07-24',
                        state: 1
                    },
                    {
                        day: '2020-07-25',
                        state: 1
                    },
                    {
                        day: '2020-07-26',
                        state: 0
                    },
                    {
                        day: '2020-07-27',
                        state: 0
                    },
                    {
                        day: '2020-07-28',
                        state: 1
                    },
                    {
                        day: '2020-07-29',
                        state: 1
                    },
                    {
                        day: '2020-07-30',
                        state: 1
                    },
                    {
                        day: '2020-07-31',
                        state: 1
                    }
                ]
            }
        ],
        value: {day: '2020-06-15', state: 1},
        allDayValue: {day: '2020-07-29', state: 1},
        weekText: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    },

    /**
     * 单月日历点击
     *
     * @param {Object} param 点击事件回调
     * @param {Object} param.value day 状态对象
     */
    dayClick({value}) {
        if (value.state) {
            this.setData({
                value
            });
        }
    },

    /**
     * 全部日历点击
     *
     * @param {Object} param 点击事件回调
     * @param {Object} param.value day 状态对象
     */
    allDayClick({value}) {
        if (value.state) {
            this.setData({
                allDayValue: value
            });
        }
    }
});
.wrap {
    background-color: #f5f5f5;
    height: 100vh;
}

.content {
    padding-top: 0.2rem;
}

.smt-card-area {
    margin-top: 25.36rpx;
    background-color: #fff;
}

.card-panel {
    margin-top: 72.46rpx;
}

.card-panel:first-child {
    margin-top: 0;
}

.card-area {
    display: flex;
    margin: 90.58rpx 0 0;
    padding: 28.382rpx 30.797rpx;
    border: none;
    border-radius: 0;
    transition: background-color 200ms linear;
    align-items: center;
    justify-content: space-between;
}

.comp-wrap {
    background-color: #fff;
    margin-top: 25.362rpx;
    padding: 27.174rpx 0;
}
{
    "navigationBarTitleText": "日历",
    "navigationStyle": "default",
    "usingComponents": {
        "smt-calendar": "@smt-ui/component/src/calendar"
    }
}


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号