angularjs에서 날짜 형식을 지정하는 방법


143

날짜를로 형식화하고 싶습니다 mm/dd/yyyy. 나는 다음을 시도했지만 그중 아무것도 나를 위해 작동하지 않습니다. 누구든지 이것을 도울 수 있습니까?

참조 : ui-date

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" /> 

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

1
ui-date-format="mm/dd/yyyy"완전히 제거하려고 했습니까 ? 이 옵션이없는 기본 동작은 원하는 것 같습니다.
Lukas

moment.js를 사용해 보셨습니까?
Cétia

아니요. moment.js를 시도하지 않았습니다. 내 서버가 Json 문자열 20140313T00 : 00 : 00을 반환합니다. html5 입력 유형 날짜와 ui-date-format을 모두 시도했습니다. ui-date-format을 제거하면 문자열이며 형식을 지정합니다.
user16

사용 $formatters하고 $parsers이 대답은 내 비슷한 문제를 해결했다.
Ross Rogers

javascript뿐만 아니라 html로 필터를 사용할 수도 있습니다. stackoverflow.com/a/27615392/1904479
Kailas

답변:


204

Angular.js에는 내장 날짜 필터가 있습니다.

데모

// in your controller:
$scope.date = '20140313T00:00:00';

// in your view, date property, filtered with date filter and format 'MM/dd/yyyy'
<p ng-bind="date | date:'MM/dd/yyyy'"></p>

// produces
03/13/2014

날짜 필터의 소스에서 지원되는 날짜 형식 볼 수 있습니다 .

편집 :

datepicker에서 올바른 형식을 얻으려고하는 경우 (datepicker를 사용하거나 포맷터를 사용하려는 경우 명확하지 않은 경우) 지원되는 형식 문자열은 다음과 같습니다. https://api.jqueryui.com/datepicker/


1
서버가 '20140313T00 : 00 : 00을 반환하고 다음과 같은 입력으로 mm / dd / yyyy 형식으로 표시하려고합니다. <input type = date "ng-model ="
mydate

내 답변이 왜 다운되었는지 확실하지 않습니다. 이 답변은 Angular의 문서에서 거의 그대로 사용됩니다. jQueryUI datepicker 형식 문자열에 대한 언급은 질문에 사용되는 모듈이 ui-date이므로 jQuery 및 jQueryUI에 대한 종속성이 있기 때문입니다. 답에 부정확하거나 오도 된 것은 없습니다.
Jim Schubert

jQuery UI 링크가 형식 문자열에 올바른 것으로 생각하지 않습니다. docs.angularjs.org/api/ng/filter/date 가 더 정확한 것으로 보입니다.
TrueWill

@TrueWill OP는 특히 jQuery datepicker를 사용하는 ui-date에 대해 묻습니다. 내 게시물의 첫 번째 링크는 각도에서 지원하는 형식 문자열이있는 소스 코드에 연결됩니다.
Jim Schubert

@ JimSchubert 이것은 내 날짜 문자열 '2013-11-11 00:00:00'이며 변환되지 않습니다 | 날짜 : 'longdate', 제안 사항이 있습니까?
alphapilgrim

97

입력 필드가없는 경우 적절한 형식으로 문자열 날짜를 표시하려는 경우 다음을 수행하면됩니다.

<label ng-bind="formatDate(date) |  date:'MM/dd/yyyy'"></label>

그리고 js 파일에서 다음을 사용하십시오.

    // @Function
    // Description  : Triggered while displaying expiry date
    $scope.formatDate = function(date){
          var dateOut = new Date(date);
          return dateOut;
    };

이것은 문자열의 날짜를 자바 스크립트의 새로운 날짜 객체로 변환하고 날짜를 MM / dd / yyyy 형식으로 표시합니다.

출력 : 2014 년 12 월 15 일

편집
"2014-12-19 20:00:00"문자열 형식 (PHP 백엔드에서 전달)의 문자열 날짜를 사용하는 경우 https://stackoverflow.com 의 코드로 코드를 수정해야합니다. / a / 27616348 / 1904479

추가
자바 스크립트에서 코드를 다음과 같이 설정할 수 있습니다.

$scope.eqpCustFields[i].Value = $filter('date')(new Date(dateValue),'yyyy-MM-dd');

이미 날짜가있는 경우 다음 코드를 사용하여 현재 시스템 날짜를 얻을 수 있습니다.

$scope.eqpCustFields[i].Value = $filter('date')(new Date(),'yyyy-MM-dd');

날짜 형식에 대한 자세한 내용은 https://docs.angularjs.org/api/ng/filter/date를 참조하십시오.


27

나는 이것을 사용하고 있으며 잘 작동하고 있습니다.

{{1288323623006 | date:'medium'}}: Oct 29, 2010 9:10:23 AM
{{1288323623006 | date:'yyyy-MM-dd HH:mm:ss Z'}}: 2010-10-29 09:10:23 +0530
{{1288323623006 | date:'MM/dd/yyyy @ h:mma'}}: 10/29/2010 @ 9:10AM
{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}: 10/29/2010 at 9:10AM

JS Date 객체를 전달하면 작동하지 않습니다. 어떤 제안이 있습니까?
Panshul

날짜가 밀리 초이고 날짜가 날짜 형식 인 날짜 형식에 대해서만 작동합니다. 따라 w3schools.com/js/js_date_formats.asp
라빈 드라

18

이것은 정확히 당신이 요구하는 것이 아니지만-html로 날짜 입력 필드를 만들 수 있습니다.

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

그런 다음 사용하는 페이지에 이것을 인쇄하십시오.

<span ng-bind="convertToDate(myDate) | date:'medium'"></span>

마지막으로 내 컨트롤러에서 입력 값에서 날짜를 만드는 방법을 선언했습니다 (크롬에서는 하루 만에 파싱됩니다).

