Angular 引导日期选择器如何显示“MM/dd/yyyy”和“MM/dd/yy”？

Posted 2023-05-07

【中文标题】Angular 引导日期选择器如何显示“MM/dd/yyyy”和“MM/dd/yy”？

【英文标题】：How can Angular bootstrap datepicker display "MM/dd/yyyy" and "MM/dd/yy"?

【发布时间】：2021-07-14 12:53:40

【问题描述】：

我在使用 Angular 引导程序日期选择器时遇到了格式问题。 我希望它显示与我输入时相同的值。 例如：

我输入“01/01/21”，得到的结果是 01/01/21 我输入“01/01/2021”，得到的结果是 01/01/2021

目前当我输入“01/01/21”或“01/01/2021”时，唯一的结果显示为 01/01/2021。

这里是我的源代码：

function directive() 
        return 
            template: '<section class="app-input" ng-show="show">' +
                '<div class="row">' +
                '<div class="small-12 columns">' +
                '<div class="label-wrapper " ng-show="label">' +
                '<label >label <span class="hint">hint</span>' +
                '<span class="pull-right" ng-show="isRequired()"> (*) </span>' +
                '</label>' +
                '</div>' +
                '<div class="input-wrapper ">' +
                '<p ng-mouseenter="hideTooltip()" class="input-group">' +
                '<input ng-blur="checkDate()" type="text" class="form-control" uib-datepicker-popup="MM/dd/yyyy" ng-model="ngModel"' +
                'is-open="popup2.opened" placeholder="mm/dd/yy" data-ng-change="onChange()" datepicker-options="dateOptions"' +
                'ng-required="isRequired()" close-text="Close"/>' +
                '<span class="input-group-btn">' +
                '<button type="button" class="btn btn-default" ng-click="open2()">' +
                '<i class="glyphicon glyphicon-calendar"></i>' +
                '</button>' +
                '</span>' +
                '<a ng-show="showToolTip" style="color:red" uib-tooltip=" Warnning!"> The date your entered not correct ! </a>' +
                '</p>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</section>',
            restrict: 'EAC',
            require: '?ngModel',
            transclude: true,
            replace: true,
            link: postLink,
            scope: 
                label: "=",
                ngModel: "=",
                type: "=",
                placeholder: "=",
                hint: "=",
                bottomhint: "=",
                readonly: "=",
                name: "=",
                setDefault: "=",
                changeEvent: "<",
                disabled: "="
            ,
        ;

谢谢。

【问题讨论】：

或许您应该使用另一个开关来选择和更改格式？

【参考方案1】：

uib-datepicker 接收格式作为日期处理到 uib-datepicker-popup 属性中。

在这种情况下，您可以将其插入一个变量，如下所示

uib-datepicker-popup="vm.dateFormat"

检查您的组件的源代码中的 placeholder 属性，该属性也是一个固定字符串。如果你想将占位符从父组件发送到你的指令，它应该引用一个控制器变量。

您可以在下方查看格式语法

链接参考： http://angular-ui.github.io/bootstrap/#!#datepicker