AngularJS - แปลงวันที่ในคอนโทรลเลอร์


114

ใครช่วยแนะนำวิธีแปลงวันที่จาก1387843200000รูปแบบนี้เป็นรูปแบบนี้24/12/2013 ภายในคอนโทรลเลอร์ของฉันได้ไหม

เพียงแค่ FYI วันที่ของฉันจะถูกจัดเก็บในลักษณะนี้และเมื่อเชื่อมโยงกับรูปแบบการแก้ไขที่มีinput type="date"ฟิลด์จะไม่ถูกเติมเลย

#Plunker สาธิตที่นี่

EditCtrl

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

@JustinNiessner - วันที่ของฉันถูกเก็บไว้ในลักษณะนี้และเมื่อการผูกกับรูปแบบการแก้ไขที่มีinput type="date"ฟิลด์จะไม่ถูกเติม
Iladarsda

1
คุณสามารถใช้ตัวกรองเวลาวันที่แบบ angularjs moment.js - 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

หมายเหตุ: การใช้ pattern = "" กับ type = "date" ดูไม่เป็นมาตรฐาน แต่ดูเหมือนว่าจะทำงานในลักษณะที่คาดไว้ใน Chrome 31


สวัสดีฉันพยายามใช้งานตามที่แนะนำแล้ว แต่มันไม่ได้ผลสำหรับฉัน
Mukun

สวัสดีฉันพยายามใช้งานตามที่แนะนำแล้ว แต่มันไม่ได้ผลสำหรับฉัน คำตอบของฉันจาก spring webservice คือ {"basicPersonalInfo": {"empNo": "04005001", "dob": 490645800000}, "communicationInfo": null} ฉันต้องแสดงในช่องป้อนวันที่ bootstrap / HTML5 ฉันใช้ตัวกรองในคอนโทรลเลอร์ของฉันเช่น $ scope.basicInfo = BasicInformationService.query (); $ scope.basicInfo. $ prom.then (function (data) {$ scope.basicInfo.basicPersonalInfo.dob = $ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd");}); ขอความช่วยเหลือใด ๆ
Mukun

1
โอเคฉันเปลี่ยนการจัดรูปแบบในคอนโทรลเลอร์เป็นแบบนี้และดูเหมือนจะใช้งานได้ไม่แน่ใจว่าถูกต้องหรือไม่ $ scope.basicInfo.basicPersonalInfo.dob = วันที่ใหม่ ($ filter ('date') (data.basicPersonalInfo.dob, "yyyy-MM-dd"));
Mukun

วันที่ของฉันเป็นแบบนี้จาก 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
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.