javascript – ui-bootstrap datepicker：强制重新渲染一个datepicker？

2019-10-03 00:37:12 阅读：215 来源： 互联网

标签：javascript angularjs angular-ui-bootstrap

特别是使用ui-bootstrap的datepicker和NO jQuery …

所以,我正在尝试将两个日期选择器中的日期范围选择器缝合在一起并且它非常接近.我正在尝试根据结束日历上选择的日期禁用开始日历上的日期,反之亦然.问题是,当在该日历上进行选择时,开始日历仅刷新或重新呈现.因此,如果我在结束日历上选择日期,则开始日历将不会重新运行禁用日期功能并重新渲染,直到我再次在开始日历上选择日期.

有没有人知道强制重新呈现日历或直接调用提供的禁用日期或自定义类函数的方法？

解决方法:

我并不是100％确定这是你正在寻找的,没有任何代码可以作为答案,但希望这会给你一个如何完成你想要的提示.

Plunker Demo

因此,如果要创建一个非常简单的日期范围选择器,可以利用min-date属性,该属性指向可绑定表达式.这意味着每当父范围属性更改时,datepicker的相应隔离范围属性也会更改,反之亦然.因此,如果将“结束日期”datepicker的min-date属性绑定到“开始日期”datepicker的模型,则每当更改开始日期时,将更新第二个datepicker以反映更改.

<datepicker ng-model="startdt" show-weeks="false"></datepicker>
<datepicker ng-model="enddt" min-date="startdt" show-weeks="false"></datepicker>

为了使用户更好一些,您可以进一步观察开始日期,并在所选开始日期大于当前所选结束日期的情况下自动更新结束日期.

$scope.$watch('startdt', function(newval){
  if (newval > $scope.enddt) {
    $scope.enddt = newval;
  }
});

为了进一步提高可用性,如果您使用的是UI Bootstrap 0.13.0,则可以使用custom-class属性在日期范围内设置自定义CSS类.作为一个例子,你可以添加：

标记

//Bind the custom-class attribute to the setRangeClass function
<datepicker ng-model="enddt" min-date="startdt" custom-class="setRangeClass(date, mode)" show-weeks="false"></datepicker>

调节器

  //Define the setRangeClass on the controller
  $scope.setRangeClass = function(date, mode) {
    if (mode === 'day') {
      var dayToCheck = new Date(date).setHours(0,0,0,0);
      var startDay = new Date($scope.startdt).setHours(0,0,0,0);
      var endDay = new Date($scope.enddt).setHours(0,0,0,0);

      if (dayToCheck >= startDay && dayToCheck < endDay) {
        return 'range';
      }
    }
    return '';
  };

CSS

  /*Create the corresponding .range class*/
  .range>.btn-default {
    background-color: #5bb75b;
  }
  .range button span {
    color: #fff;
    font-weight: bold;
  }

标签：javascript,angularjs,angular-ui-bootstrap
来源： https://codeday.me/bug/20191002/1845482.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – ui-bootstrap datepicker：强制重新渲染一个datepicker？