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모델이 변경 될 때마다 필터 를 적용하려면 어떻게해야 합니까?
관련 질문 :
양식의 사용자 지정 유효성 검사 사용 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 에서 여기에 예제를 제공했습니다.
여기 바이올린에서 발췌 :
Datepicker의 형식이 다르고 angularjs 형식이 다르므로 적절한 일치 항목을 찾아서 컨트롤에서 미리 선택하고 ng-model이 바인딩되는 동안 입력 필드에도 채워 져야합니다. 아래 형식은
'mediumDate'AngularJS 형식과 동일합니다 .$(element).find(".datepicker") .datepicker({ dateFormat: 'M d, yy' });날짜 입력 지시문에는 사람이 읽을 수있는 날짜 형식을 나타내는 임시 문자열 변수가 있어야합니다.
페이지의 다른 섹션에 걸쳐 새로 고침 이벤트 등을 통해 발생해야
$broadcast하고$on.필터를 사용하여 사람이 읽을 수있는 형식으로 날짜를 표현하는 것은 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.
서버가 수정하지 않고 날짜를 반환하도록하고 자바 스크립트가 뷰 마사지를 수행하도록하는 것을 선호합니다. 내 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>
관심있는 사람을위한 Angular2 + :
<input type="text" placeholder="My Date" [ngModel]="myDate | date: 'longDate'">
DatePipe Angular 의 필터 유형으로 .
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">
in controller can specify whatever format you want to display the date as datefilter
$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
참고URL : https://stackoverflow.com/questions/14474555/how-to-format-a-date-using-ng-model
'IT story' 카테고리의 다른 글
| Python의 내장 sort () 메서드 정보 (0) | 2020.09.05 |
|---|---|
| Android에서 @SmallTest, @MediumTest 및 @LargeTest 주석의 목적은 무엇입니까? (0) | 2020.09.05 |
| PowerShell에서 "%"(퍼센트)는 무엇을합니까? (0) | 2020.09.05 |
| .NET에서 파일이 잠금 해제 될 때까지 기다립니다. (0) | 2020.09.05 |
| Android : Activity.runOnUiThread와 View.post의 차이점은 무엇입니까? (0) | 2020.09.05 |