Angularjs и moment.js - angularjs не отображает правильную дату - PullRequest
Новая
       14

Angularjs и moment.js - angularjs не отображает правильную дату

0 голосов
/ 26 апреля 2018

Я использую Bootstrap 4 в проекте. Я пытаюсь заставить Angularjs работать с moment.js, но не могу.

Я использую следующий HTML-код: 

<input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">

В файле mainControler.js, который я создал, у меня есть следующее: 

$scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');

Затем, когда я пытаюсь отобразить его с помощью следующего кода: 

<span ng-bind-html="theDateToBeDisplayed"></span>

Всегда возвращает сегодняшнюю дату, а не ту, которую я выбрал в указателе даты.

mainControler.js: 

app.controller('MainController', function($scope) {

  $scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');

});

HTML: 

<div ng-app="myApp" ng-controller="MainController">
  <div>
    <input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control">
  </div>
  <div>
    <span ng-bind-html="theDateToBeDisplayed "></span>
  </div>
</div>

Что я делаю не так?

Заранее спасибо за любые предложения.

Ответы [ 2 ]

0 голосов
/ 26 апреля 2018

Вы можете позвонить на function и изменить variable при изменении даты в date-picker

Я добавил,

  • ng-change="changeDate()" в HTML , который вызывает changeDate функцию при изменении даты.
  • Эта функция назначит дату в theDateToBeDisplayed и отобразит в UI

var app = angular.module('miniapp', []).controller('myCtrl', function($scope) {
    	$scope.changeDate = function(){
      	$scope.theDateToBeDisplayed = moment($scope.theDate).format('DD/MM/YYYY');
      }   
});
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-app="miniapp">
    <div ng-controller="myCtrl">
        <div>
            Select a date from Date picker:
            <input type="date" name="somename" ng-model="theDate" max="3000-12-31" min="1000-01-01" class="form-control" ng-change="changeDate()">
            <br>
            <br>
          <span>{{theDateToBeDisplayed}}</span>
        </div>
    </div>    
</div>
  </body>

</html>

Вот рабочая ДЕМО

0 голосов
/ 26 апреля 2018

Не уверен, когда вы инициализируете переменную theDateToBeDisplayed в области, но я предполагаю, что она устанавливается только один раз, на основе пустого $scope.theDate, что заставляет момент вернуться к сегодняшней дате. Это значение не пересчитывается автоматически при изменении даты.

Возможные решения (лично я предпочитаю 2):

  1. Когда вы меняете $scope.theDate, убедитесь, что у вас есть наблюдатель, который снова устанавливает $scope.theDateToBeDisplayed.

  2. Создайте фильтр (например, dateFormat), который вызывает moment(value).format(...) и используйте: 

    <span>{{theDate | dateFormat }}</span>
...