如果在第二次点击时没有选择日期并发出验证日期，则日期选择器将从日期选择器文本框中清除所选值 [英] Date Picker clears the selected value from date picker text box if a date is not selected on second click and issue with validation of date

查看：141
本文介绍了如果在第二次点击时没有选择日期并发出验证日期，则日期选择器将从日期选择器文本框中清除所选值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述



HTML：

我已经在我的Angular应用程序中实施了一个带有验证的日期选择器> < div class =control-group> 
< label class =control-labelfor =reservation.reservedFrom>保留From< sup> *< / sup>< / label> 
< div class =controls input-group datedata-provide =datepicker> 
<！ - < input type =textclass =span4style =width：150pxname =reservedFromplaceholder =Reserved Fromng-model =reservation.reservedFromng -change ='checkErr（）'
 validator =requiredrequired-error-message =需要日期id =startDate122/>  - > 
< input class =form-controltype =textname =startDatecore-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-labelfor =reservation.reservedTill>保留Till< sup> * / sup>< / label> 
< div class =controls input-group datedata-provide =datepicker> 
<！ - < input type =textstyle =width：150pxclass =span4name =reservedTillplaceholder =Reserved Tilldata-ng-model =reservation.reservedTill 
 validator =requiredrequired-error-message =需要日期valid-method =watchid =endDateng-change ='checkErr（）'/>  - > 
< input class =form-controltype =textname =EndDatecore-date-picker ng-model =reservation.reservedTillng-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  - >

