角js和引导用户界面日期选择器无法在Chrome上点击图标打开 [英] Angular js and bootstrap ui date picker not open in chrome on clicking on icon

查看:312
本文介绍了角js和引导用户界面日期选择器无法在Chrome上点击图标打开的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用的角度引导用户界面日期选择器。这code是IE浏览器的工作很细,但它不是得到铬开放。作为调用方法的open()输入框中得到关注,但日期选择器弹出打开不后。任何帮助将是非常美联社preciable。在此先感谢

 < p =类输入组>
<输入为开=打开类型=文本日期选择器,弹出=M / D / YYYYNG-模式=日期日期选择器选项=dateOptions/>
                               <跨度类=输入组BTN>
                                  <按钮式=按钮级=BTN BTN-默认的NG点击=open()的>< I类=glyphicon glyphicon日历>< / I>< /按钮>
                               < / SPAN>
                        &所述; / P>

Java脚本

  $ scope.open =功能(){
    $ scope.opened = TRUE;
};


解决方案

您需要从从按钮停止传播的click事件,因为它会导致日期选择器立即关闭...

 <按钮式=按钮级=BTN BTN-默认的NG点击=$ event.stopPropagation();开();>
    < I类=glyphicon glyphicon日历>< / I>
< /按钮>

演示 - 的jsfiddle

I have date picker in angular using bootstrap UI. This code is working very fine in IE but its not get open in chrome. As after calling the method open () input box get focused but date picker popup not opens. Any help will be really appreciable. Thanks in advance

<p class="input-group">
<input is-open="opened" type="text" datepicker-popup="M/d/yyyy" ng-model="Date" datepicker-options="dateOptions" />
                               <span class="input-group-btn">
                                  <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>
                               </span>
                        </p>

Java Script

$scope.open = function () {    
    $scope.opened = true;                                                                                    
};

解决方案

You need to stop the click event from propagating from the button as it will cause the datepicker to close instantly...

<button type="button" class="btn btn-default" ng-click="$event.stopPropagation(); open();">
    <i class="glyphicon glyphicon-calendar"></i>
</button>

Demo - JSFiddle

这篇关于角js和引导用户界面日期选择器无法在Chrome上点击图标打开的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