0
Ich habe Probleme mit dem ausgewählten Datum, weil es nicht das aktuelle Datum anfängt, wie kann ich es beheben?kann nicht ausgewählt werden Datum Anfangswert
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) {
\t $scope.selected = day.date;
};
$scope.next = function() {
\t var next = $scope.month.clone();
\t removeTime(next.month(next.month()+1).date(0));
\t $scope.month.month($scope.month.month()+1);
\t buildMonth($scope, next, $scope.month);
};
$scope.previous = function() {
\t var previous = $scope.month.clone();
\t removeTime(previous.month(previous.month()-1).date(0));
\t $scope.month.month($scope.month.month()-1);
\t buildMonth($scope, previous, $scope.month);
};
function removeTime(date) {
\t return date.day(1).hour(0).minute(0).second(0).millisecond(0);
}
function buildMonth($scope, start, month) {
\t $scope.weeks = [];
\t var done = false, date = start.clone(), monthIndex = date.month(), count = 0;
\t while (!done) {
\t $scope.weeks.push({ days: buildWeek(date.clone(), month) });
\t date.add(1, "w");
\t done = count++ > 2 && monthIndex !== date.month();
\t monthIndex = date.month();
\t }
}
function buildWeek(date, month) {
\t var days = [];
\t for (var i = 0; i < 7; i++) {
\t days.push({
\t \t name: date.format("dd").substring(0, 1),
\t \t number: date.date(),
\t \t isCurrentMonth: date.month() === month.month(),
\t \t isToday: date.isSame(new Date(), "day"),
\t \t date: date
\t });
\t date = date.clone();
\t date.add(1, "d");
\t }
\t return days;
}
});.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;
}<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">
\t <head lang="en">
\t \t <meta charset="utf-8">
\t \t <title>Custom Plunker</title>
\t \t <link rel="stylesheet" href="style.css" title="" type="" />
\t </head>
\t <body ng-controller="MyCtrl">
\t \t <div class="calendar">
\t \t \t <div class="week-days">
\t \t \t <span class="day">Mon</span>
\t \t \t <span class="day">Tue</span>
\t \t \t <span class="day">Wed</span>
\t \t \t <span class="day">Thu</span>
\t \t \t <span class="day">Fri</span>
\t \t \t <span class="day">Sat</span>
\t \t \t <span class="day">Sun</span>
\t \t \t </div>
\t \t \t <div class="week" ng-repeat="week in weeks">
\t \t \t \t <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>
\t \t \t </div>
\t \t </div>
\t </body>
</html>Dies ist meine Link-Datei mit meinem Code: https://plnkr.co/edit/jag8GKsfcRvLshfm0oac?p=preview
Ich denke, es ist eine Zeitzone Problem. –
Fügen Sie dem Beitrag Code hinzu, anstatt einen Link zu geben. – Shibli
Ich habe Ihren Code mit Hilfe von Snippets eingefügt, zu denen Sie aufgefordert werden sollten, wenn Sie Ihre Frage geschrieben haben. Vielleicht haben Sie deshalb den Plunker-Link in einen Codeblock gesteckt? Es ist eine der Schaltflächen am oberen Rand des Bearbeitungsfelds, wenn Sie hier einen Beitrag erstellen (es ist einfach so einfach zu benutzen). Ich habe den ursprünglichen Plokker Link am Ende Ihrer Frage verlassen. Überprüfe, was ich getan habe, um sicher zu gehen, dass dies dein Problem zeigt und dass ich nichts verpasst habe. – lukkea