控制器：

 code> myApp.controller（'editReservationController'，''''''''''''''''''''''' 
函数（$ scope，$ filter，reservationResolved，pocResolved，accountResolved，reservationServices，$ location，$ state）{
 $ scope.reservation = new Object（）; 
 $ scope.accounts = accountResolved.data; 
 $ scope.pocs = pocResolved.data; 
 $ scope.reservation.employee = reservationsResolved.data; 
 
 
 
 
 
 $ scope.updateReservation = function（）{
 var from = $ scope.reservation.reservedFrom; 
 var till = $ scope.reservation.reservedTill; 
 if（$ scope.editReservationForm。$ valid&& $ scope.checkErr（））{
 
 var from = $ scope.reservation.reservedFrom; 
 var till = $ scope.reservation.reservedTill; 
 
 // var t = $ scope.checkErr（）; 
 
 // TODO：正确修复
 $ scope.reservation.reservedTill =''; 
 $ scope.reservation.reservedFrom =''; 
 
 $ scope.reservation.reservedFrom = $（'＃startDate'）。val（）; 
 $ scope.reservation.reservedTill = $（'＃endDate'）。val（）; 
 
 reservedServices.updateReservation（$ scope.reservation）.then（function（result）{
 $ scope.data = result.data; 
 if（！result.data.error ）{
 $ state.transitionTo（'employeeTalentPool'，{
 id：$ state.params.id 
}）; 
} 
}）; 
} 
}; 
 $ scope.cancel = function（）{
 $ location.path（/ reservations）; 
}; 
 
 $ scope。$ watch（reservation.reservedFrom，function（newValue，oldValue）{
 $ scope.checkErr（）; 
 
}）; 
 
 
 $ scope。$ watch（reservation.reservedTill，function（newValue，oldValue）{
 $ scope.checkErr（）; 
 
 }）; 
 $ scope.getCurrentDate = function（）{
 var utcDate = new Date（）; 
 var isoExtendedDate = utcDate.toISOString（）; 
 var isoSimpleDate = isoExtendedDate.split（T）[0]; 
 return isoSimpleDate; 
} 
 $ scope.checkErr = function（）{
 
 var startDateStr = $ scope.reservation.reservedFrom; 
 var endDateStr = $ scope.reservation.reservedTill; 
 
 var startDate; 
 if（startDateStr！= undefined）{
 startDate = new Date（startDateStr）; 
} 
 
 var endDate; 
 if（endDateStr！= undefined）{
 endDate = new Date（endDateStr）; 
} 
 $ scope.errMessageFrom =''; 
 $ scope.errMessageTo =''; 
 
 var myDate = new Date（）; //将此设置为您的日期，以时区为准。 
 var utcDate = myDate.toUTCString（）; 
 
 
 
 
 if（startDate！= undefined&& startDate< new Date（））{
 $ scope.errMessageFrom ='开始日期应大于或等于现在。 
返回false; 
} 
 if（endDate！= undefined&& new Date（endDate）< new Date（））{
 $ scope.errMessageTo ='结束日期应大于或等于到现在
返回false; 
} 
 if（startDate！= undefined&& endDate！= undefined&& endDate< = startDate）{
 $ scope.errMessageTo =结束日期必须在开始之后天。; 
返回false; 
} 
返回true; 
}; 
}]）;

App.js：

  // Date Picker 
 myApp.directive（'coreDatePicker'，function（$ compile）{
 return {
 restrict：'A'，
 require ：'ngModel'，
 compile：function（element，attrs）{
 $（element [0]）。datepicker（{
 autoclose：true，
 format：dd / mm / yyyy
}）; 
 
返回this.link; 
}，
链接：function（scope，element，attrs，ngModelCtrl）{
 $（element [0]）。datepicker（）。on（change，function（e）{
 scope。$ apply（function（）{
 ngModelCtrl。$ setViewValue（element.val ））; 
}）; 
}）; 
} 
}; 
}）;

我将解释我在说的情景。



问题1 - 我从日历中选择了日期，并在日期选择器文本框中正确显示。然后我再次点击日期选择器以选择其他日期，但是我决定不更改当前选择的日期，因此我在第二次未选择日期之前点击了日历。由于我没有第二次选择日期，日期选择器从文本框中清除首选的日期，使其为空。我不希望发生这种情况。除非选择了不同的日期（不是空值），否则我希望第一选择的日期保持在此位置。



问题2 - 验证日期，我比较选择的日期与当前日期有困难。如果选择的日期小于当前日期，则应显示错误消息。但是在我的情况下，如果我选择与今天相同的日期，则会显示错误。我应该允许我选择当天。



我已经使用了Bootstrap-datepicker。如果需要更多信息，请通知我。



提前感谢

解决方案

快速浏览我注意到，

 链接：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 [0]）。datepicker（）。on（change，function（e）{
 scope。$ apply（function（）{
 if（element.val ））{
 ngModelCtrl $ setViewValue（element.val（））; 
} 
}）; 
}）;

只需稍微检查一下元素的元素。 p>

对于问题二，我不认为你可以比较这个日期。

  new Date（）

返回


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


你的 startDateStr



注意到 new Date（）有几秒钟和毫秒。



如果您只想比较（DD / MM / yyyy）我建议您转换您的日期，然后才能比较。



或单独比较

  startDate.getDate（）< new Date（）。getDate（）//比较一天

更好的选择我建议时刻。 Github 。

  var startDate = moment（startDateStr，'MM-DD-YYYY'）。format（'MMMM D'）; 
 
 var today = moment（）。format（'D MMM，YYYY'）; 
 if（startDate！= undefined&& startDate< today）{
 
}

更新



您是否尝试将支票移到



$ watch（reservation.reservedFrom，function（newValue，oldValue）{
if（newValue&& newValue！== oldValue）{
$ scope.checkErr（）;
}

}）;


$ scope。$ watch（reservation.reservedTill，function（newValue，oldValue）{
if（newValue& amp; newValue！== oldValue）{
$ scope.checkErr（）;
}

}）;

当您使用< =或> =来比较两个日期对象时，将通过valueOf进行比较，这与getTime for Date相同。



但是当你使用==时，它们是两个不同的对象，因此它返回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（））{
 
} 
  pre> 
 
 
这些说明采取这里。您可以检查链接以获取更多解释。
 
 
 
  getTime 将日期转换为基本等价的时期/可以转换的数字值。  new Date（）是一个对象，新日期（'10 / 20/2016'）和对象A不能等于对象b。要了解更多，您可以在浏览器控制台上尝试。
  new Date（）=== new Date（）; 
>假
  
但
 code> new Date（）。getTime（）=== new Date（）。getTime（）
> true; 
  
第一个是false是false，因为你正在比较两个对象。第二个等价于与数值比较。 afterall 
  new Date（）。getTime（）
> 1477011127232 
  
 
I have implemented a date picker with validations in my Angular App.



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 -->

Controller :
myApp.controller('editReservationController', ['$scope', '$filter', 'reservationResolved', 'pocResolved', 'accountResolved', 'reservationServices', '$location', '$state',
    function ($scope, $filter, reservationResolved, pocResolved, accountResolved, reservationServices, $location, $state) {
        $scope.reservation = new Object();
        $scope.accounts = accountResolved.data;
        $scope.pocs = pocResolved.data;
        $scope.reservation.employee = reservationResolved.data;





        $scope.updateReservation = function () {
            var from = $scope.reservation.reservedFrom;
            var till = $scope.reservation.reservedTill;
            if ($scope.editReservationForm.$valid && $scope.checkErr()) {

                var from = $scope.reservation.reservedFrom;
                var till = $scope.reservation.reservedTill;

                //var t = $scope.checkErr();

                //TODO: fix it properly
                $scope.reservation.reservedTill = '';
                $scope.reservation.reservedFrom = '';

                $scope.reservation.reservedFrom = $('#startDate').val();
                $scope.reservation.reservedTill = $('#endDate').val();

               reservationServices.updateReservation($scope.reservation).then(function (result) {
                        $scope.data = result.data;
                        if (!result.data.error) {
                            $state.transitionTo('employeeTalentPool', {
                                id: $state.params.id
                            });
                        }
                    });   
            }
        };
        $scope.cancel = function () {
            $location.path("/reservations");
        };

        $scope.$watch("reservation.reservedFrom", function (newValue, oldValue) {
            $scope.checkErr();

        });


        $scope.$watch("reservation.reservedTill", function (newValue, oldValue) {
            $scope.checkErr();

        });
        $scope.getCurrentDate =  function() {
            var utcDate = new Date();
            var isoExtendedDate = utcDate.toISOString();
            var isoSimpleDate = isoExtendedDate.split("T")[0];
            return isoSimpleDate;
        }
        $scope.checkErr = function () {

            var startDateStr = $scope.reservation.reservedFrom;
            var endDateStr = $scope.reservation.reservedTill;

            var startDate;
            if (startDateStr != undefined) {
                startDate = new Date(startDateStr);
            }

            var endDate;
            if (endDateStr != undefined) {
                endDate = new Date(endDateStr);
            }
            $scope.errMessageFrom = '';
            $scope.errMessageTo = '';

            var myDate = new Date(); // Set this to your date in whichever timezone.
            var utcDate = myDate.toUTCString();




            if (startDate != undefined && startDate < new Date()) {
                $scope.errMessageFrom = 'Start Date should be greater than or equal to present day.';
                return false;
            }
            if (endDate != undefined && new Date(endDate) < new Date()) {
                $scope.errMessageTo = 'End Date should be greater than or equal to present day.';
                return false;
            }
            if (startDate != undefined && endDate != undefined  && endDate <= startDate) {
                $scope.errMessageTo = "End date must be after start day.";
                return false;
            }
            return true;
        };
    }]);

App.js :
//Date Picker
myApp.directive('coreDatePicker', function ($compile) {
    return {
        restrict: 'A',
        require: 'ngModel',
        compile: function (element, attrs) {
            $(element[0]).datepicker({
                autoclose: true,
                format: "dd/mm/yyyy"
            });

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

I will explain the scenario I am talking about. 



Issue 1 - I selected a date from the calendar and it was displayed correctly in the date-picker text box. I then clicked on the date picker again to select a different date but then I decided not to change the currently selected date, so I clicked outside the calendar without selecting a date for the second time. Since I did not select a date the second time, the date picker cleared the firstly selected date from the text box making it a null. I don't want that to happen. I want the firstly selected date to remain there unless a different date is selected (not a null value).



Issue 2 - While validating the dates, I am having trouble with comparing the selected date with the current date. If the selected date is lesser than current date, the error message should be displayed. But in my case the error is getting displayed if I select the same date as today. It should allow me to select the current day.



I have used Bootstrap-datepicker. Please let me know if more information is required.



Thanks in advance.
 解决方案 
At a quick glance i noticed ,
 link: function (scope, element, attrs, ngModelCtrl) {
            $(element[0]).datepicker().on("change", function (e) {
                scope.$apply(function () {
                    ngModelCtrl.$setViewValue(element.val());
                });
            });
        }

Should fire onchange right? What i understand from Issue 1 is that it fires regardless if there is change or not. Have you thought of trying some checkings at 
$(element[0]).datepicker().on("change", function (e) {
                    scope.$apply(function () {
                        ngModelCtrl.$setViewValue(element.val());
                    });
                });

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

Just a little check on the element.val() for a try wouldn't harm.



For issue two, I don't think you can compare the date that way.
new Date()

returns 

  
Thu Oct 20 2016 14:54:17 GMT+0800 (Malay Peninsula Standard Time)


What is your startDateStr



Noticed new Date() has some seconds and milliseconds.



If you just want to compare days , month and years that is (DD/MM/yyyy) i suggest you convert your dates before you can compare.



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

FOr a better option iw ould suggest moment. Github.
var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');

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

}

Update



Have you tried moving the checking to 
 $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();
            }

        });

When you use <= or >= to compare two date objects, they are compared via valueOf, which is the same as getTime for Date.



But when you use ==, they are two different objects of the same type, so it returns false.



So in your case ^To compare the two dates. The correct way is
 var startDate = moment(startDateStr, 'MM-DD-YYYY').format('MMMM D');

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

    }

These explanation is taken Here . You can check the link for more explanation.



The getTime convert the date into an epoch equivalent which is basically numerical/numbers values which can be comapred. new Date() is an object and so is new Date('10/20/2016') and object A cannot be equal to object b. To understand this more you can try on your browser console.
new Date() === new Date();
> false

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

The first is false is false because you are comparing two objects. The second is equivalent to comparing to numeric values. Afterall
new Date().getTime()
>1477011127232



                        
这篇关于如果在第二次点击时没有选择日期并发出验证日期，则日期选择器将从日期选择器文本框中清除所选值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