使用jQuery Datepicker实现选中日期对应getDay值的获取

嘿，我明白你想实现的效果：用户选任意日期，都能通过getDay()拿到对应的星期数值，比如03/21/2018要返回3对吧？刚好getDay()是JS里Date对象的方法，咱们结合你的Django模板来一步步实现：

第一步：先给用户整个日期选择框（如果还没加的话） #

在你的welcome.html里加个日期输入控件，让用户能选日期：

{% extends 'base.html' %} 
{% load bootstrap %} 
{% block content %} 
<title>welcome</title>
<!-- 新增日期选择器 -->
<label for="datePicker">挑个日期：</label>
<input type="date" id="datePicker">
<p id="demo"></p>
<!-- 你的其他内容 -->
{% endblock %}

第二步：写JS逻辑处理日期转换 #

接下来在模板里加段脚本，监听用户选日期的动作，然后处理成你要的星期值：

<script>
// 先拿到页面上的元素
const datePicker = document.getElementById('datePicker');
const resultBox = document.getElementById('demo');

// 用户选完日期就触发这个逻辑
datePicker.addEventListener('change', function() {
  // 拿到用户选的日期字符串
  const currentDate = this.value;
  // 转成Date对象
  const selectedDate = new Date(currentDate);
  // 调用getDay()拿到星期值（0是周日，1是周一...6是周六）
  const day = selectedDate.getDay();
  
  // 把结果显示出来，你也可以把day值用到别的地方，比如存到隐藏域传给后端
  resultBox.textContent = `这个日期对应的星期值是：${day}`;
  
  // 要是需要把day传给后端，比如加个隐藏表单域的示例：
  // const hiddenInput = document.createElement('input');
  // hiddenInput.type = 'hidden';
  // hiddenInput.name = 'dayValue';
  // hiddenInput.value = day;
  // 把这个隐藏域加到你的表单里就行
  // document.querySelector('form').appendChild(hiddenInput);
});
</script>

几个要注意的小细节 #

• 用input type="date"的话，拿到的日期格式是YYYY-MM-DD，直接给Date对象就能正确解析，不用额外处理格式；
• getDay()返回的是0-6，要是你想要1-7（周一到周日）的格式，加个小判断就行：

  // 把周日的0改成7，其他保持不变
  const adjustedDay = day === 0 ? 7 : day;
  

• 要是用户是手动输入MM/DD/YYYY这种格式，得先拆分字符串再转Date：

  const [month, dayStr, year] = currentDate.split('/');
  const selectedDate = new Date(year, month - 1, dayStr); // 注意JS里月份是从0开始的哦！
  

这样用户每选一个日期，就能自动拿到对应的getDay()值啦～

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