javascript - AngularJS版jquery datepicker有一小点问题
巴扎黑
巴扎黑 2017-04-10 14:25:23
[JavaScript讨论组]

https://github.com/angular-ui/ui-date
在项目中,我使用了适合angular的datepicker,现在有一个问题解决不了。

开始时间:
<input type="text" ui-date="startDateOptions" ui-date-format="@" id="start" class="textbox short" ng-model="startdate">
结束时间:
<input type="text" ui-date="endDateOptions" ui-date-format="@" id="end"  class="textbox short" ng-model="enddate">
<a class="button" ng-click="search()">搜索</a>

Angular:

....

.controller('someCtrl', function(...)){
   $scope.startDateOptions = {
            changeYear: true,
            changeMonth: true,
            onClose: function(selectedDate) {
               var end = $('#end');
               var d = $('#start').datepicker("getDate");
               end.datepicker("setDate", 
               new Date(d.getFullYear(),d.getMonth(),d.getDate() + 1));
               end.datepicker("option", "minDate", selectedDate);

               $scope.enddate = parseInt($scope.startdate) + 24*60*60*1000;
            }
        };
        $scope.endDateOptions = {
            changeYear: true,
            changeMonth: true,
            onClose: function(selectedDate) {
                var start = $("#start");
                if(start.val() == '') {
                   var d = $('#end').datepicker("getDate");
                   start.datepicker("setDate", 
                   new Date(d.getFullYear(),d.getMonth(),d.getDate() - 1));
                   $scope.startdate = parseInt($scope.enddate) - 24*60*60*1000;
                }
                start.datepicker("option","maxDate",selectedDate);  
            }
        };
}

现在就是点击第一个,然后第二个input会自动填上到第二天的时间,点击搜索完,第二个Input不会显示日期。因为第二个是setDate上去的。
如果是点击第一个input,再选择第二个input。它们都可以显示日期。
现在不知道怎么解决。

巴扎黑
巴扎黑

全部回复(2)
高洛峰

datepicker的onClose事件是纯粹的javascript事件,对angular来说是外部事件也就是说在onClose事件的处理函数中所做的任何状态更新(改变$scope或$scope的子对象的属性)都无法被angular记录下来。angular提供了$apply接口解决这个问题。因此
$scope.enddate = parseInt($scope.startdate) + 24*60*60*1000;
改为

scope.$apply(function() {
    $scope.enddate = parseInt($scope.startdate) + 24*60*60*1000;
});

for more details, plz goolge $scope angular apply

ringa_lee

在AngularJS配合其他JS库使用时,最有可能出现问题的部分就是在使用第三方JS库的时候Angular并不知情。所以只要控制器中的某段代码没有使用Angular提供的函数或是服务,一定要在后面运行一遍

//代码
$scope.$apply();

当然更好的方法是将需要运行的代码放到$apply中的匿名函数中运行,像是这样:

$scope.$apply(function(){
    //代码
})

这样的话可以让Angular捕获到其中的错误。

Enjoy coding!

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号