【发布时间】：2019-01-14 08:05:36
【问题描述】：
我只想禁用今天日期的上一个按钮。 当涉及到今天的日期时，之前的按钮应该被禁用。 请帮我禁用日历中以前的日期，以便用户只能选择从今天开始的开始日期。 我正在为我的 Datepicker 使用 moment.js。谢谢！ This is output
var currDate = "";
function DateHelper(date) {
if (date === undefined) {
date = new Date();
}
// Require MomentJS: https://momentjs.com
return {
today: function today() {
return moment(date).format('ll');
},
nextDay: function nextDay() {
return moment(date).add(1, 'day').format('ll');
},
prevDay: function prevDay() {
return moment(date).subtract(1, 'day').format('ll');
},
toString: function toString() {
return moment(date).format('ll');
} };
}
// Save/Load LocalStorage
function save(data) {
localStorage["DiaryData"] = JSON.stringify(data);
}
function loadOrDefault(defaultObject) {
if (localStorage["DiaryData"] !== undefined) {
return JSON.parse(localStorage["DiaryData"]);
} else {
return defaultObject;
}
}
// Load data or setup default data
var allData = loadOrDefault({
"2017-05-11": "Hello World.",
"2017-05-31": "Hello World Again.",
"2017-06-01": "Tomorrow is another day~" });
// todo: render day
function setDiaryPage(pDate)
{
currDate = pDate;
$(".date").text(currDate);
$("#diaryContent").val(getDiaryContent(currDate));
}
function getDiaryContent(pDate)
{
return allData[DateHelper(pDate).toString()];
}
// todo: init
setDiaryPage(DateHelper().today());
// handling date choosing UI
$("#today").click(function () {
setDiaryPage(DateHelper().today());
});
$("#prevdate").click(function () {
setDiaryPage(DateHelper(currDate).prevDay());
});
$("#nextdate").click(function () {
setDiaryPage(DateHelper(currDate).nextDay());
});
$('#diaryContent').bind('input propertychange', function () {
onTextChange();
});
// handling content changes
function onTextChange() {
allData[DateHelper(currDate).toString()] = $("#diaryContent").val();
save(allData);
}* {box-sizing: border-box}
.page {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
.date {
background: #555;
color: #fff;
padding: 1em;
font-weight: 700;
text-align: center;
}
.prev-button{text-transform: uppercase;
background-color: red !important;
font-weight: 800;
border-radius: 0px;
background-color: red !important;
border-radius: 0px;
border: none;
width: 100%;
padding: 1em;
color: white;}
.row.no-gutters {
margin-right: 0;
margin-left: 0;
}
.row.no-gutters > [class^="col-"],
.row.no-gutters > [class*=" col-"] {
padding-right: 0;
padding-left: 0;
}<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Testing Date</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row no-gutters">
<div class="col-lg-4 col-xs-4"> <button class="prev-button" style="" id="prevdate" href="#prev-date" onclick="myFunction()">previous date</a></div>
<div class="col-lg-4 col-xs-4"> <div class="date"></div></div>
<div class="col-lg-4 col-xs-4"> <button class="prev-button" id="nextdate" href="#next-date">Next date</button></div>
<!-- <div class="col-lg-3"> <button class="prev-button" id="today" href="#today">Today</button></div> -->
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.12.0/moment.js'></script>
</body>
</html>【问题讨论】：
-
您面临什么实际问题？你试过什么？您的 sn-p 不起作用，因此我们无法轻松查看您现有的功能或问题。
-
我只想使用这个日期选择器进行预订，现在我的代码允许我选择以前的日期。我只想在日期选择器包含今天的日期时禁用或隐藏上一个按钮，以便用户只能从今天的日期及以后选择开始日期
-
@Ashwein 这是一个要求，而不是一个问题。该站点应该是关于解决您尝试编写需求的问题。碰巧这并不太难，所以我看到有人帮助了你，但通常如果你要问一个更复杂的要求，除非你尝试满足要求，否则你不太可能得到答案您自己 - 我们在这里为您提供帮助，而不是研究解决方案然后代表您编写代码。
标签： javascript html json