日历

加载中...

实现原理

在表格上绑定双层嵌套数组(数组操作中介绍的是三层嵌套数组)。

涉及知识点: 数组绑定 数组操作 文本内容绑定

Step by Step

1. 插入2行7列的表格,宽度设为100%,第一行设为表头,第一行填入数据如下图,第二行只保留第一个单元格。

2. 在tbody标签上进行数组绑定,绑定参数:monthdate;绑定变量初始化:

变量初始化中数据结构为双层嵌套数组,即数据最外层为数组,数组内的每一项也是数组。monthdate为外层数组名,代表是哪个月份;weekdate为外层数组内的每一项数组名,代表一个月内的第几周;date代表具体日期;disabled代表不是当月的日期样式,值为1表示不是当月日期,值为0表示是当月日期。

{"monthdate":[{"weekdate":[{"date":26,"disabled":1},{"date":27,"disabled":1},{"date":28,"disabled":1},{"date":29,"disabled":1},{"date":30,"disabled":1},{"date":31,"disabled":1},{"date":1,"disabled":0}]},{"weekdate":[{"date":2,"disabled":0},{"date":3,"disabled":0},{"date":4,"disabled":0},{"date":5,"disabled":0},{"date":6,"disabled":0},{"date":7,"disabled":0},{"date":8,"disabled":0}]},{"weekdate":[{"date":9,"disabled":0},{"date":10,"disabled":0},{"date":11,"disabled":0},{"date":12,"disabled":0},{"date":13,"disabled":0},{"date":14,"disabled":0},{"date":15,"disabled":0}]},{"weekdate":[{"date":16,"disabled":0},{"date":17,"disabled":0},{"date":18,"disabled":0},{"date":19,"disabled":0},{"date":20,"disabled":0},{"date":21,"disabled":0},{"date":22,"disabled":0}]},{"weekdate":[{"date":23,"disabled":0},{"date":24,"disabled":0},{"date":25,"disabled":0},{"date":26,"disabled":0},{"date":27,"disabled":0},{"date":28,"disabled":0},{"date":29,"disabled":0}]},{"weekdate":[{"date":30,"disabled":0},{"date":1,"disabled":1},{"date":2,"disabled":1},{"date":3,"disabled":1},{"date":4,"disabled":1},{"date":5,"disabled":1},{"date":6,"disabled":1}]}]}

3. 在单元格“日”下面单元格的tr标签上进行数组绑定,绑定参数:weekdate。

4. 在单元格“日”下面单元格中插入span标签,在span标签上进行文本内容绑定,绑定参数:date。

在span标签上进行CSS类绑定,绑定参数:{"disable":disabled},diable表示不是当月的日期样式类名称。

在样式类文件中添加如下样式类:

.disable{
  color:#c3baba;
}

5. 操作步骤演示

注意事项

如果日历中还需要显示其它数据,那么需要在单元格中加入相应的内容,再对加入的内容进行文本内容绑定,数据初始化时需像date一样添加数据。