显示选择选项文本日期
Display select option text date
我有一个选择选项下拉列表,仅显示星期一(选择特定周)。
<select id="monday" name="monday">
<option value="7">
Mon 1/7/2013 (Week 02)
</option><option value="14">
Mon 1/14/2013 (Week 03)
</option>
// etc...
</select>
我想获取选项文本(即星期一 1/7/2013(第 02 周))并使用它来在表格中显示该周的日期:
<div id='mondaydate'>Mon 1/7/2013 (Week 02)</div> | <div id='tuesdaydate'>Tue 1/8/2013 (Week 02)</div> | <div id='wednesdaydate'>Wed 1/9/2013 (Week 02)</div>...
当选择选项更改时,我希望<div>
中的日期也更改。现在我拥有的JavaScript(不起作用)是:
<script type='text/javascript'>
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date("text");
document.getElementById("mondaydate").innerHTML = "mon.setDate(mon.getDate()+0)";
document.getElementById("tuesdaydate").innerHTML = "mon.setDate(mon.getDate()+1)";
document.getElementById("wednesdaydate").innerHTML = "mon.setDate(mon.getDate()+2)";
document.getElementById("thursdaydate").innerHTML = "mon.setDate(mon.getDate()+3)";
document.getElementById("fridaydate").innerHTML = "mon.setDate(mon.getDate()+4)";
document.getElementById("saturdaydate").innerHTML = "mon.setDate(mon.getDate()+5)";
document.getElementById("sundaydate").innerHTML = "mon.setDate(mon.getDate()+6)";
</script>
这能做到吗,还是我在旋转我的轮子?
更新 - 解决方案
正如有人建议的那样,我得到了一个小报价,所以我摆脱了那些。此外,正如建议的那样,日期需要格式化为第一次尝试仅提供时间戳。使用这种日期格式解决方案,我能够将日期格式化为人类可读的内容。
完整的JavaScript代码:
<script type='text/javascript'>
function formatDate(date, fmt) {
function pad(value) {
return (value.toString().length < 2) ? '0' + value : value;
}
return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
switch (fmtCode) {
case 'Y':
return date.getUTCFullYear();
case 'M':
return pad(date.getUTCMonth() + 1);
case 'd':
return pad(date.getUTCDate());
case 'H':
return pad(date.getUTCHours());
case 'm':
return pad(date.getUTCMinutes());
case 's':
return pad(date.getUTCSeconds());
default:
throw new Error('Unsupported format code: ' + fmtCode);
}
});
}
function changeDate()
{
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon = new Date(text);
document.getElementById("mondaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+0)), '%M/%d/%Y');
document.getElementById("tuesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("wednesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("thursdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("fridaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("saturdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("sundaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
}
</script>
另外,请注意,最初我用星期一 +0、星期二 +1、星期三 +2 等错误地设置了日期(没有注意到它,因为我得到的只是时间戳)。这似乎真的在设置日期,所以星期一和星期二显示正确,但星期三显示星期四的日期,星期四显示星期日的日期,等等,每个增加+1反而解决了这个问题。
删除变量周围的引号,否则它只会显示引号中的内容,而不执行任何逻辑:
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text); <--- No quotes around text variable
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0); <--- No quotes
//Same with everything below, stop with the quotes!
document.getElementById("tuesdaydate").innerHTML = mon.setDate(mon.getDate()+1);
document.getElementById("wednesdaydate").innerHTML = mon.setDate(mon.getDate()+2);
document.getElementById("thursdaydate").innerHTML = mon.setDate(mon.getDate()+3);
document.getElementById("fridaydate").innerHTML = mon.setDate(mon.getDate()+4);
document.getElementById("saturdaydate").innerHTML = mon.setDate(mon.getDate()+5);
document.getElementById("sundaydate").innerHTML = mon.setDate(mon.getDate()+6);
你有很多不必要的引号,这会搞砸你的代码。
看看这个:
.JS:
$("#monday").click(function(){
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text);
console.log(mon);
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0);
});
在这里找到工作小提琴:http://jsfiddle.net/bnWRU/1/
tymeJV 已经回答了,但我认为你可能在 javascript 中的日期格式方面遇到了一些问题。
我建议这篇文章:Javascript以格式获取日期
相关文章:
- jquery日期选择器显示与值不同的文本
- 用Javascript重新格式化复杂文本日期字符串的更好方法
- 如何使用Windows8JSON.parse将JSON文本反序列化为日期类型
- 更改html标记或其子标记(而不是其属性)文本中的日期格式
- 动态设置信用卡到期日期文本框的格式
- MVC5 - 检查用于搜索日期字段的 2 个日期(文本框)之间的重叠
- 如何“取消设置”Dojo 日期文本框默认值
- MVC4为启动日期文本框指定日期值
- 如何使用Jquery.ui.datepicker.css验证出生日期和死亡日期文本框
- 正在分析javascript中的日期文本
- 如何使用javascript转换日期文本
- 如何重载下拉下拉每个单选按钮上的变化和日期文本框的变化
- 使用Javascript验证两个日期文本框
- 显示“price"使用JQuery-UI Datepicker的日期文本
- 输入匹配签名时自动填充日期文本框
- 当使用键盘清除日期文本框时,jQueryUI日期选择器无法验证日期范围
- 激活jquery日历后日期文本框写入html从javascript
- 使日期文本可点击,而不是整个单元格
- 日期文本框应该始终是当前月份的第一天
- 覆盖moment js默认的无效日期文本