如何格式化Jquery-ui日期答案

【问题标题】：How to format Jquery-ui date如何格式化Jquery-ui日期
【发布时间】：2014-10-15 13:26:19
【问题描述】：

我找到了一个 jquery-ui 角度日期选择器指令来使用。除了使用数据库中的日期填充格式时，它工作正常。现在它显示 2014-08-10T00:00:00。我需要 mm-dd-yy 格式。同样，当我打开日期选择器时，默认值是今天的日期，我需要它显示在数据库中的日期。由于设计和外观，我不能使用 angular-ui datepicker。谢谢 plunkr

app.directive("datepicker1", function () {
    return {
        restrict: "A",
        require: "ngModel",
        link: function (scope, elem, attrs, ngModelCtrl) {
            var updateModel = function (dateText) {
                // call $apply to bring stuff to angular model
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(dateText);
                });
            };

            var options = {
                dateFormat: "dd-mm-yy",
                // handle jquery date change
                onSelect: function (dateText) {
                    updateModel(dateText);
                }
            };

            // jqueryfy the element
            elem.datepicker(options);
        }
    }
});

 <input type="text" style="width:150px" ng-model="currentItem.ChangeOrderDate" datepicker1 />

【问题讨论】：

您可以在$scope.date = '2014-08-10T00:00:00';:stackoverflow.com/questions/20131553/…stackoverflow.com/questions/20131553/…处格式化控制器中的日期
无需重新发明轮子github.com/angular-ui/ui-date
由于视觉原因不能使用 ui-date

标签： jquery angularjs jquery-ui date

【解决方案1】：

如果你需要使用 jQuery（而不是我也推荐的 angular-ui），你必须采取几个步骤：

实现ngModelCtrl.$render 函数。它需要将模型转换为用户可呈现的值。这很容易使用$.datepicker.formatDate() (ref)：

ngModelCtrl.$render = function() {
    var d = new Date(ngModelCtrl.$viewValue), txt;
    if( isNaN(d.getTime()) ) {
        txt = "";
    }
    else {
        txt = $.datepicker.formatDate("dd-mm-yy", d);
    }
    elem.val(txt);
};

here 的详细信息 - 检查“自定义控件”

演示文稿，即<h1>Selected date: {{date}}</h1> 部分，必须对日期使用显示过滤器。幸运的是 Angular 为我们提供了date 过滤器：
```
<h1>Selected date: {{date | date:'dd-MM-yyyy' }}</h1>
```

我还建议在控制器中存储一个日期对象，所以：

$scope.date = new Date('2014-08-10T00:00:00');

和：

var updateModel = function (dateText) {
    // call $apply to bring stuff to angular model
    scope.$apply(function () {
        ngModelCtrl.$setViewValue($.datepicker.parseDate(FORMAT, dateText));
    });
};

实现此功能的工作人员：http://plnkr.co/edit/J1acskcSh4xXI3kan32W

【讨论】：