Question

我在选定日期时遇到问题，因为它最初没有获得当前日期，我该如何解决？

＆＃13;

var app = angular.module('myApp', []);
app.controller('MyCtrl', function($scope) {
  $scope.name = 'World';
  $scope.event = {};

  $scope.day = moment();
  $scope.selected = removeTime($scope.selected || moment());
  $scope.month = $scope.selected.clone();

  var start = $scope.selected.clone();
  start.date(-6);
  removeTime(start.day(0));

  buildMonth($scope, start, $scope.month);

  $scope.select = function(day) {
	$scope.selected = day.date;
  };

  $scope.next = function() {
	var next = $scope.month.clone();
	removeTime(next.month(next.month()+1).date(0));
	$scope.month.month($scope.month.month()+1);
	buildMonth($scope, next, $scope.month);
  };

  $scope.previous = function() {
	var previous = $scope.month.clone();
	removeTime(previous.month(previous.month()-1).date(0));
	$scope.month.month($scope.month.month()-1);
	buildMonth($scope, previous, $scope.month);
  };

  function removeTime(date) {
	return date.day(1).hour(0).minute(0).second(0).millisecond(0);
  }

  function buildMonth($scope, start, month) {
	$scope.weeks = [];
	var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
	while (!done) {
	  $scope.weeks.push({ days: buildWeek(date.clone(), month) });
	  date.add(1, "w");
	  done = count++ > 2 && monthIndex !== date.month();
	  monthIndex = date.month();
	}
  }

  function buildWeek(date, month) {
	var days = [];
	for (var i = 0; i < 7; i++) {
	  days.push({
		name: date.format("dd").substring(0, 1),
		number: date.date(),
		isCurrentMonth: date.month() === month.month(),
		isToday: date.isSame(new Date(), "day"),
		date: date
	  });
	  date = date.clone();
	  date.add(1, "d");
	}
	return days;
  }
});

＆＃13;

.border-box {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.calendar {
  float: left;
  display: block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  background: white;
  width: 300px;
  border: solid 1px #CCC;
  margin-bottom: 10px;
}
.calendar > div.header {
  float: left;
  width: 100%;
  background: #2875C7;
  height: 40px;
  color: white;
}
.calendar > div.header > * {
  height: 40px;
  line-height: 40px !important;
  display: inline-block;
  vertical-align: middle;
}
.calendar > div.header > i {
  float: left;
  width: 40px;
  font-size: 1.125em;
  font-weight: bold;
  position: relative;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding: 0 10px;
  cursor: pointer;
}
.calendar > div.header > i.fa-angle-left {
  text-align: left;
}
.calendar > div.header > i.fa-angle-right {
  text-align: right;
  margin-left: -40px;
}
.calendar > div.header > span {
  float: left;
  width: 100%;
  font-weight: bold;
  text-transform: uppercase;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  padding-left: 50px;
  margin-left: -40px;
  text-align: center;
  padding-right: 40px;
  color: inherit;
}
.calendar > div.week {
  float: left;
  width: 100%;
  border-top: solid 1px #CCC;
}
.calendar > div.week:first-child {
  border-top: none;
}
.calendar > div.week > span.day {
  float: left;
  width: 14.28571429%;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  border-left: solid 1px #CCC;
  font-size: 0.75em;
  text-align: center;
  height: 30px;
  line-height: 30px !important;
  display: inline-block;
  vertical-align: middle;
  background: white;
  cursor: pointer;
  color: black;
}
.calendar > div.week > span.day:first-child {
  border-left: none;
}
.calendar > div.week > span.day.today {
  background: #E3F2FF;
}
.calendar > div.week > span.day.different-month {
  color: #C0C0C0;
}
.calendar > div.week > span.day.selected {
  background: #2875C7;
  color: white;
}
.calendar > div.week.names > span {
  color: #2875C7;
  font-weight: bold;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.1.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="myApp">
	<head lang="en">
		<meta charset="utf-8">
		<title>Custom Plunker</title>
		<link rel="stylesheet" href="style.css" title="" type="" />
	</head>
	<body ng-controller="MyCtrl">
		<div class="calendar">
			<div class="week-days">
			  <span class="day">Mon</span>
			  <span class="day">Tue</span>
			  <span class="day">Wed</span>
			  <span class="day">Thu</span>
			  <span class="day">Fri</span>
			  <span class="day">Sat</span>
			  <span class="day">Sun</span>
			</div>
			<div class="week" ng-repeat="week in weeks">
				<span class="day" ng-class="{ today: day.isToday, 'different-month': !day.isCurrentMonth, selected: day.date.isSame(selected) }" ng-click="select(day)" ng-repeat="day in week.days">{{day.number}}</span>
			</div>
		</div>

	</body>
</html>

＆＃13;

这是我的代码：https://plnkr.co/edit/jag8GKsfcRvLshfm0oac?p=preview

的链接文件

Answer 1

问题是，您正在使用函数removeTime中的date.day(1)来设置星期几为星期一。

修正了删除此问题：

  function removeTime(date) {
    return date.hour(0).minute(0).second(0).millisecond(0);
  }

查看更新的plunker

无法获得选定的日期初始值

1 个答案: