Angularjs 如果第二次单击时未选择日期，则日期选择器清除“日期选择器”文本框中的选定值，并发出日期验证

我在Angular应用程序中实现了一个带有验证的日期选择器

HTML:

<div class="control-group">
                <label class="control-label" for="reservation.reservedFrom">Reserved From<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <!--<input type="text" class="span4" style="width:150px" name="reservedFrom" placeholder="Reserved From" ng-model="reservation.reservedFrom"  ng-change='checkErr()'
                           validator="required" required-error-message="Date is required"  id="startDate122" />-->
                    <input class="form-control" type="text" name="startDate" core-date-picker ng-model="reservation.reservedFrom" >
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>

                    <span style="color:red">{{errMessageFrom}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->
            <div class="control-group">
                <label class="control-label" for="reservation.reservedTill">Reserved Till<sup>*</sup></label>
                <div class="controls input-group date" data-provide="datepicker">
                    <!--<input type="text" style="width:150px" class="span4" name="reservedTill" placeholder="Reserved Till" data-ng-model="reservation.reservedTill"
                           validator="required" required-error-message="Date is required" valid-method="watch" id="endDate" ng-change='checkErr()' />-->
                    <input class="form-control" type="text" name="EndDate" core-date-picker ng-model="reservation.reservedTill"  ng-change='checkErr()' id="endDate1">
                    <div class="input-group-addon">
                        <span class="glyphicon glyphicon-th"></span>
                    </div>
                    <span  style="color:red">{{errMessageTo}}</span>

                </div> <!-- /controls -->
            </div> <!-- /control-group -->

我将解释我正在谈论的情景

第1期-我从日历中选择了一个日期，该日期正确显示在日期选择器文本框中。然后，我再次单击日期选择器以选择不同的日期，但后来我决定不更改当前选择的日期，因此我在日历之外单击，第二次没有选择日期。因为我第二次没有选择日期，所以日期选择器从文本框中清除了第一次选择的日期，使其为空。我不想那样。我希望第一个选择的日期保持不变，除非选择了不同的日期（不是空值）

第2期-在验证日期时，我无法将所选日期与当前日期进行比较。如果所选日期小于当前日期，则应显示错误消息。但在我的例子中，如果我选择与今天相同的日期，则会显示错误。它应该允许我选择当天

我使用了引导日期选择器。如果需要更多信息，请告诉我

---

提前谢谢。

我一眼就注意到

 link: function (scope, element, attrs, ngModelCtrl) {
            $(element[0]).datepicker().on("change", function (e) {
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(element.val());
                });
            });
        }

火应该改变吗？我从第1期中了解到，无论是否有更改，它都会启动。你有没有想过在家里检查一下

$(element[0]).datepicker().on("change", function (e) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(element.val());
                    });
                });

试一试

只要稍微检查一下element.val（）就可以了

对于第二期，我不认为你可以这样比较日期

new Date()

返回

2016年10月20日星期四14:54:17 GMT+0800（马来半岛标准时间）

您的

startDateStr

注意到

newdate（）

有几秒和几毫秒

如果您只想比较日期、月份和年份，即

（DD/MM/yyyy）

，我建议您先转换日期，然后再进行比较

或者像这样单独比较

startDate.getDate() < new Date().getDate() // To compare a day 

使用=比较两个日期对象时，将通过valueOf对其进行比较，这与日期的getTime相同

但是当您使用==时，它们是相同类型的两个不同对象，因此返回false

因此，在您的情况下，^比较这两个日期。正确的方法是

 var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');

    var today = moment().format('D MMM, YYYY');
    if (startDate != undefined && startDate.getTime() < today.getTime()) {

    }

但是

第一个为false是false，因为您正在比较两个对象。第二种方法相当于比较数值。毕竟

new Date().getTime()
>1477011127232

---

A或将非常有用。我不知道如何创建一个Plunkr或摆弄链接控制器和指令等。。。抱歉

核心日期选择器

这是您针对日期选择器的自定义指令吗？我在你的代码中没有看到你正在使用UI引导日期选择器。我正在使用引导日期选择器。不确定UI引导日期选择器的区别是什么。我照原样拿到了这份申请表。你认为我应该改用UI日期选择器吗？我尝试从html标记中删除“core date picker”（核心日期选择器），验证变得不起作用。请检查附带的屏幕截图：它将显示我的日期格式。我还尝试了scope.$apply（函数（）{if（element.val（））{ngModelCtrl.$setViewValue（element.val（））；}这没什么区别。@Phoenix就像我说的，从你的屏幕截图上也看得很清楚。

startDateStr

是

10/21/2016

，你使用

新日期（startDate）创建
startDate

。因此，

startDate

将没有小时：分钟和秒。这就是为什么startDate的

HH:MM:SS

是

00:00:00

。但是，

new Date（）

将创建当前日期，其中包含小时、分钟和秒。

startDate

和new Date（）无法比较，除非您从

新日期（）中取出秒、分钟和小时数（）

好的，我将按照您的建议使用时间进行验证。第二次单击后清除日期如何？仍然相同：（请检查屏幕截图）。

startDate.getDate() < new Date().getDate() // To compare a day 

var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');

var today = moment().format('D MMM, YYYY');
if (startDate != undefined && startDate < today) {

}

 $scope.$watch("reservation.reservedFrom", function (newValue, oldValue) {
         if(newValue && newValue !==  oldValue) {
             $scope.checkErr();
         }

        });


        $scope.$watch("reservation.reservedTill", function (newValue, oldValue) {
            if(newValue && newValue !==  oldValue) {
               $scope.checkErr();
            }

        });

 var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');

    var today = moment().format('D MMM, YYYY');
    if (startDate != undefined && startDate.getTime() < today.getTime()) {

    }

new Date() === new Date();
> false

new Date().getTime() === new Date().getTime()
>true;

new Date().getTime()
>1477011127232