如何使用jQuery实现选择日期选择器日期时动态显示星期名称

嘿，这个需求其实很好实现！jQuery UI的Datepicker自带了选中日期的回调事件，结合JavaScript的Date对象就能轻松提取星期名称。下面是完整的实现方案：

步骤1：准备HTML结构 #

首先我们需要一个Datepicker输入框，再加一个用来显示星期的容器：

<input type="text" id="datepicker" placeholder="选择日期">
<div id="weekday-result" style="margin-top:10px; font-weight:bold;"></div>

步骤2：编写JavaScript逻辑 #

利用Datepicker的onSelect事件，在用户选中日期时触发处理逻辑：

$(function() {
  // 初始化Datepicker
  $("#datepicker").datepicker({
    // 当用户选中日期时执行
    onSelect: function(selectedDateStr) {
      // 将选中的日期字符串转为Date对象
      const selectedDate = new Date(selectedDateStr);
      
      // 方法1：自定义星期名称数组（适合中文场景）
      const weekdayNames = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
      // getDay()返回0（周日）到6（周六）的数字
      const weekdayIndex = selectedDate.getDay();
      // 更新显示内容
      $("#weekday-result").text(`你选中的日期是：${weekdayNames[weekdayIndex]}`);

      // ------------------------------
      // 方法2：用本地化API获取星期名称（适合多语言场景）
      // const englishWeekday = selectedDate.toLocaleDateString('en-US', { weekday: 'long' });
      // const chineseWeekday = selectedDate.toLocaleDateString('zh-CN', { weekday: 'long' });
      // $("#weekday-result").text(`英文星期：${englishWeekday} | 中文星期：${chineseWeekday}`);
    }
  });
});

关键说明 #

• onSelect是Datepicker的核心回调，它会传入选中的日期字符串（格式和Datepicker的默认显示格式一致）
• JavaScript的Date.getDay()方法返回0到6的数字，对应周日到周六，所以我们需要用数组来映射成具体的星期名称
• 如果需要支持多语言，推荐使用toLocaleDateString方法，它可以根据指定的语言代码返回本地化的星期名称，不用手动维护数组

内容的提问来源于stack exchange，提问作者user3168637