AngularJS-컨트롤러에서 날짜 변환


114

누구 든지이 1387843200000형식의 날짜를 24/12/2013 컨트롤러 내부 에서 변환하는 방법을 제안 해 주 시겠습니까?

참고로 내 날짜는 이런 식으로 저장되며 input type="date"필드 를 사용하여 양식을 편집하는 바인딩 이 전혀 채워지지 않을 때.

여기 #Plunker 데모.

편집 Ctrl

app.controller("EditCtrl", [ "$scope", "$filter", "db" function ($scope, $filter, db){

    // this gets me an item object
    var item = db.readItem();

    // item date = 1387843200000
    // this returns undefined 
    item.date = $filter('date')(date[ item.date, "dd/MM/yyyy"]);

}]);

Edit.html-템플릿

<form name="editForm" class="form-validate">

        <div class="form-group">
            <label for="date">Event date.</label>
            <input type="date" class="form-control" ng-model="event.date" id="date" required />
        </div>

        <a href="#/" class="btn btn-danger ">Cancel</a>
        <button id="addEvent" class="btn btn-primary pull-right" ng-disabled="isClean() || editForm.$invalid" ng-click="saveEvent()">Save event.</button>

    </form>

1
컨트롤러에서 변환해야하는 이유는 무엇입니까? 표시 가능한 값만 필요한 경우 날짜 필터를 사용하여보기의 날짜 형식을 지정할 수 있습니다.
Justin Niessner 2013

@JustinNiessner - 내 날짜 이런 식으로 저장됩니다 및 함께 편집 양식에 바인딩 할 때 input type="date"필드가 채워되지 않는
Iladarsda

1
moment.js angularjs 날짜 시간 필터를 사용할 수 있습니다 -github.com/urish/angular-moment
virender

답변:


212
item.date = $filter('date')(item.date, "dd/MM/yyyy"); // for conversion to string

http://docs.angularjs.org/api/ng.filter:date

그러나 HTML5 type = "date"를 사용하는 경우 ISO 형식 yyyy-MM-dd를 사용해야합니다.

item.dateAsString = $filter('date')(item.date, "yyyy-MM-dd");  // for type="date" binding


<input type="date" ng-model="item.dateAsString" value="{{ item.dateAsString }}" pattern="dd/MM/YYYY"/>

http://www.w3.org/TR/html-markup/input.date.html

참고 : type = "date"와 함께 pattern = ""을 사용하는 것은 비표준으로 보이지만 Chrome 31에서 예상대로 작동하는 것으로 보입니다.


안녕하세요, 제안 된대로 구현하려고했지만 작동하지 않습니다.
Mukun 2014 년

안녕하세요, 제안 된대로 구현하려고했지만 작동하지 않습니다. 봄 웹 서비스의 내 응답은 { "basicPersonalInfo": { "empNo": "04005001", "dob": 490645800000}, "communicationInfo": null}입니다. 내 부트 스트랩 / HTML5 날짜 입력 필드에 표시해야합니다. $ scope.basicInfo = BasicInformationService.query (); 같은 컨트롤러에서 필터를 사용했습니다. $ scope.basicInfo. $ promise.then (function (data) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ( 'date') (data.basicPersonalInfo.dob, "yyyy-MM-dd");}); 어떤 도움에 감사드립니다
Mukun

1
ok 컨트롤러의 형식을 이와 같이 변경했는데 올바른 방법인지 확실하지 않은 것 같습니다. $ scope.basicInfo.basicPersonalInfo.dob = new Date ($ filter ( 'date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun 2014 년

내 날짜는 API DateTime : "2017/12/15"에서 다음과 같이오고 있지만 {{M.DateTime | date : 'dd-MM-yyyy'}} 날짜 형식이 변경되지 않습니다. 표현식 내에서 형식을 지정하려면 어떻게하나요?
Vishal Singh

16

filter.js를 만들고이를 재사용 가능하게 만들 수 있습니다.

angular.module('yourmodule').filter('date', function($filter)
{
    return function(input)
    {
        if(input == null){ return ""; }
        var _date = $filter('date')(new Date(input), 'dd/MM/yyyy');
        return _date.toUpperCase();
    };
});

전망

<span>{{ d.time | date }}</span>

또는 컨트롤러

var filterdatetime = $filter('date')( yourdate );

Angular js의 날짜 필터링 및 형식 지정.


1
: AngularJS와에 내장 된 날짜 필터 이미 것 같다 docs.angularjs.org/api/ng/filter/date
AlikElzin-kilaka

1

여기의 모든 솔루션은 실제로 모델을 입력에 바인딩하지 않습니다.을 다시 개체에 dateAsString저장 하도록 변경해야하기 때문입니다 date(양식이 제출 된 후 컨트롤러에서).

바인딩 효과가 필요하지 않고 입력에 표시하기 위해

간단한 것은 다음과 같습니다.

<input type="date" value="{{ item.date | date: 'yyyy-MM-dd' }}" id="item_date" />

그런 다음 원하는 경우 컨트롤러에서 다음과 같이 편집 한 날짜를 저장할 수 있습니다.

  $scope.item.date = new Date(document.getElementById('item_date').value).getTime();

주의 : 컨트롤러에서 이것이 작동하려면 item변수 를 선언해야 합니다 $scope.item.


1

Javascript로 제안합니다.

var item=1387843200000;
var date1=new Date(item);

그리고 date1은 날짜입니다.


예, 타임 스탬프를 날짜로 변환하려는 위치에 있습니다
macha devendher 2016
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.