在角度 JS 中设置日期格式

Posted 2023-05-09

【中文标题】在角度 JS 中设置日期格式

【英文标题】：Set Date Format in angular JS

【发布时间】：2019-07-08 13:46:12

【问题描述】：

我已经使用 Angular 实现了一个数据表。现在我想要的是，我想将日期格式设置为dd-MM-yyyy

我尝试如下

<td> mp.VFRDATE | date: 'dd-MM-yyyy' </td>
<td> mp.VTODATE | date: 'dd-MM-yyyy' </td>

但它不起作用。

以下是完整代码。

function loadSAPExecutiveGrid(response) 
    var table;
    table = $(assignVendor);
    $(table).empty();
    var datalist = JSON.parse(response);    
    var thead = "<thead><tr><th class='select-checkbox'></th><th>MP Name</th><th>MP Code</th><th>Vendor Name</th><th>Vendor Code</th><th>From Date</th><th>To Date</th><th>Remarks</th></tr></thead>";
    var tbody = "<tbody id='datagrdbody'>";
    table.append(thead);
    table.append(tbody);
    var count = 0;
    if (datalist != null && datalist.length > 0)        
         datalist.forEach(function (dataRow)                
             if (!(dataRow.MP_NAME).trim() == "" || !dataRow.MP_NAME == "   " || !dataRow.MP_NAME == null || !dataRow.MP_NAME == "null" || !dataRow.MP_NAME == undefined) 
                 if (dataRow.VENDORNAME == '' || dataRow.VENDORNAME == null) 
                     dataRow.VENDORNAME = '';
                 
                 if (dataRow.VENDORCODE == '' || dataRow.VENDORCODE == null) 
                     dataRow.VENDORCODE = '';
                 
                 if (dataRow.VFRDATE == '' || dataRow.VFRDATE == null) 
                     dataRow.VFRDATE = '';
                 
                 if (dataRow.VTODATE == '' || dataRow.VTODATE == null) 
                     dataRow.VTODATE = '';
                 
                 if (dataRow.REMARK == '' || dataRow.REMARK == null) 
                     dataRow.REMARK = '';
                 
                 count = count + 1;
                 var tr = "<tr><td class='select-checkbox'></td><td>" + dataRow.MP_NAME + "</td><td>" + dataRow.MP_CODE + "</td><td>" + dataRow.VENDORNAME + "</td><td>" + dataRow.VENDORCODE + "</td><td>" + dataRow.VFRDATE + "</td><td>" + dataRow.VTODATE + "</td><td>" + dataRow.REMARK + "</td></tr>";
                 table.append(tr);
             
             
            );
    

        table.append('</tbody>');
        oTable = $(table).DataTable(
            responsive: true,
            "bDestroy": true,
            scrollX: true,
            paging: true,
            pageResize: true,
            scrollCollapse: true,
            dom: '<"manualFilter"f><"table-responsive3"t><"dataTableInfo"ip>',
            autoWidth: true,
            columnDefs: [
             "width": "3%", "targets": 0 ,
             "width": "10%", "targets": 1 ,
             "width": "10%", "targets": 2 ,
             "width": "20%", "targets": 3 ,
             "width": "10%", "targets": 4 ,
             "width": "9%", "targets": 5 ,
             "width": "9%", "targets": 6 ,
             "width": "29%", "targets": 7 ,
            
                orderable: false,
                targets: 0,
                className: "select-checkbox",
                checkboxes: 
                    selectRow: true
                ,
            ],
            "columns": [
                
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": ''
                ,
                 "data": "MP_NAME" ,
                 "data": "MP_CODE" ,
                 "data": "VENDORNAME" ,
                 "data": "VENDORCODE" ,
                 "data": "VFRDATE" ,
                 "data": "VTODATE" ,
                 "data": "REMARK" ,

            ],
            language: 
                paginate: 
                    previous: "<i class='fa fa-angle-left'></i>",
                    next: "<i class='fa fa-angle-right'></i>"
                
            ,
            select: 
                style: 'multi',
                info: false,
                selector: 'td:first-child'
            ,
            order: [[1, 'asc']]
        );

        $('div.totalRecords span').html(oTable.rows().count());      

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table id="assignVender" class="mp myTable table table-striped table-bordered" cellspacing="0"  ui-jq="dataTable" ui-options="dataTableOpt">

                        <thead>
                            <tr>
                                <th class="select-checkbox"></th>
                                <th>MP Name</th>
                                <th>MP Code</th>
                                <th>Vendor Name</th>
                                <th>Vendor Code</th>
                                <th>From Date</th>
                                <th>To Date</th>
                                <th>Remarks</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="mp in MaintenanceZones">
                                <td></td>
                                <td>mp.MP_NAME</td>
                                <td>mp.MP_CODE</td>
                                <td>mp.REMARK</td>
                                <td>mp.VENDORNAME</td>
                                <td>mp.VENDORCODE</td>
                                <td>mp.VFRDATE</td>
                                <td>mp.VTODATE</td>

                            </tr>

                        </tbody>

请提出问题所在

【参考方案1】：

由于日期格式不正确，可能无法设置日期格式。

表达式

 dateValue | date: 'dd-MM-yyyy' 

可能的 dateValue 选项

 1) dateValue = new Date()                  // date object
 2) dateValue = "2008-09-15T15:53:00+05:00" // date string
 3) dateValue = 1288323625123               // number (timestamp) 
 4) dateValue = "1288323625123"             // string (timestamp)