Разобрать дату и время для ввода в AngularJS

0

Мне нужно инициализировать дату ввода в datetime в определенном формате. Как я должен это делать.

В настоящее время я использую:

<input type="datetime-local" ng-model="myDate" ng-init="myDate = '2015-10-03T03:42:00.000+0000'"/>

но это дает ошибку:

Error: [ngModel:datefmt] Expected '2015-10-03T03:42:00.000+0000' to be
a date
  • 1
    нужно разобрать дату и инициализировать
Теги:
datetime

2 ответа

3
Лучший ответ

Вы должны написать функцию для преобразования строки даты в действительную дату:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js">      </script>
  <script type="text/javascript">
  (function () {
     'use strict';
     var app = angular.module( 'app', [] );

     app
       .controller( 'AppController', ['$scope', function( $scope ) {
          console.log( $scope.myDate );
          $scope.parseDate = function ( date ) {
            return new Date( Date.parse( date ) );
          }
       }]);
     })();
 </script>
 </head>
 <body ng-app="app">
   <div ng-controller="AppController">
   <input type="datetime-local" ng-model="myDate" ng-init="myDate = parseDate('2015-10-03T03:42:00.000+0000')"/>
   </div>
 </body>
</html>

codepen: http://codepen.io/anon/pen/MajGaj

Поделиться
3

Это потому, что это не действительная дата в соответствии с Angular. Проверьте документ на входе [дата] для их отметки о проверке даты.
И здесь описание ошибки. В основном это потому, что он не может проверить "myDate" как дату и ее получение в виде строки.

Проблема в том, что в области не существует Date(), поэтому basically rewriting Date as method:

$scope.Date = function(arg){
   return new Date(arg);
};

А затем вы можете вызвать его из ng-init. Ниже приведен пример кода, который я пытался проверить.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-datetimelocal-input-directive-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.0/angular.min.js"></script>



</head>
<body ng-app="dateExample">
  <script>
  angular.module('dateExample', [])
    .controller('DateController', ['$scope', function($scope) {
      $scope.example = {
        value: new Date(2010, 11, 28, 14, 57),
        myDate: new Date(2010, 11, 28, 14, 57)
      };
      $scope.Date = function(arg){
       return new Date(arg);
        };
    }]);
</script>
<form name="myForm" ng-controller="DateController as dateCtrl">
  <label for="exampleInput">Pick a date between in 2013:</label>
  <input type="datetime-local" id="exampleInput" name="input" ng-model="example.myDate"
  ng-init="example.myDate = Date('Tue Feb 18 2013 00:00:00 GMT+0200 (CEST)')"
      placeholder="yyyy-MM-ddTHH:mm:ss" min="2001-01-01T00:00:00" max="2013-12-31T00:00:00" required />
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
        Required!</span>
    <span class="error" ng-show="myForm.input.$error.datetimelocal">
        Not a valid date!</span>
  </div>
  <tt>value = {{example.value | date: "yyyy-MM-ddTHH:mm:ss"}}</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
</form>
</body>
</html>
Поделиться
  • 0
    ng-init = "myDate = new Date ('' 2015-10-03T03: 42: 00.000 + 0000 '')" ... Выше также происходит сбой при преобразовании его в дату ...
  • 0
    @SanTosh проверьте отредактированный ответ. Я надеюсь, что это работает для вас.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню