Angular.js 및 HTML5 날짜 입력 값 — Firefox에서 날짜 입력에 읽을 수있는 날짜 값을 표시하는 방법은 무엇입니까?

Angular.js 및 HTML5 날짜 입력 값 — Firefox에서 날짜 입력에 읽을 수있는 날짜 값을 표시하는 방법은 무엇입니까?

---

HTML5 날짜 입력이 있고 그 값을 기본적으로 모델의 날짜 속성 값으로 설정하고 싶습니다. Chrome이 어쨌든 내 로케일에 따라 결정하는 것처럼 보이므로 형식에 대해 너무 까다 롭지 않지만 이상적으로는 형식이 일관되게 dd/MM/yyyy.

깡깡이

이것이 내 입력을 설정하는 방법입니다.

<input type="date" 
       ng-model="date" 
       value="{{ date | date: 'yyyy-MM-dd' }}" />

이것은 Chrome에서 잘 작동하며 기본적으로 다음이 표시됩니다.

( yyyy-MM-ddChrome이 여전히 내 로케일을 기반으로 형식을 지정하는 경우 값을에서 제공해야하는 이유를 여전히 이해하지 못하지만 다른 질문입니다.)

내 문제는 Firefox가 내가 지정한 방식으로 날짜 값을 표시하지 않는 것입니다. 속성 date에 거의 모든 문자열을 지정할 수 value있고 기본적으로 입력에서 긴 날짜 문자열을 볼 수 있기 때문에 입력을 모델에 바인딩하는 것과 관련이 있다고 생각합니다 .

ng-model="date"입력 태그에서 제거하면 Firefox는 내가 지정한 값을 멋지게 표시합니다. 입력이 바인딩 된 모델이 실제로 기본값에 영향을 미치지 않는다고 생각 했습니까?

날짜 입력이 보편적으로 지원되지 않는다는 것을 이해하지만 간단한 텍스트 입력으로 돌아 가야하기 때문에 2013-08-05angular의 날짜 필터에 지정된대로 값이 단순히으로 표시되지 않는 이유를 알 수 없습니다 .

그렇다면 Firefox가 날짜 입력에서 형식화 된 값을 받아들이도록하려면 어떻게해야합니까?

---

참고 사용자가 편집 한 후에는 물론 유효성 검사를 수행하고 각 날짜 입력 값을 적절한 Date개체 로 변환 합니다. 이것이 질문과 관련이 있는지 확실하지 않지만 입력 형식이 모든 브라우저에서 동일하게 작동하려면 날짜 변환이 일관 적이어야하기 때문에 혹시라도 거기에 넣으십시오. 물론 Chrome이 입력 형식을 결정하는 데 문제가 있습니다.

---

문제가 있다는 것입니다 value때 무시됩니다 ng-model존재한다 .

현재를 지원하지 않는 Firefox type="date"는 모든 값을 문자열로 변환합니다. 당신이 (올바르게) 문자열이 아닌 date실제 Date객체가 되기를 원 하기 때문에 최선의 선택은 예를 들어 다른 변수를 dateString만든 다음 두 변수를 연결하는 것입니다.

<input type="date" ng-model="dateString" />

function MainCtrl($scope, dateFilter) {
    $scope.date = new Date();

    $scope.$watch('date', function (date)
    {
        $scope.dateString = dateFilter(date, 'yyyy-MM-dd');
    });

    $scope.$watch('dateString', function (dateString)
    {
        $scope.date = new Date(dateString);
    });
}

Fiddle

실제 구조는 데모 용입니다. 특히 다음과 같은 경우 자신의 지시문을 만드는 것이 좋습니다.

• 이외의 형식 허용 yyyy-MM-dd,
• 인공 변수 보다는 NgModelController#$formatters및 사용할 수 있어야 합니다 ( 이 주제에 대한 문서 참조 ).NgModelController#$parsersdateString

yyyy-MM-ddJavaScript Date개체 에서 직접 지원하는 형식 이므로을 사용 했습니다 . 다른 것을 사용하려면 직접 변환 해야합니다 .

---

편집하다

다음은 깨끗한 지시문을 만드는 방법입니다.

myModule.directive(
    'dateInput',
    function(dateFilter) {
        return {
            require: 'ngModel',
            template: '<input type="date"></input>',
            replace: true,
            link: function(scope, elm, attrs, ngModelCtrl) {
                ngModelCtrl.$formatters.unshift(function (modelValue) {
                    return dateFilter(modelValue, 'yyyy-MM-dd');
                });

                ngModelCtrl.$parsers.unshift(function(viewValue) {
                    return new Date(viewValue);
                });
            },
        };
});

Fiddle

이는 기본 지침이며, 예를 들어 여전히 개선의 여지가 많습니다.

