IT story

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

hot-time 2020. 6. 23. 07:24
반응형

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


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

참조 : ui-date

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

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

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/


입력 필드가없는 경우 올바른 형식으로 문자열 날짜를 표시하려면 간단히 다음을 수행하십시오.

<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를 참조하십시오.


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

{{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

이것은 정확히 당신이 요구하는 것이 아니지만-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!


이것은 작동합니다 :

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

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


Angular dateAPI 참조 : AngularJS API : 날짜


각도- date필터 :

용법:

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


시험 :

암호:

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

결과:

10/29/2010

나는 필터를 사용한다

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

그때

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

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

and use below syntax -

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

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

After looking at all the above solutions, the following was the quickest solution for me. If you are using angular-material:

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

To set the format:

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');
    };
});

Edit: You also need to set the parseDate for typing in a date (from this answer Change format of md-datepicker in Angular Material)

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

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

        });

Here Controller name is "myController" and app name is "myApp".

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

            </li>

        </ul>
    </div>

Result will look like this :- * 10-29-2010 * 01-03-2013


Ok the issue it seems to come from this line:
https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106.

Actually this line it's the binding with jQuery UI which it should be the place to inject the data format.

As you can see in var opts there is no property dateFormat with the value from ng-date-format as you could espect.

Anyway the directive has a constant called uiDateConfig to add properties to opts.

The flexible solution (recommended):

From here you can see you can insert some options injecting in the directive a controller variable with the jquery ui options.

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

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

The hardcoded solution:

If you don't want to repeat this procedure all the time change the value of uiDateConfig in date.js to:

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

I had the same issue and as the above comments, thought there must be a native method in JavaScript. The thing is new Date(valueofdate) returns a Date object.

But, check in http://www.w3schools.com/js/js_date_formats.asp, the part that says leading zero. A date from a String, for example an echo from PHP, must be like:

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

This will pass a String, for example: '1999-3-3' and JavaScript will do the parsing to an object with right format with

$scope.valueofdate = new Date(valueofdate);

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

Link to PHP for date formats: http://www.w3schools.com/php/func_date_date_format.asp.


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

Use this should work well. :) The reviewData and dateValue fields can be changes as per your parameter rest can be left same


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


// $scope.dateField="value" in ctrl
<div ng-bind="dateField | date:'MM/dd/yyyy'"></div>

참고URL : https://stackoverflow.com/questions/22392328/how-to-format-date-in-angularjs

반응형