Angularjs - menampilkan tanggal saat ini

128

Saya mendapat tampilan di angularjs dan saya hanya mencoba untuk menampilkan tanggal saat ini (diformat). Saya pikir sesuatu seperti <span>{{Date.now() | date:'yyyy-MM-dd'}}</span>harus menampilkan tanggal saat ini.

Evo_x
sumber
Itu akan .. tetapi tidak tahu Date.now().
putvande
2
Jadi saya harus membuat variabel di controller terlebih dahulu? Saya pikir sesuatu yang sederhana seperti tanggal saat ini akan lebih mudah :)
Evo_x
1
Date.now()adalah fungsi nodeJS
Nay

Jawaban:

229

Anda harus membuat objek tanggal di controller Anda terlebih dahulu:

pengontrol:

function Ctrl($scope)
{
    $scope.date = new Date();
}

melihat:

<div ng-app ng-controller="Ctrl">
    {{date | date:'yyyy-MM-dd'}}
</div>

Contoh JSFiddle

Filter Tanggal Angular Ref

kemalasan
sumber
hai @sloth Saya ingin menggunakan cgi untuk menampilkan waktu sistem saat ini. Bagaimana saya bisa melakukan itu? Atau mungkin? Terima kasih
bleyk
44

Anda juga dapat melakukan ini dengan filter jika Anda tidak ingin harus melampirkan objek tanggal ke cakupan saat ini setiap kali Anda ingin mencetak tanggal:

.filter('currentdate',['$filter',  function($filter) {
    return function() {
        return $filter('date')(new Date(), 'yyyy-MM-dd');
    };
}])

dan kemudian menurut Anda:

<div ng-app="myApp">
    <div>{{'' | currentdate}}</div>
</div>
Nick G.
sumber
5
Dia mungkin juga membuat arahan
arg20
23

Templat

<span date-now="MM/dd/yyyy"></span>

Pengarahan

.directive('dateNow', ['$filter', function($filter) {
  return {
    link: function( $scope, $element, $attrs) {
      $element.text($filter('date')(new Date(), $attrs.dateNow));
    }
  };
}])

Karena Anda tidak dapat mengakses Dateobjek secara langsung dalam template (untuk solusi inline), saya memilih untuk Petunjuk ini. Itu juga membuat Pengontrol Anda bersih dan dapat digunakan kembali.

flori
sumber
19

Nah, Anda bisa melakukannya dengan ekspresi kumis ( {{Date.now() | date:'dd.MM.yyyy HH:mm:ss'}}). Anda hanya perlu menetapkan objek Date to scope di mana Anda ingin mengevaluasi ungkapan ini.

Inilah contoh jsfiddle : jsfiddle

Tapi jangan berharap itu memperbarui nilai secara otomatis. Nilai ini tidak ditonton oleh angular sehingga Anda harus memicu intisari setiap kali Anda ingin memperbaruinya (dengan $ interval misalnya) ... yang merupakan pemborosan sumber daya (dan juga tidak "disarankan" dalam dokumen). Tentu saja Anda dapat menggunakan kombinasi dengan arahan / pengontrol untuk bermain-main dengan ruang lingkup anak saja (selalu lebih kecil daripada rootScope misalnya dan mencerna akan lebih cepat).

JakubKnejzlik
sumber
9

Hanya 2 sen saya jika seseorang menemukan ini :)

Apa yang saya sarankan di sini akan memiliki hasil yang sama dengan jawaban saat ini namun disarankan untuk menulis controller Anda dengan cara yang saya sebutkan di sini.

Referensi gulir ke "Catatan" pertama (Maaf itu tidak memiliki jangkar)

Inilah cara yang disarankan:

Pengendali:

var app = angular.module('myApp', []);   
app.controller( 'MyCtrl', ['$scope', function($scope) {
    $scope.date = new Date();
}]);

Melihat:

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    {{date | date:'yyyy-MM-dd'}}
  </div>
</div>
Tuan H
sumber
2

Anda dapat menggunakan moment()dan format()fungsi dalam AngularJS.

Pengendali:

var app = angular.module('demoApp', []);   
app.controller( 'demoCtrl', ['$scope', '$moment' function($scope , $moment) {
$scope.date = $moment().format('MM/DD/YYYY');
}]);

Melihat:

<div ng-app="demoApp">
  <div ng-controller="demoCtrl">
    {{date}}
  </div>
</div>
nari_atyachari
sumber
2
<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>
nallapagan nallapagan
sumber
1

Berikut adalah contoh jawaban Anda: 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" />

dan kemudian di controller:

$scope.DateOfBirth = new Date();
Mohaimin Moin
sumber
1

Melihat

<div ng-app="myapp">
{{AssignedDate.now() | date:'yyyy-MM-dd HH:mm:ss'}}
</div>

Pengendali

var app = angular.module ('myapp', [])

app.run(function($rootScope){
    $rootScope.AssignedDate = Date;
})
Manish Kumar
sumber
1

Solusi yang mirip dengan salah satu dari @Nick G. dengan menggunakan filter, tetapi buat parameternya bermakna:

Menerapkan filter yang disebut relativedateyang menghitung tanggal relatif terhadap tanggal saat ini oleh parameter yang diberikan sebagai berbeda. Akibatnya, (0 | relativedate)berarti hari ini dan (1 | relativedate)berarti besok.

.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')
  };
}]);

dan html Anda:

<div ng-app="myApp">
    <div>Yesterday: {{-1 | relativedate}}</div>
    <div>Today: {{0 | relativedate}}</div>
    <div>Tomorrow: {{1 | relativedate}}</div>
</div>
tsh
sumber
1

Cara lain untuk melakukannya adalah: Di Kontroler, buat variabel untuk menahan tanggal saat ini seperti yang ditunjukkan di bawah ini:

var eventsApp = angular.module("eventsApp", []);
eventsApp.controller("EventController", function EventController($scope) 
{

 $scope.myDate = Date.now();

});

Dalam tampilan 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>
Sunita
sumber
@Billa, saya telah memperbarui cuplikan kode saya. Saya harap, ini lebih deskriptif sekarang.
Sunita