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.挖一个坑。