Angularjs - 현재 날짜 표시
angularjs로 표시되며 현재 날짜(포맷)를 표시하려고 합니다.이런 생각이 들었어요.<span>{{Date.now() | date:'yyyy-MM-dd'}}</span>현재 날짜가 표시됩니다.
먼저 컨트롤러에 날짜 개체를 생성해야 합니다.
컨트롤러:
function Ctrl($scope)
{
$scope.date = new Date();
}
표시:
<div ng-app ng-controller="Ctrl">
{{date | date:'yyyy-MM-dd'}}
</div>
날짜를 인쇄할 때마다 날짜 개체를 현재 범위에 첨부하지 않아도 되는 경우 필터를 사용하여 이 작업을 수행할 수도 있습니다.
.filter('currentdate',['$filter', function($filter) {
return function() {
return $filter('date')(new Date(), 'yyyy-MM-dd');
};
}])
다음으로, 다음과 같이 표시됩니다.
<div ng-app="myApp">
<div>{{'' | currentdate}}</div>
</div>
템플릿
<span date-now="MM/dd/yyyy"></span>
지시.
.directive('dateNow', ['$filter', function($filter) {
return {
link: function( $scope, $element, $attrs) {
$element.text($filter('date')(new Date(), $attrs.dateNow));
}
};
}])
접속할 수 없기 때문에Date(인라인 솔루션의 경우) 템플릿에 있는 오브젝트에 대해 이 지침을 선택했습니다.또한 컨트롤러를 청결하게 유지하고 재사용할 수 있습니다.
콧수염 표정으로도 할 수 있어요.{{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}Date 객체를 이 식을 평가하는 범위에 할당하기만 하면 됩니다.
다음은 jsfiddle의 예입니다.jsfiddle
그러나 값이 자동으로 업데이트될 것으로 기대하지는 마십시오.이 값은 각도로 감시되지 않으므로 업데이트할 때마다 다이제스트를 트리거해야 합니다(예: $interval).이는 리소스 낭비입니다(또한 문서에서는 권장되지 않습니다).물론 지시/컨트롤러와의 조합을 사용하여 하위 범위만 조작할 수 있습니다(예를 들어 rootScope보다 항상 작으며 다이제스트가 더 빠릅니다).
만약 누군가가 이것을 우연히 발견했을 때를 대비해서 2센트만 있으면 됩니다:)
여기서 제안하는 내용은 현재 답변과 동일한 결과를 얻을 수 있지만, 여기서 언급한 것과 같이 컨트롤러에 쓰는 것이 좋습니다.
첫 번째 "Note"까지 참조 스크롤(앵커가 없습니다)
권장되는 방법은 다음과 같습니다.
컨트롤러:
var app = angular.module('myApp', []);
app.controller( 'MyCtrl', ['$scope', function($scope) {
$scope.date = new Date();
}]);
표시:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
{{date | date:'yyyy-MM-dd'}}
</div>
</div>
사용할 수 있습니다.moment()그리고.format()각도에서의 함수JS.
컨트롤러:
var app = angular.module('demoApp', []);
app.controller( 'demoCtrl', ['$scope', '$moment' function($scope , $moment) {
$scope.date = $moment().format('MM/DD/YYYY');
}]);
표시:
<div ng-app="demoApp">
<div ng-controller="demoCtrl">
{{date}}
</div>
</div>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
var today = new Date();
console.log($scope.cdate);
var date = today.getDate();
var month = today.getMonth();
var year = today.getFullYear();
var current_date = date+'/'+month+'/'+year;
console.log(current_date);
});
</script>
다음은 답변의 샘플입니다.http://plnkr.co/edit/MKugkgCSpdZFefSeDRi7?p=preview
<span>Date Of Birth: {{DateOfBirth | date:"dd-MM-yyyy"}}</span>
<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="DateOfBirth" class="form-control" />
다음으로 컨트롤러에서 다음을 수행합니다.
$scope.DateOfBirth = new Date();
보다
<div ng-app="myapp">
{{AssignedDate.now() | date:'yyyy-MM-dd HH:mm:ss'}}
</div>
컨트롤러
var app = angular.snarmyapp',[]
app.run(function($rootScope){
$rootScope.AssignedDate = Date;
})
필터를 사용하여 @Nick G.의 솔루션과 유사하지만 파라미터에 의미를 부여합니다.
라고 하는 필터를 실장합니다.relativedatediff로 지정된 파라미터로 현재 날짜와 상대적인 날짜를 계산합니다.결과적으로.(0 | relativedate)과 '오늘'을 합니다.(1 | relativedate)내일이란 뜻이지
.filter('relativedate', ['$filter', function ($filter) {
return function (rel, format) {
let date = new Date();
date.setDate(date.getDate() + rel);
return $filter('date')(date, format || 'yyyy-MM-dd')
};
}]);
및 html:
<div ng-app="myApp">
<div>Yesterday: {{-1 | relativedate}}</div>
<div>Today: {{0 | relativedate}}</div>
<div>Tomorrow: {{1 | relativedate}}</div>
</div>
또 다른 방법은 다음과 같습니다.Controller에서 다음과 같이 현재 날짜를 유지할 변수를 만듭니다.
var eventsApp = angular.module("eventsApp", []);
eventsApp.controller("EventController", function EventController($scope)
{
$scope.myDate = Date.now();
});
HTML 뷰에서는
<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
<meta charset="utf-8" />
<title></title>
<script src="lib/angular/angular.js"></script>
</head>
<body>
<div ng-controller="EventController">
<span>{{myDate | date : 'yyyy-MM-dd'}}</span>
</div>
</body>
</html>
언급URL : https://stackoverflow.com/questions/22962468/angularjs-display-current-date
'programing' 카테고리의 다른 글
| MUI에서 활성 탭 색상을 변경하는 방법 (0) | 2023.03.05 |
|---|---|
| 자체 참조 테이블(Oracle)에 대한 SQL 재귀 쿼리 (0) | 2023.03.05 |
| Angular 2의 특정 루트에 대해 RouteReuseStrategy shouldDetach를 구현하는 방법 (0) | 2023.03.05 |
| 농담 모의 반응 컨텍스트 (0) | 2023.03.05 |
| 문자열을 int64 유형의 Go 값으로 이동 해제할 수 없습니다. (0) | 2023.03.05 |