• 대신 사용자 지정 형식을 사용할 수 있습니다 yyyy-MM-dd.
• 사용자가 입력 한 날짜가 올바른지 확인하십시오.

---

값이 yyyy-MM-dd로 제공되어야하는 이유는 무엇입니까?

받는 따르면 입력 타입 = 최신 스펙 HTML 5의 경우, 값이 형식이어야 yyyy-MM-dd유효한 형식 걸리므 full-date로 지정되어있는 RFC3339 하면서

full-date = date-fullyear "-" date-month "-" date-mday

지시문 입력이 date유형을 지원하지 않기 때문에 Angularjs와 관련이 없습니다 .

Firefox가 날짜 입력에서 형식화 된 값을 받아들이도록하려면 어떻게해야합니까?

FF는 date최소 버전 24.0까지의 입력 유형을 지원하지 않습니다 . 여기 에서이 정보를 얻을 수 있습니다 . 따라서 지금 당장은 유형이 dateFF 인 입력을 사용 하면 텍스트 상자는 전달한 값을 사용합니다.

내 제안은 Angular-ui의 Timepicker 를 사용할 수 있고 날짜 입력에 HTML5 지원을 사용하지 않는 것입니다.

---

이것을 사용할 수 있으며 잘 작동합니다.

<input type="date" class="form1"  
  value="{{date | date:MM/dd/yyyy}}"
  ng-model="date" 
  name="id" 
  validatedateformat 
  data-date-format="mm/dd/yyyy"
  maxlength="10" 
  id="id" 
  calendar 
  maxdate="todays"
  ng-click="openCalendar('id')">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar" ng-click="openCalendar('id')"></span>
    </span>
</input>

---

제 경우에는 다음과 같이 해결했습니다.

$scope.MyObject = // get from database or other sources;
$scope.MyObject.Date = new Date($scope.MyObject.Date);

입력 유형 날짜는 괜찮습니다

---

ng-change를 사용했습니다.

Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

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

app.controller('DateController', ['$rootScope', '$scope',
  function($rootScope, $scope) {
    function init() {
      $scope.startDate = new Date();
      $scope.endDate = $scope.startDate.addDays(14);
    }


    function load() {
      alert($scope.startDate);
      alert($scope.endDate);
    }

    init();
    // public methods
    $scope.load = load;
    $scope.setStart = function(date) {
      $scope.startDate = date;
    };
    $scope.setEnd = function(date) {
      $scope.endDate = date;
    };

  }
]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-controller="DateController">
  <label class="item-input"> <span class="input-label">Start</span>
    <input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
  </label>
  <label class="item-input"> <span class="input-label">End</span>
    <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
  </label>
  <button button="button" ng-disabled="planningForm.$invalid" ng-click="load()" class="button button-positive">
    Run
  </button>
</div <label class="item-input"> <span class="input-label">Start</span>
<input type="date" data-ng-model="startDate" ng-change="setStart(startDate)" required validatedateformat calendar>
</label>
<label class="item-input"> <span class="input-label">End</span>
  <input type="date" data-ng-model="endDate" ng-change="setEnd(endDate)" required validatedateformat calendar>
</label>

---

MEAN.JS (Angular.js, 부트 스트랩, Express.js 및 MongoDb)에 대한 완전한 기능 지시문을 확인하십시오.

@Blackhole의 응답에 따라 mongodb 및 express와 함께 사용하도록 방금 완료했습니다.

몽구스 커넥터에서 날짜를 저장하고로드 할 수 있습니다.

그것이 도움이되기를 바랍니다 !!

angular.module('myApp')
.directive(
  'dateInput',
  function(dateFilter) {
    return {
      require: 'ngModel',
      template: '<input type="date" class="form-control"></input>',
      replace: true,
      link: function(scope, elm, attrs, ngModelCtrl) {
        ngModelCtrl.$formatters.unshift(function (modelValue) {
          return dateFilter(modelValue, 'yyyy-MM-dd');
        });

        ngModelCtrl.$parsers.push(function(modelValue){
           return angular.toJson(modelValue,true)
          .substring(1,angular.toJson(modelValue).length-1);
        })

      }
    };
  });

JADE / HTML :

div(date-input, ng-model="modelDate")

---

Angular Material Design을 사용하는 경우 거기에서 datepicker 구성 요소를 사용할 수 있으며 Firefox, IE 등에서 작동합니다.

https://material.angularjs.org/latest/demo/datepicker

그러나 공정한 경고-개인적인 경험은 이것에 문제가 있으며 현재 재 작업되고 있다는 것입니다. 여길 봐:

https://github.com/angular/material/issues/4856

참고 URL : https://stackoverflow.com/questions/18061757/angular-js-and-html5-date-input-value-how-to-get-firefox-to-show-a-Readable-d