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>

ตัวอย่าง JSFiddle

ตัวกรองวันที่เชิงมุมอ้างอิง

คุณสามารถทำได้ด้วยตัวกรองหากคุณไม่ต้องการแนบวัตถุวันที่เข้ากับขอบเขตปัจจุบันทุกครั้งที่คุณต้องการพิมพ์วันที่:

.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'}}) คุณเพียงแค่ต้องกำหนดวัตถุวันที่ให้ขอบเขตที่คุณต้องการประเมินการแสดงออกนี้

นี่คือตัวอย่างjsfiddle : jsfiddle

แต่อย่าคาดหวังให้อัปเดตค่าโดยอัตโนมัติ ค่านี้ไม่ได้รับการตรวจสอบโดยเชิงมุมดังนั้นคุณต้องเรียกใช้การแยกย่อยทุกครั้งที่คุณต้องการรับการอัปเดต (ตัวอย่างเช่น $ interval) ... ซึ่งเป็นการสิ้นเปลืองทรัพยากร (และไม่แนะนำ "ในเอกสาร) แน่นอนคุณสามารถใช้การรวมกันกับคำสั่ง / ตัวควบคุมเพื่อยุ่งกับขอบเขตเด็กเท่านั้น (มันเล็กกว่าเสมอเช่น rootScope และการแยกย่อยจะเร็วขึ้น)

เพียงแค่ 2 เซ็นต์ของฉันในกรณีที่มีคนสะดุดเมื่อ :)

สิ่งที่ฉันแนะนำที่นี่จะมีผลเช่นเดียวกับคำตอบปัจจุบัน แต่ก็ขอแนะนำให้เขียนคอนโทรลเลอร์ของคุณในแบบที่ฉันได้กล่าวถึงที่นี่

การอ้างอิงเลื่อนไปที่"หมายเหตุ"แรก(ขออภัยที่ไม่มีสมอ)

นี่คือวิธีที่แนะนำ:

ควบคุม:

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()ฟังก์ชั่นใน AngularJS

ควบคุม:

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.module ('myapp', [])

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})

โซลูชันคล้ายกับหนึ่งใน @Nick G.โดยใช้ตัวกรอง แต่ทำให้พารามิเตอร์มีความหมาย:

ใช้ตัวกรองที่เรียกว่าrelativedateซึ่งคำนวณวันที่สัมพันธ์กับวันที่ปัจจุบันโดยพารามิเตอร์ที่กำหนดเป็น diff เป็นผลให้(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>

วิธีการอีกวิธีหนึ่งคือ: ในตัวควบคุมให้สร้างตัวแปรเพื่อเก็บวันที่ปัจจุบันดังที่แสดงด้านล่าง:

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>