时间戳

首页 > 解决方案 > 如何禁用今天日期的上一个按钮？

javascript - 如何禁用今天日期的上一个按钮？

问题描述

我只想禁用今天日期的上一个按钮。当涉及到今天的日期时，之前的按钮应该被禁用。请帮我禁用日历中以前的日期，以便用户只能选择从今天开始的开始日期。我正在为我的 Datepicker 使用 moment.js。谢谢！ 这是输出

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>

标签： javascripthtmljson

解决方案

请试试这个

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());
  if (DateHelper().today() == $('.date').text()) {
    $("#prevdate").addClass('hide');
  } else {
    $("#prevdate").removeClass('hide');
  }
});
$("#nextdate").click(function() {
  setDiaryPage(DateHelper(currDate).nextDay());
  if (DateHelper().today() == $('.date').text()) {
    $("#prevdate").addClass('hide');
  } else {
    $("#prevdate").removeClass('hide');
  }
});

$('#diaryContent').bind('input propertychange', function() {
  onTextChange();
});

// handling content changes
function onTextChange() {
  allData[DateHelper(currDate).toString()] = $("#diaryContent").val();
  save(allData);
}
if (DateHelper().today() == $('.date').text()) {
  $("#prevdate").addClass('hide');
}
* {
  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>

推荐阅读