js日历代码_vant-weapp使用van-calendar日历组件的选择日期区间功能

1.使用npm安装后没有日历组件"van-calendar"，需要用git clone去下载vant-weapp。

git clone https://github.com/youzan/vant-weapp.git

2.在项目根目录下引入vant-weapp下的dist目录(vant-weapp/dist)。例如，如果我的小程序项目名字叫test，那么此时dist目录的路径就是：test/dist。

3.vant-weapp使用日历组件的选择日期区间功能，在vant-weapp官方文档中相应位置复制粘贴该功能的代码到我的项目文件中。例如：

• test.wxml（ 不要忘记引入”van-cell”组件哦 ! ）

<van-cell title="选择日期区间" value="{{ date }}" bind:click="onShow" />
<van-calendar
  show="{{ show }}"
  type="range"
  bind:close="onClose"
  bind:confirm="onConfirm"
/>

• test.js，onConfirm方法需要做一下修改，否则微信开发者工具会报错。

Page

此时，微信开发者工具还是会报两个错误，错误是由于初始化的时候没有数据导致的。

TypeError: Cannot read property '0' of null
    at :38678/appservice/getButtonDisabled
    at :38678/appservice/dist/calendar/calendar.wxml:49
TypeError: Cannot read property '0' of null
    at :38678/appservice/getButtonDisabled
    at :38678/appservice/dist/calendar/calendar.wxml:52

4.解决以上两个报错，打开文件夹test/dist/calendar/calendar.wxml,找到49行，发现 disabled="{{ computed.getButtonDisabled(type, currentDate) }}"，然后在当前项目文件中搜索(就是点击开发者工具左侧的搜索图标)getButtonDisabled，找到了test/dist/calendar/index.wxs中的相应代码

function 

需要判断一下currentDate是否存在，不存在就中断后续的执行，我的修改是：

function 

5.修正确认按钮没有居中显示。

/*1.找到样式文件，格式化代码*/

目前没有报错，欢迎补充说明。

6.挖一个坑。