如何将 datepicker 返回的日期格式转换为不同的格式？答案

【问题标题】：How do I convert datepicker returned date format to a different format?如何将 datepicker 返回的日期格式转换为不同的格式？
【发布时间】：2016-04-29 09:01:33
【问题描述】：

抱歉标题不好，我不知道如何更好地表达它。我会尽量解释我需要什么。

我目前正在用 Javascript 制作一个任务管理器（一个待办事项列表），您可以在其中创建任务，为它们设置时间表，然后您将拥有一个列表，其中包含您需要执行的所有任务以及相应的时间表每个任务（开始和结束日期）。

我正在使用 Angular.js 和 Angular Material 来制作我的 UI。我有 Angular Material 的日期选择器。这是我用来获取日期值的代码：

angular.module('KBTM_App', ['ngMaterial']).controller('AppCtrl', function($scope) {
$scope.myDate1 = new Date();

...

// This is where I get the date value
var initial_date_1 = angular.element(document.querySelector('[ng-controller="AppCtrl"]')).scope().myDate1;

问题是这个日期选择器以这种格式返回日期：“2016-04-29T08:36:10.027Z”，这是我不想要的。我想要一个更正常的格式，比如“DD-MM-YYYY”。

我尝试使用 Moment.js 转换日期格式，但没有成功。这是我用于此的代码：

var initial_date = moment(initial_date_1, "YYYY-MM-DD'T'HH:MM:SS.SSS'Z'").format("DD-MM-YYYY");

然后我会将该日期存储在 localStorage 中：

// Get the other dates already in the list
var initial_dates = get_initial_dates();

// Adds the new date to that list
initial_dates.push(initial_date);

// Stores those dates in the localStorage
localStorage.setItem('initial_date_db', JSON.stringify(initial_dates));

在尝试将新任务添加到任务列表时，使用该代码我得到“Invalid date”。

抱歉，帖子太长了！

感谢能帮助我的人。

【问题讨论】：

您是否已经尝试过 date-format="" 选项???
恐怕不行。我是一个 Javascript 初学者，所以我在网上搜索，发现大多数人都建议使用 moment.js 来完成这样的事情。
@T.Ferreira 你试过我的答案了吗？

标签： javascript angularjs datepicker date-format angular-material

【解决方案1】：

您可以使用以下代码使用角度材料日期选择器转换html中的日期格式。

 data-ng-value="myDate1  | date : 'shortDate'"

【讨论】：

【解决方案2】：

使用角度日期过滤器来格式化日期。参考链接angular date

var  initial_date = $filter('date')($scope.myDate1, "dd-MM-yyyy");

在你的控制器主模块中注入 $filter。

【讨论】：

【解决方案3】：

处理日期的最佳方式是使用momentjs，并且有一个特殊的 AJS 指令可用。 angular-moment 您可以查看[momentjs][2] 官方文档以获取详细信息。您必须添加 angular-moment 作为依赖注入才能轻松使用 moment。 https://github.com/urish/angular-moment#instructions-for-using-moment-timezone-with-webpack

【讨论】：