Angular.js 및 HTML5 날짜 입력 값 -- Firefox가 날짜 입력에 읽을 수 있는 날짜 값을 표시하도록 하려면 어떻게 해야 합니까?

Angular.js 및 HTML5 날짜 입력 값 -- Firefox가 날짜 입력에 읽을 수 있는 날짜 값을 표시하도록 하려면 어떻게 해야 합니까?

HTML5 날짜 입력이 있는데 기본적으로는 모델의 날짜 속성 값으로 설정해 주셨으면 합니다.로케일에 그것을 것 i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i i.dd/MM/yyyy.

만지작거리다

입력은 다음과 같이 설정합니다.

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

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

을 왜 (에 넣어야 잘 모르겠습니다.yyyy-MM-ddChrome이 여전히 내 로케일을 기반으로 포맷하고 있다면 그건 다른 질문입니다.)

파이어폭스.은, 의 「」과 관계가 합니다.date거의 할 수 에 모델에서는 모든 문자열을 지정할 수 있습니다.value기본 입력에는 긴 날짜 문자열이 계속 표시됩니다.

★★★를 ng-model="date"입력 태그에서 파이어폭스는 내가 주는 어떤 값이라도 멋지게 표시합니다.입력이 디폴트 값에 영향을 미칠 수밖에 없는 모델이라고는 생각하지 않았습니다.

보편적으로 되지 않는 한 텍스트 그 입력이 아닌 알 수 .2013-08-05

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

---

주의: 사용자에 의해 편집된 후에는 당연히 검증을 수행하여 각 날짜 입력 값을 적절한 값으로 변환합니다.Date건 not. 이 있는지는 하지 않지만,을 위해 날짜 모든 브라우저에서 입니다.이것이 질문과 관련이 있는지는 잘 모르겠지만, 만약을 위해 공개하고 있습니다.왜냐하면 입력 포맷이 모든 브라우저에서 동일하게 동작하기 위해서는 확실히 일관성이 있어야 하기 때문입니다.물론 크롬이 입력 포맷을 결정하는 것도 문제지만...

문제는 이 존재하면 무시된다는 것입니다.

Firefox를 하지 않음)type="date"는 모든 값을 문자열로 변환합니다.가 date가 되다Date이 아닌, 를 들어 다른합니다.dateString2번으로 하다

<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 ,
• 인공적인 것이 아니라 사용할 수 있다dateStringvariable(이 주제에 대한 문서 참조).

제가 이렇게 쓴 것에 해 주세요.yyyy-MM-dd JavaScript에서 이기 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 ,
• 사용자가 입력한 날짜가 올바른지 확인합니다.

값이 yyy-MM-dd로 지정되어야 하는 이유는 무엇입니까?

HTML 5의 입력 유형 = 날짜 사양에 따라 값은 형식이어야 합니다.yyyy-MM-dd한 「」의 을 에,full-dateRFC 3339에 규정되어 있습니다.

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

Angularjs를 지원하지 .datediscloss.discloss.

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

FF를 지원하지 .date최소 버전 24.0의 입력 유형을 지정합니다.이 정보는 여기서 얻을 수 있습니다.따라서 현재로선 타입이 be인 입력을 사용한다면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);

입력 타입의 날짜도 OK입니다.

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를 함께 사용하기 위해 종료했습니다.

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

도움이 되길 바랍니다!!

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