ng-model을 사용하여 날짜 형식을 지정하는 방법은 무엇입니까?

다음과 같이 정의 된 입력이 있습니다.

<input class="datepicker" type="text" ng-model="clientForm.birthDate" />

페이지의 다른 곳에 표시되도록 조작 된 항목 :

<tr>
    <th>Birth Date</th>
    <td>{{client.birthDate|date:'mediumDate'}}</td>
</tr>

페이지가로드 될 때 생년월일은 Dec 22, 2009. 내 안에 볼 때, <input>로가 표시 것 Tue Dec 22 2009 00:00:00 GMT-0800 (Pacific Standard Time)같아요있는 JS가 렌더링하는 방법입니다Date 문자열로 객체.

첫째, Angular에게 날짜 <input>를 다음과 같이 표시하도록 어떻게 말 12/22/2009합니까? |filters내부 에 적용 할 수없는 것 같습니다 .ng-model속성 .

둘째, 날짜를 편집하자마자 원래 형식으로 유지하더라도 다른 텍스트 ( <td>)는 |date더 이상 필터 를 적용하지 않는 것 같습니다 . 갑자기 입력 텍스트 상자의 형식과 일치하도록 형식이 변경됩니다. |date모델이 변경 될 때마다 필터 를 적용하려면 어떻게해야 합니까?

관련 질문 :

• onchange에서만 실행되도록 지시를 받으려면 어떻게해야합니까?
• 지시문에서 인수에 액세스하는 방법은 무엇입니까?

양식의 사용자 지정 유효성 검사 사용 http://docs.angularjs.org/guide/forms 데모 : http://plnkr.co/edit/NzeauIDVHlgeb6qF75hX?p=preview

포매터와 파서 및 MomentJS를 사용하는 지시문 )

angModule.directive('moDateInput', function ($window) {
    return {
        require:'^ngModel',
        restrict:'A',
        link:function (scope, elm, attrs, ctrl) {
            var moment = $window.moment;
            var dateFormat = attrs.moDateInput;
            attrs.$observe('moDateInput', function (newValue) {
                if (dateFormat == newValue || !ctrl.$modelValue) return;
                dateFormat = newValue;
                ctrl.$modelValue = new Date(ctrl.$setViewValue);
            });

            ctrl.$formatters.unshift(function (modelValue) {
                if (!dateFormat || !modelValue) return "";
                var retVal = moment(modelValue).format(dateFormat);
                return retVal;
            });

            ctrl.$parsers.unshift(function (viewValue) {
                var date = moment(viewValue, dateFormat);
                return (date && date.isValid() && date.year() > 1950 ) ? date.toDate() : "";
            });
        }
    };
});

다음은 매우 편리한 지시문 angular-datetime 입니다. 다음과 같이 사용할 수 있습니다.

<input type="text" datetime="yyyy-MM-dd HH:mm:ss" ng-model="myDate">

또한 입력에 마스크를 추가하고 유효성 검사를 수행합니다.

표준을 활성화하는 간단한 지시문을 만들었습니다. input[type="date"]AngularJS ~ 1.2.16에서 양식 요소가 올바르게 작동하도록 .

이봐: https://github.com/betsol/angular-input-date

그리고 여기에 데모가 있습니다 : http://jsfiddle.net/F2LcY/1/

jquery datepicker를 사용하여 날짜를 선택하고 있습니다. 내 지시문은 날짜를 읽고 json 날짜 형식 (밀리 초 단위)으로 변환하여 ng-model형식화 된 날짜를 표시하는 동안 데이터에 저장하고 ng-model에 json 날짜 (밀리 초 단위)가있는 경우 내 포맷터가 jquery datepicker 형식으로 표시됩니다.

Html 코드 :

<input type="text" jqdatepicker  ng-model="course.launchDate" required readonly />

Angular 지시어 :

myModule.directive('jqdatepicker', function ($filter) {
    return {
        restrict: 'A',
        require: 'ngModel',
         link: function (scope, element, attrs, ngModelCtrl) {
            element.datepicker({
                dateFormat: 'dd/mm/yy',
                onSelect: function (date) {   
                    var ar=date.split("/");
                    date=new Date(ar[2]+"-"+ar[1]+"-"+ar[0]);
                    ngModelCtrl.$setViewValue(date.getTime());            
                    scope.$apply();
                }
            });
            ngModelCtrl.$formatters.unshift(function(v) {
            return $filter('date')(v,'dd/MM/yyyy'); 
            });

        }
    };
});

datepicker를 클래스로 사용했기 때문에 Jquery datepicker 또는 이와 유사한 것을 사용하고 있다고 가정합니다.

moment.js를 전혀 사용하지 않고 순전히 datepicker 및 angularjs 지시문 만 사용하여 원하는 작업을 수행 할 수있는 방법이 있습니다.

이 Fiddle 에서 여기에 예제를 제공했습니다.

여기 바이올린에서 발췌 :

1. Datepicker의 형식이 다르고 angularjs 형식이 다르므로 적절한 일치 항목을 찾아서 컨트롤에서 미리 선택하고 ng-model이 바인딩되는 동안 입력 필드에도 채워 져야합니다. 아래 형식은 'mediumDate'AngularJS 형식과 동일합니다 .

   $(element).find(".datepicker")
             .datepicker({
                dateFormat: 'M d, yy'
             }); 

