calendar 日历
- 属性说明
- 示例
  - 代码示例

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		否	改变选中的日期时触发

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例

SWAN
JS
CSS
JSON

<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>