$scope.convertToDate = function (stringDate){
  var dateOut = new Date(stringDate);
  dateOut.setDate(dateOut.getDate() + 1);
  return dateOut;
};

그래서 당신은 그것을 가지고 있습니다. 작동하는 모든 것을 보려면 다음 플 런커를 참조하십시오. http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=preview .Best of luck!


11

이것은 작동합니다 :

{{ oD.OrderDate.replace('/Date(','').replace(')/','') | date:"MM/dd/yyyy" }}

참고 :이를 교체하면 남은 날짜 / 밀리가 주어진 시간으로 변환됩니다.


어떤 이유로 내 필드는 / Date (99999) / 형식으로되어 있습니다. 왜 그런지 아십니까?
안토니오 코레

9

Angular dateAPI 참조 : AngularJS API : 날짜


각도- date필터 :

용법:

{{ date_expression | date  [: 'format']  [: 'timezone' ] }}


시험 :

암호:

 <span>{{ '1288323623006' | date:'MM/dd/yyyy' }}</span>

결과:

10/29/2010

7

필터를 사용 합니다

.filter('toDate', function() {
  return function(items) {
    return new Date(items);
  };
});

그때

{{'2018-05-06 09:04:13' | toDate | date:'dd/MM/yyyy hh:mm'}}

3

서버 측 코드에서 클라이언트 측으로 UTC 날짜 형식을 전달하십시오.

아래 구문을 사용하십시오-

 {{dateUTCField  +'Z' | date : 'mm/dd/yyyy'}}

 e.g. dateUTCField = '2018-01-09T10:02:32.273' then it display like 01/09/2018

1

위의 모든 솔루션을 살펴본 후 다음이 가장 빠른 솔루션이었습니다. 각도 재질을 사용하는 경우 :

 <md-datepicker ng-model="member.reg_date" md-placeholder="Enter date"></md-datepicker>

형식을 설정하려면

app.config(function($mdDateLocaleProvider) {
    $mdDateLocaleProvider.formatDate = function(date) {
        // Requires Moment.js OR enter your own formatting code here....
        return moment(date).format('DD-MM-YYYY');
    };
});

편집 : 날짜 입력을 위해 parseDate를 설정해야합니다 (이 답변 에서 Angular Material의 md-datepicker 형식 변경 )

$mdDateLocaleProvider.parseDate = function(dateString) {
    var m = moment(dateString, 'DD/MM/YYYY', true);
    return m.isValid() ? m.toDate() : new Date(NaN);
};

1
var app=angular.module('myApp',[]);
        app.controller('myController',function($scope){         
              $scope.names = ['1288323623006','1388323623006'];

        });

여기서 컨트롤러 이름은 "myController"이고 앱 이름은 "myApp"입니다.

<div ng-app="myApp" ng-controller="myController">
        <ul>
            <li ng-repeat="x in names">
                {{x | date:'mm-dd-yyyy'}}

            </li>

        </ul>
    </div>

결과는 다음과 같습니다 :-* 10-29-2010 * 01-03-2013


0

다음 줄에서 나온 문제를 확인하십시오 :
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106 .

실제로이 줄은 jQuery UI와의 바인딩이며 데이터 형식을 주입해야합니다.

보시다시피 ng-date-format 값을 가진 var opts속성이 없습니다 dateFormat.

어쨌든 지시문에는 uiDateConfig속성을 추가하기 위해 호출되는 상수 가 있습니다 opts.

유연한 솔루션 (권장) :

에서 여기에 당신은 당신이 JQuery와 UI를 옵션으로 지시 컨트롤러 변수에 주입 일부 옵션을 삽입 할 수 있습니다 볼 수 있습니다.

<input ui-date="dateOptions" ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />

myAppModule.controller('MyController', function($scope) {
    $scope.dateOptions = {
        dateFormat: "dd-M-yy"
    };
});

하드 코딩 된 솔루션 :

이 절차를 항상 반복하지 않으려면 uiDateConfigdate.js 의 값을 다음 과 같이 변경하십시오 .

.constant('uiDateConfig', { dateFormat: "dd-M-yy" })

0

나는 같은 문제가 있었고 위의 의견과 마찬가지로 JavaScript에는 기본 방법이 있어야한다고 생각했습니다. 일은 new Date(valueofdate)Date 객체를 반환합니다.

그러나 0을 나타내는 부분 인 http://www.w3schools.com/js/js_date_formats.asp를 확인 하십시오 . 문자열의 날짜 (예 : PHP의 에코)는 다음과 같아야합니다.

$valueofdate = date('Y-n-j',strtotime('theStringFromQuery'));

예를 들어 String을 전달하면 '1999-3-3'JavaScript는 다음 과 같이 올바른 형식으로 객체를 구문 분석합니다.

$scope.valueofdate = new Date(valueofdate);

<input ui-date ui-date-format="mm/dd/yyyy" ng-model="valueofdate" />
<input type="date" ng-model="valueofdate" />

날짜 형식에 대한 PHP 링크 : http://www.w3schools.com/php/func_date_date_format.asp .


0

ng-bind="reviewData.dateValue.replace('/Date(','').replace(')/','') | date:'MM/dd/yyyy'"

이것을 사용하면 잘 작동합니다. :) reviewData 및 dateValue 필드는 매개 변수 나머지가 동일하게 유지 될 수 있으므로 변경 될 수 있습니다


0
{{convertToDate  | date :  dateformat}}                                             
$rootScope.dateFormat = 'MM/dd/yyyy';

1
답변과 같은 줄로 댓글을 올리는 이유는 무엇입니까? 그리고 당신의 대답은 전혀 코드가 아니며 설명이 전혀 없습니다.
Pochmurnik

-1
// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.