在角度 JS 中设置日期格式

     2023-05-09     240

关键词:

【中文标题】在角度 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) 

【讨论】:

如何在 HTML 日期输入标签中设置日期格式?

】如何在HTML日期输入标签中设置日期格式?【英文标题】:HowtosetdateformatinHTMLdateinputtag?【发布时间】:2011-10-2203:50:26【问题描述】:我想知道是否可以在html&lt;inputtype="date"&gt;&lt;/input&gt;标签中设置日期格式..... 查看详情

如何在查询中设置 odbc 日期格式

】如何在查询中设置odbc日期格式【英文标题】:Hoetosetodbcdateformatinquery【发布时间】:2018-01-2308:38:13【问题描述】:我已从MsAccess数据库获取数据为PHPJSON格式。我在查询中有通过日期参数。数据库数据类型是日期/时间。查询mm/dd... 查看详情

猫鼬如何在模型中设置日期格式

】猫鼬如何在模型中设置日期格式【英文标题】:mongoosehowtosetdateformatinmodel【发布时间】:2015-08-1013:04:28【问题描述】:我是猫鼬的新手。我使用"Date"作为我的"holidayDate"列的类型。我只想在我的"holidayDate"列中存储日期而不是时... 查看详情

如何在与 SQL 的连接中设置日期格式?

】如何在与SQL的连接中设置日期格式?【英文标题】:HowtosetdateformatinaconnectiontoSQL?【发布时间】:2011-09-0501:21:42【问题描述】:在MicrosoftSQLServerManagementStudio中,调用存储过程后,我可以看到时间在表中有2011-05-2019:56:09的格式。... 查看详情

根据需要在linq查询分配对象中设置日期格式

Created=String.Format("0:M/d/yyyy",cn.Created) 查看详情

以编程方式在小部件中设置 TextClock 的日期格式

】以编程方式在小部件中设置TextClock的日期格式【英文标题】:SetDateFormatOfTextClockInAWidgetProgramatically【发布时间】:2013-08-2619:05:33【问题描述】:我必须设置一个TextClock以在另一个TextClock中显示时间和日期。我希望能够让用户更... 查看详情

在 SQL 表中设置日期格式 dd/mm/yyyy

】在SQL表中设置日期格式dd/mm/yyyy【英文标题】:Setdateformatdd/mm/yyyyinSQLtable【发布时间】:2016-03-2502:19:03【问题描述】:我想以dd/mm/yyyy格式将日期保存在我的数据库中,因为我想在JTable(JavaSE)中导入包含它们的表,并且我想以这... 查看详情

如何在vue js中设置默认日期

】如何在vuejs中设置默认日期【英文标题】:howtosetthedefaultdateofthedayinvuejs【发布时间】:2018-11-1603:54:58【问题描述】:我想在我的日期选择器中默认设置日期。代码:<templatelang="html"><inputtype="date"v-model="date"></template>... 查看详情

如何在 angular.js 中设置日期?

】如何在angular.js中设置日期?【英文标题】:HowtosetDateinangular.js?【发布时间】:2021-08-3023:25:12【问题描述】:我希望maxDate最多可以选择今天,(过去应该可以点击,但明天不行)我选择maxDay和minDay之间的天数最多应该是365天,... 查看详情

如何在 Oracle SQL Developer 中设置自定义日期时间格式?

】如何在OracleSQLDeveloper中设置自定义日期时间格式?【英文标题】:HowcanIsetacustomdatetimeformatinOracleSQLDeveloper?【发布时间】:2011-12-2909:18:42【问题描述】:默认情况下,OracleSQL开发人员将日期值显示为15-NOV-11。我想默认查看时间... 查看详情

在批处理文件中设置日期格式

Nicescriptforformattingdatesinabatchfilewithouthavingthesystemlocalesettingsimpactyourformat@echooffSETLOCALEnableDelayedExpansion for/f"skip=1tokens=1-6delims="%%ain('wmicpathWin32_LocalTimeGetDay^,Hour^,Minute^,Month^,Second^,Year/Format:table')do(IFNOT"%%~f"==""... 查看详情

如何在asp.net core razor pages 2.2中设置日期格式和文化

】如何在asp.netcorerazorpages2.2中设置日期格式和文化【英文标题】:Howtosetdateformatsandcultureinasp.netcorerazorpages2.2【发布时间】:2019-06-2507:33:16【问题描述】:我正在使用Asp.NetCore2.2RazorPages应用程序。我想在应用程序级别设置应用程... 查看详情

如何在linq中设置日期格式“yyyy-MM-dd hh:mm”?

】如何在linq中设置日期格式“yyyy-MM-ddhh:mm”?【英文标题】:Howtosetdateformat"yyyy-MM-ddhh:mm"inlinq?【发布时间】:2016-03-1611:15:57【问题描述】:这是我的代码:varqry=(fromuin_db.ApplicationUsersselectnewUserBroadcastDTO()UserId=u.Id,DateCreated... 查看详情

使用角度服务在多个组件中设置超时

】使用角度服务在多个组件中设置超时【英文标题】:Settingatimeoutinmultiplecomponentswithserviceinangular【发布时间】:2020-10-0714:30:46【问题描述】:我正在尝试使用角度服务在一组组件中设置超时。我试图按照我在网上找到的材料进... 查看详情

Kettle csv导入,在格式错误的行中设置空值

】Kettlecsv导入,在格式错误的行中设置空值【英文标题】:Kettlecsvimport,setnullvalueinrowswithformaterrors【发布时间】:2020-07-2013:04:08【问题描述】:我创建了一个导入作业,它从CSV文件中读取数据并将它们(进行一些更改)保存在Mysq... 查看详情

如何在角度2中设置模板网址

】如何在角度2中设置模板网址【英文标题】:howtosetthetemplateurlinangular2【发布时间】:2017-11-0510:54:33【问题描述】:我使用@angular/cli创建了一个新的Angular应用程序。在那个应用程序模板中已经有appcomponent。在该应用程序组件中... 查看详情

怎么在excel中设置自定义日期格式

1、选中需要是设置的表格区域→右击→选中“设置单元格格式”→选中“数字”标签→“日期”就会有很多日期格式供选择,拖动滚动条寻找需要的类型进行设置即可;2、如果日期格式备选的选项没有满足需要的,可以选择数... 查看详情

如何以角度在 FormArray 中设置值?

】如何以角度在FormArray中设置值?【英文标题】:HowtosetvaluesinaFormArrayinangular?【发布时间】:2022-01-0422:43:10【问题描述】:我正在尝试在内部有一个FormArray的FormGroup中输入值,但我遇到了这个数组的问题,因为数据没有被映射我... 查看详情