后浪云百度小程序教程：calendar 日历

2021-11-28

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>

作者：后浪云

链接：https://www.idc.net/help/185987/

文章版权归作者所有，未经允许请勿转载。

THE END