2. 날짜 입력 지시문에는 사람이 읽을 수있는 날짜 형식을 나타내는 임시 문자열 변수가 있어야합니다.

3. 페이지의 다른 섹션에 걸쳐 새로 고침 이벤트 등을 통해 발생해야 $broadcast하고 $on.

4. 필터를 사용하여 사람이 읽을 수있는 형식으로 날짜를 표현하는 것은 ng-model에서도 가능하지만 임시 모델 변수를 사용합니다.

   $scope.dateValString = $filter('date')($scope.dateVal, 'mediumDate');

저와 대부분의 사용자를 매우 행복하게 만드는 다음 지침을 사용합니다! 구문 분석 및 형식 지정에 순간을 사용합니다. 앞서 언급 한 SunnyShah의 것과 약간 비슷해 보입니다.

angular.module('app.directives')

.directive('appDatetime', function ($window) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attrs, ngModel) {
            var moment = $window.moment;

            ngModel.$formatters.push(formatter);
            ngModel.$parsers.push(parser);

            element.on('change', function (e) {
                var element = e.target;
                element.value = formatter(ngModel.$modelValue);
            });

            function parser(value) {
                var m = moment(value);
                var valid = m.isValid();
                ngModel.$setValidity('datetime', valid);
                if (valid) return m.valueOf();
                else return value;
            }

            function formatter(value) {
                var m = moment(value);
                var valid = m.isValid();
                if (valid) return m.format("LLLL");
                else return value;

            }

        } //link
    };

}); //appDatetime

내 양식에서는 다음과 같이 사용합니다.

<label>begin: <input type="text" ng-model="doc.begin" app-datetime required /></label>
<label>end: <input type="text" ng-model="doc.end" app-datetime required /></label>

이는 타임 스탬프 (1970 년 이후 밀리 초)를 doc.begin및에 바인딩합니다 doc.end.

관심있는 사람을위한 Angular2 + :

<input type="text" placeholder="My Date" [ngModel]="myDate | date: 'longDate'">

DatePipe Angular 의 필터 유형으로 .

서버가 수정하지 않고 날짜를 반환하도록하고 자바 스크립트가 뷰 마사지를 수행하도록하는 것을 선호합니다. 내 API는 SQL Server에서 "MM / DD / YYYY hh : mm : ss"를 반환합니다.

자원

angular.module('myApp').factory('myResource',
    function($resource) {
        return $resource('api/myRestEndpoint/', null,
        {
            'GET': { method: 'GET' },
            'QUERY': { method: 'GET', isArray: true },
            'POST': { method: 'POST' },
            'PUT': { method: 'PUT' },
            'DELETE': { method: 'DELETE' }
        });
    }
);

제어 장치

var getHttpJson = function () {
    return myResource.GET().$promise.then(
        function (response) {

            if (response.myDateExample) {
                response.myDateExample = $filter('date')(new Date(response.myDateExample), 'M/d/yyyy');
            };

            $scope.myModel= response;
        },
        function (response) {
            console.log(response.data);
        }
    );
};

myDate 유효성 검사 지시어

angular.module('myApp').directive('myDate',
    function($window) {
        return {
            require: 'ngModel',
            link: function(scope, element, attrs, ngModel) {

                var moment = $window.moment;

                var acceptableFormats = ['M/D/YYYY', 'M-D-YYYY'];

                function isDate(value) {

                    var m = moment(value, acceptableFormats, true);

                    var isValid = m.isValid();

                    //console.log(value);
                    //console.log(isValid);

                    return isValid;

                };

                ngModel.$parsers.push(function(value) {

                    if (!value || value.length === 0) {
                         return value;
                    };

                    if (isDate(value)) {
                        ngModel.$setValidity('myDate', true);
                    } else {
                        ngModel.$setValidity('myDate', false);
                    }

                    return value;

                });

            }
        }
    }
);

HTML

<div class="form-group">
    <label for="myDateExample">My Date Example</label>
    <input id="myDateExample"
           name="myDateExample"
           class="form-control"
           required=""
           my-date
           maxlength="50"
           ng-model="myModel.myDateExample"
           type="text" />
    <div ng-messages="myForm.myDateExample.$error" ng-if="myForm.$submitted || myForm.myDateExample.$touched" class="errors">
        <div ng-messages-include="template/validation/messages.html"></div>
    </div>
</div>

template / validation / messages.html

<div ng-message="required">Required Field</div>
<div ng-message="number">Must be a number</div>
<div ng-message="email">Must be a valid email address</div>
<div ng-message="minlength">The data entered is too short</div>
<div ng-message="maxlength">The data entered is too long</div>
<div ng-message="myDate">Must be a valid date</div>

Angularjs UI 부트 스트랩 angularjs UI 부트 스트랩 을 사용할 수 있으며 날짜 유효성 검사도 제공합니다.

<input type="text"  class="form-control" 
datepicker-popup="{{format}}" ng-model="dt" is-open="opened" 
min-date="minDate" max-date="'2015-06-22'"  datepickeroptions="dateOptions"
date-disabled="disabled(date, mode)" ng-required="true"> 

컨트롤러에서 날짜를 표시하려는 형식을 datefilter

$ scope.formats = [ 'dd-MMMM-yyyy', 'yyyy / MM / dd', 'dd.MM.yyyy', 'shortDate']로 지정할 수 있습니다.