5分钟解决！Layui Laydate日期选择器显示星期几的3种实用方案

在日常开发中，用户常常需要在日期选择器中直观看到星期信息，比如排班系统、日程管理工具等场景。默认情况下，Layui的Laydate组件（日期与时间选择器）并不直接显示星期几，本文将通过3种简单方案，教你如何快速实现这一需求，让日期选择体验更友好。

方案一：利用format属性直接格式化（推荐）

Laydate组件提供了format属性，支持自定义日期显示格式。通过结合JavaScript的日期对象方法，我们可以轻松添加星期信息。

实现步骤：

1. 在渲染Laydate时，设置format属性为包含星期的格式
2. 使用done回调函数处理日期对象，获取星期信息

代码示例：

<input type="text" id="test-laydate" class="layui-input">

<script>
layui.use(function(){
  var laydate = layui.laydate;
  
  laydate.render({
    elem: '#test-laydate',
    format: 'yyyy-MM-dd 星期N', // 格式中添加"星期N"
    done: function(value, date){
      // date参数包含年、月、日、星期等信息
      console.log('选中日期的星期数：', date.week); // 0-6，0代表周日
    }
  });
});
</script>

关键代码解析：

• format: 'yyyy-MM-dd 星期N'：定义日期显示格式，其中星期N会被自动替换为实际星期
• date.week：在done回调中，可通过date对象获取星期信息（0=周日，1=周一，...，6=周六）

官方文档中关于format属性的详细说明：docs/laydate/detail/options.md

方案二：使用formatToDisplay自定义显示（灵活度高）

对于Layui 2.9.9+版本，新增了formatToDisplay属性，允许单独定义显示格式，不影响实际提交的值。

实现步骤：

1. 设置format属性为实际提交的格式（如'yyyy-MM-dd'）
2. 通过formatToDisplay函数处理显示内容，添加星期信息

代码示例：

laydate.render({
  elem: '#test-laydate',
  format: 'yyyy-MM-dd', // 实际提交的格式
  formatToDisplay: function(value){
    // value为选中的日期字符串，如"2023-10-01"
    var date = new Date(value);
    var weeks = ['日', '一', '二', '三', '四', '五', '六'];
    var weekStr = ' 星期' + weeks[date.getDay()];
    return value + weekStr; // 返回带星期的显示值
  }
});

优势：

• 显示格式与提交格式分离，不影响后端数据处理
• 可自定义星期显示方式，如"周一"或"Monday"

官方文档中关于formatToDisplay的说明：docs/laydate/detail/options.md

方案三：使用cellRender自定义单元格（高级定制）

如果需要在日期面板中直接显示星期，而不仅仅是输入框中，可以使用cellRender属性自定义日期单元格的显示内容。

实现步骤：

1. 设置cellRender回调函数
2. 在函数中处理日期单元格，添加星期信息

代码示例：

laydate.render({
  elem: '#test-laydate',
  cellRender: function(ymd, render, info){
    // 只在日期面板中显示
    if(info.type === 'date'){
      var date = new Date(ymd.year, ymd.month - 1, ymd.date);
      var weeks = ['日', '一', '二', '三', '四', '五', '六'];
      var weekStr = weeks[date.getDay()];
      // 渲染自定义内容，添加星期信息
      render(`<div class="laydate-cell">${ymd.date}<br><small>周${weekStr}</small></div>`);
    }
  }
});

效果说明：

此方案会在日期选择面板的每个日期单元格中，同时显示日期和星期，适合需要在选择前就看到星期信息的场景。

官方文档中关于cellRender的说明：docs/laydate/detail/options.md

常见问题解决

Q: 星期显示为英文怎么办？

A: 可以通过修改星期数组自定义显示语言：

// 中文星期
var weeks = ['日', '一', '二', '三', '四', '五', '六'];
// 英文星期
var weeks = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

Q: 如何让周一作为一周的第一天？

A: 可以设置weekStart属性：

laydate.render({
  elem: '#test-laydate',
  weekStart: 1, // 设置周一为一周的第一天（0=周日，1=周一）
  format: 'yyyy-MM-dd 星期N'
});

weekStart属性的详细说明：docs/laydate/detail/options.md

总结

本文介绍了3种在Laydate中显示星期的方法，各有适用场景：

方案	优点	适用版本	复杂度
format属性	简单直接，代码量少	所有版本	★☆☆☆☆
formatToDisplay	显示与提交分离，灵活度高	2.9.9+	★★☆☆☆
cellRender	面板中直接显示，视觉效果好	2.9.9+	★★★☆☆

根据项目实际需求和Layui版本选择合适的方案，即可轻松实现日期选择器显示星期的功能。更多Laydate高级用法，请参考官方文档：docs/laydate/index.md

希望本文能帮助你解决日期选择器显示星期的问题，让用户体验更上一层楼！如果有其他疑问，欢迎在评论区留言讨论。