javascript - 从输入日期选择器发布接下来的几周或几个月 - HTML JavaScript
问题描述
我正在尝试获取日期输入以输出接下来的几周或几个月，具体取决于所选内容。但是，我遇到了三个问题。
问题 1 已解决 - 如果选择了月份，我正在尝试使用一个类来设置它以隐藏周输出，反之亦然；单击提交按钮时。然而，结果只是让页面上的一切都消失了。不知道为什么？
问题 2 - 这更多是方法问题，而不是当前错误。我坚持使用与输入日期相对应的 ID 段落中打印几周或几个月的方法。
问题 3 已解决 - 我的日期选择器中的日期无效，我想要的只是当前日期。所以我把它留空了，但由于我已经改变了它显示日期的方式是 DD/MM/YYYY，所以它导致了这个问题。
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format(this.getAttribute("data-date-format"))
)
}).trigger("change")
function submit() {
var type = document.getElementById("selectType").value;
if (type == "Months") {
document.getElementById("outputMonths").className = "output";
document.getElementById("outputWeeks").className = "hidden";
} else {
document.getElementById("outputMonths").className = "hidden";
document.getElementById("outputWeeks").className = "output";
}
}input {
position: relative;
width: 150px;
height: 20px;
}
input:before {
position: absolute;
top: 3px;
left: 3px;
content: attr(data-date);
display: inline-block;
color: black;
}
input::-webkit-datetime-edit,
input::-webkit-inner-spin-button,
input::-webkit-clear-button {
display: none;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: 3px;
right: 0;
color: black;
opacity: 1;
}
.output {
padding: 10px;
border: 1px solid black;
}
.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<html>
<body>
<form>
<div>
<lable>Start Date:</lable><br>
<input type="date" data-date="" data-date-format="DD/MM/YYYY" value="">
</div>
<div>
<br>
<select id="selectType">
<option value="Months">Months</option>
<option value="Weeks">Weeks</option>
</select>
</div>
<div>
<br><input type="button" id="btnSubmit" onclick="submit()" value="Submit">
</div>
<div id="output" class="">
<h3>Output - 1 Year:</h3>
<div id="outputMonths" class="output hidden">
<label>Date 1: </label>
<p id="dataM1">DD/MM/YYYY</p>
<label>Date 2: </label>
<p id="dataM2">DD/MM/YYYY</p>
<label>Date 3: </label>
<p id="dataM3">DD/MM/YYYY</p>
<label>Date 4: </label>
<p id="dataM4">DD/MM/YYYY</p>
<label>Date 5: </label>
<p id="dataM5">DD/MM/YYYY</p>
<label>Date 6: </label>
<p id="dataM6">DD/MM/YYYY</p>
<label>Date 7: </label>
<p id="dataM7">DD/MM/YYYY</p>
<label>Date 8: </label>
<p id="dataM8">DD/MM/YYYY</p>
<label>Date 9: </label>
<p id="dataM9">DD/MM/YYYY</p>
<label>Date 10: </label>
<p id="dataM10">DD/MM/YYYY</p>
<label>Date 11: </label>
<p id="dataM11">DD/MM/YYYY</p>
<label>Date 12: </label>
<p id="dataM12">DD/MM/YYYY</p>
</div>
<div id="outputWeeks" class="output hidden">
<label>Date 1: </label>
<p id="dataW1">DD/MM/YYYY</p>
<label>Date 2: </label>
<p id="dataW2">DD/MM/YYYY</p>
<label>Date 3: </label>
<p id="dataW3">DD/MM/YYYY</p>
<label>Date 4: </label>
<p id="dataW4">DD/MM/YYYY</p>
<label>Date 5: </label>
<p id="dataW5">DD/MM/YYYY</p>
<label>Date 6: </label>
<p id="dataW6">DD/MM/YYYY</p>
<label>Date 7: </label>
<p id="dataW7">DD/MM/YYYY</p>
<label>Date 8: </label>
<p id="dataW8">DD/MM/YYYY</p>
<label>Date 9: </label>
<p id="dataW9">DD/MM/YYYY</p>
<label>Date 10: </label>
<p id="dataW10">DD/MM/YYYY</p>
<label>Date 11: </label>
<p id="dataW11">DD/MM/YYYY</p>
<label>Date 12: </label>
<p id="dataW12">DD/MM/YYYY</p>
<label>Date 13: </label>
<p id="dataW13">DD/MM/YYYY</p>
<label>Date 14: </label>
<p id="dataW14">DD/MM/YYYY</p>
<label>Date 15: </label>
<p id="dataW15">DD/MM/YYYY</p>
<label>Date 16: </label>
<p id="dataW16">DD/MM/YYYY</p>
<label>Date 17: </label>
<p id="dataW17">DD/MM/YYYY</p>
<label>Date 18: </label>
<p id="dataW18">DD/MM/YYYY</p>
<label>Date 19: </label>
<p id="dataW19">DD/MM/YYYY</p>
<label>Date 20: </label>
<p id="dataW20">DD/MM/YYYY</p>
<label>Date 21: </label>
<p id="dataW21">DD/MM/YYYY</p>
<label>Date 22: </label>
<p id="dataW22">DD/MM/YYYY</p>
<label>Date 23: </label>
<p id="dataW23">DD/MM/YYYY</p>
<label>Date 24: </label>
<p id="dataW24">DD/MM/YYYY</p>
<label>Date 25: </label>
<p id="dataW25">DD/MM/YYYY</p>
<label>Date 26: </label>
<p id="dataW26">DD/MM/YYYY</p>
<label>Date 27: </label>
<p id="dataW27">DD/MM/YYYY</p>
<label>Date 28: </label>
<p id="dataW28">DD/MM/YYYY</p>
<label>Date 29: </label>
<p id="dataW29">DD/MM/YYYY</p>
<label>Date 30: </label>
<p id="dataW30">DD/MM/YYYY</p>
<label>Date 31: </label>
<p id="dataW31">DD/MM/YYYY</p>
<label>Date 32: </label>
<p id="dataW32">DD/MM/YYYY</p>
<label>Date 33: </label>
<p id="dataW33">DD/MM/YYYY</p>
<label>Date 34: </label>
<p id="dataW34">DD/MM/YYYY</p>
<label>Date 35: </label>
<p id="dataW35">DD/MM/YYYY</p>
<label>Date 36: </label>
<p id="dataW36">DD/MM/YYYY</p>
<label>Date 37: </label>
<p id="dataW37">DD/MM/YYYY</p>
<label>Date 38: </label>
<p id="dataW38">DD/MM/YYYY</p>
<label>Date 39: </label>
<p id="dataW39">DD/MM/YYYY</p>
<label>Date 40: </label>
<p id="dataW40">DD/MM/YYYY</p>
<label>Date 41: </label>
<p id="dataW41">DD/MM/YYYY</p>
<label>Date 42: </label>
<p id="dataW42">DD/MM/YYYY</p>
<label>Date 43: </label>
<p id="dataW43">DD/MM/YYYY</p>
<label>Date 44: </label>
<p id="dataW44">DD/MM/YYYY</p>
<label>Date 45: </label>
<p id="dataW45">DD/MM/YYYY</p>
<label>Date 46: </label>
<p id="dataW46">DD/MM/YYYY</p>
<label>Date 47: </label>
<p id="dataW47">DD/MM/YYYY</p>
<label>Date 48: </label>
<p id="dataW48">DD/MM/YYYY</p>
<label>Date 49: </label>
<p id="dataW49">DD/MM/YYYY</p>
<label>Date 50: </label>
<p id="dataW50">DD/MM/YYYY</p>
<label>Date 51: </label>
<p id="dataW51">DD/MM/YYYY</p>
<label>Date 52: </label>
<p id="dataW52">DD/MM/YYYY</p>
</div>
</div>
</form>
</body>
</html>解决方案
我对你想要达到的目标感到困惑。我已将默认日期值修复为今天的日期，并修复了当您单击提交时隐藏整个页面的问题。请告知您还想做什么：
document.getElementById('datePicker').valueAsDate = new Date();
$("input").on("change", function() {
this.setAttribute(
"data-date",
moment(this.value, "YYYY-MM-DD")
.format(this.getAttribute("data-date-format"))
)
}).trigger("change")
function submit() {
var type = document.getElementById("selectType").value;
if (type === "Months") {
document.getElementById("outputMonths").className = "output";
document.getElementById("outputWeeks").className = "hidden";
} else {
document.getElementById("outputMonths").className = "hidden";
document.getElementById("outputWeeks").className = "output";
}
}input {
position: relative;
width: 150px;
height: 20px;
}
input:before {
position: absolute;
top: 3px;
left: 3px;
content: attr(data-date);
display: inline-block;
color: black;
}
input::-webkit-datetime-edit,
input::-webkit-inner-spin-button,
input::-webkit-clear-button {
display: none;
}
input::-webkit-calendar-picker-indicator {
position: absolute;
top: 3px;
right: 0;
color: black;
opacity: 1;
}
.output {
padding: 10px;
border: 1px solid black;
display: block;
}
.hidden {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<html>
<body>
<div>
<lable>Start Date:</lable><br>
<input type="date" id="datePicker" data-date="" data-date-format="DD/MM/YYYY" />
</div>
<div>
<br>
<select id="selectType">
<option value="Months">Months</option>
<option value="Weeks">Weeks</option>
</select>
</div>
<div>
<br><input type="submit" id="btnSubmit" value="Submit" onclick="submit()">
</div>
<div id="output" class="">
<h3>Output - 1 Year:</h3>
<div id="outputMonths" class="output hidden">
<label>Date 1: </label>
<p id="dataM1">DD/MM/YYYY</p>
<label>Date 2: </label>
<p id="dataM2">DD/MM/YYYY</p>
<label>Date 3: </label>
<p id="dataM3">DD/MM/YYYY</p>
<label>Date 4: </label>
<p id="dataM4">DD/MM/YYYY</p>
<label>Date 5: </label>
<p id="dataM5">DD/MM/YYYY</p>
<label>Date 6: </label>
<p id="dataM6">DD/MM/YYYY</p>
<label>Date 7: </label>
<p id="dataM7">DD/MM/YYYY</p>
<label>Date 8: </label>
<p id="dataM8">DD/MM/YYYY</p>
<label>Date 9: </label>
<p id="dataM9">DD/MM/YYYY</p>
<label>Date 10: </label>
<p id="dataM10">DD/MM/YYYY</p>
<label>Date 11: </label>
<p id="dataM11">DD/MM/YYYY</p>
<label>Date 12: </label>
<p id="dataM12">DD/MM/YYYY</p>
</div>
<div id="outputWeeks" class="output hidden">
<label>Date 1: </label>
<p id="dataW1">DD/MM/YYYY</p>
<label>Date 2: </label>
<p id="dataW2">DD/MM/YYYY</p>
<label>Date 3: </label>
<p id="dataW3">DD/MM/YYYY</p>
<label>Date 4: </label>
<p id="dataW4">DD/MM/YYYY</p>
<label>Date 5: </label>
<p id="dataW5">DD/MM/YYYY</p>
<label>Date 6: </label>
<p id="dataW6">DD/MM/YYYY</p>
<label>Date 7: </label>
<p id="dataW7">DD/MM/YYYY</p>
<label>Date 8: </label>
<p id="dataW8">DD/MM/YYYY</p>
<label>Date 9: </label>
<p id="dataW9">DD/MM/YYYY</p>
<label>Date 10: </label>
<p id="dataW10">DD/MM/YYYY</p>
<label>Date 11: </label>
<p id="dataW11">DD/MM/YYYY</p>
<label>Date 12: </label>
<p id="dataW12">DD/MM/YYYY</p>
<label>Date 13: </label>
<p id="dataW13">DD/MM/YYYY</p>
<label>Date 14: </label>
<p id="dataW14">DD/MM/YYYY</p>
<label>Date 15: </label>
<p id="dataW15">DD/MM/YYYY</p>
<label>Date 16: </label>
<p id="dataW16">DD/MM/YYYY</p>
<label>Date 17: </label>
<p id="dataW17">DD/MM/YYYY</p>
<label>Date 18: </label>
<p id="dataW18">DD/MM/YYYY</p>
<label>Date 19: </label>
<p id="dataW19">DD/MM/YYYY</p>
<label>Date 20: </label>
<p id="dataW20">DD/MM/YYYY</p>
<label>Date 21: </label>
<p id="dataW21">DD/MM/YYYY</p>
<label>Date 22: </label>
<p id="dataW22">DD/MM/YYYY</p>
<label>Date 23: </label>
<p id="dataW23">DD/MM/YYYY</p>
<label>Date 24: </label>
<p id="dataW24">DD/MM/YYYY</p>
<label>Date 25: </label>
<p id="dataW25">DD/MM/YYYY</p>
<label>Date 26: </label>
<p id="dataW26">DD/MM/YYYY</p>
<label>Date 27: </label>
<p id="dataW27">DD/MM/YYYY</p>
<label>Date 28: </label>
<p id="dataW28">DD/MM/YYYY</p>
<label>Date 29: </label>
<p id="dataW29">DD/MM/YYYY</p>
<label>Date 30: </label>
<p id="dataW30">DD/MM/YYYY</p>
<label>Date 31: </label>
<p id="dataW31">DD/MM/YYYY</p>
<label>Date 32: </label>
<p id="dataW32">DD/MM/YYYY</p>
<label>Date 33: </label>
<p id="dataW33">DD/MM/YYYY</p>
<label>Date 34: </label>
<p id="dataW34">DD/MM/YYYY</p>
<label>Date 35: </label>
<p id="dataW35">DD/MM/YYYY</p>
<label>Date 36: </label>
<p id="dataW36">DD/MM/YYYY</p>
<label>Date 37: </label>
<p id="dataW37">DD/MM/YYYY</p>
<label>Date 38: </label>
<p id="dataW38">DD/MM/YYYY</p>
<label>Date 39: </label>
<p id="dataW39">DD/MM/YYYY</p>
<label>Date 40: </label>
<p id="dataW40">DD/MM/YYYY</p>
<label>Date 41: </label>
<p id="dataW41">DD/MM/YYYY</p>
<label>Date 42: </label>
<p id="dataW42">DD/MM/YYYY</p>
<label>Date 43: </label>
<p id="dataW43">DD/MM/YYYY</p>
<label>Date 44: </label>
<p id="dataW44">DD/MM/YYYY</p>
<label>Date 45: </label>
<p id="dataW45">DD/MM/YYYY</p>
<label>Date 46: </label>
<p id="dataW46">DD/MM/YYYY</p>
<label>Date 47: </label>
<p id="dataW47">DD/MM/YYYY</p>
<label>Date 48: </label>
<p id="dataW48">DD/MM/YYYY</p>
<label>Date 49: </label>
<p id="dataW49">DD/MM/YYYY</p>
<label>Date 50: </label>
<p id="dataW50">DD/MM/YYYY</p>
<label>Date 51: </label>
<p id="dataW51">DD/MM/YYYY</p>
<label>Date 52: </label>
<p id="dataW52">DD/MM/YYYY</p>
</div>
</div>
</body>
</html>推荐阅读
- javascript - 角度 8 模式/正则表达式无法按预期工作仅接受（减号/数字）
- conv-neural-network - ValueError: 目标尺寸 (torch.Size([26])) 必须与输入尺寸 (torch.Size([66])) 相同
- android - 错误：无法解析“：app@debug/compileClasspath”的依赖关系：无法解析com.google.android.gms：play-services-base
- python-3.x - 以下代码中的串行连接有什么问题（在 Raspberry Pi 4、Raspbian OS 上运行）？
- php - 如何内爆 foreach 循环值？
- python - 从 JSON 文件中解码自定义 Python 类型
- php - 使用 mailgun 消息生成器向单个收件人发送批量电子邮件
- mysql - mySQL：返回父/子关系的剩余部分
- spring - 对 Zuul 的请求中的正文编码
- python - SQLAlchemy：sqlalchemy.exc.OperationalError VALUES (?, ?, ?, ?)