วิธีการจัดรูปแบบวันที่ในเชิงมุม

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

ผลลัพธ์: 12/15/2014

แก้ไข
หากคุณกำลังใช้รูปแบบสตริงของวันที่ "2014-12-19 20:00:00" รูปแบบสตริง (ผ่านจากแบ็กเอนด์ PHP) จากนั้นคุณควรแก้ไขโค้ดให้เป็นหนึ่งใน: https://stackoverflow.com / a / 27616348/1904479

การเพิ่มเพิ่มเติม
จาก javascript คุณสามารถตั้งรหัสเป็น:

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

ในที่สุดในคอนโทรลเลอร์ของฉันฉันประกาศวิธีที่สร้างวันที่จากค่าอินพุต (ซึ่งเห็นได้ชัดว่ามีการแยกวิเคราะห์ด้วยโครเมียมออก 1 วัน):

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

ดังนั้นคุณมีมัน หากต้องการดูการทำงานทั้งหมดโปรดดูที่พลั่วเกอร์ต่อไปนี้: http://plnkr.co/edit/8MVoXNaIDW59kQnfpaWW?p=previewโชคดีที่สุด!

สิ่งนี้จะได้ผล:

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

หมายเหตุ: เมื่อคุณแทนที่วันที่ / มิลลิวินาทีที่เหลืออยู่จะถูกแปลงเป็น foramt ที่ให้ไว้

ดูdateAPI เชิงมุม: AngularJS API: วันที่

การใช้งาน:

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

Exampe:

รหัส:

 <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 จากรหัสฝั่งเซิร์ฟเวอร์ของคุณไปยังฝั่งไคลเอ็นต์

และใช้ไวยากรณ์ด้านล่าง -

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

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

หลังจากดูโซลูชันทั้งหมดข้างต้นแล้วสิ่งต่อไปนี้เป็นวิธีแก้ปัญหาที่เร็วที่สุดสำหรับฉัน หากคุณกำลังใช้วัสดุเชิงมุม:

 <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 เพื่อพิมพ์วันที่ (จากคำตอบนี้เปลี่ยนรูปแบบของ md-datepicker ในวัสดุเชิงมุม )

$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'];

        });

ที่นี่ชื่อคอนโทรลเลอร์คือ "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

ตกลงปัญหาก็น่าจะมาจากบรรทัดนี้https://github.com/angular-ui/ui-date/blob/master/src/date.js#L106

ที่จริงแล้วบรรทัดนี้คือการเชื่อมโยงกับ jQuery UI ซึ่งควรเป็นที่สำหรับแทรกรูปแบบข้อมูล

อย่างที่คุณเห็นในvar optsนั้นไม่มีคุณสมบัติที่dateFormatมีค่าจากรูปแบบ ng-date ตามที่คุณสามารถระบุได้

อย่างไรก็ตามคำสั่งมีอย่างต่อเนื่องที่เรียกว่าการเพิ่มคุณสมบัติuiDateConfigopts

โซลูชันที่ยืดหยุ่น (แนะนำ):

จากตรงนี้คุณจะเห็นว่าคุณสามารถแทรกตัวเลือกบางตัวในการควบคุมตัวแปรคอนโทรลเลอร์ด้วยตัวเลือก 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"
    };
});

โซลูชันฮาร์ดโค้ด:

หากคุณไม่ต้องการทำซ้ำขั้นตอนนี้ตลอดเวลาให้เปลี่ยนค่าเป็นuiDateConfigin date.js เป็น:

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

ฉันมีปัญหาเดียวกันและเป็นความคิดเห็นข้างต้นคิดว่าจะต้องมีวิธีการดั้งเดิมใน JavaScript สิ่งที่new Date(valueofdate)ส่งกลับวัตถุวันที่

แต่ตรวจสอบในhttp://www.w3schools.com/js/js_date_formats.aspส่วนที่บอกว่าเป็นศูนย์นำหน้า วันที่จากสตริงตัวอย่างเช่น echo จาก PHP ต้องเป็นดังนี้:

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

สิ่งนี้จะส่งผ่านสตริงตัวอย่างเช่น: '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

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

ใช้สิ่งนี้ควรทำงานได้ดี :) ฟิลด์ reviewData และ dateValue สามารถเปลี่ยนแปลงได้ตามที่คุณสามารถเหลือพารามิเตอร์ไว้เหมือนเดิม

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

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