Angular Bootstrap 日期选择器问题

Question

使用Angular Bootstrap calender 并遇到问题。 编辑输入字段时，日历中会显示相同的日期

但是，如果我碰巧导航到另一个月份并关闭了日期选择器，那么输入字段中的日期被选中但不会显示在日历中。例如，我从 9 月搬到了 8 月，没有进行任何选择并关闭了datepicker 然后重新打开日历而不是在输入字段中获取日期，即（9 月 16 日）我将 8 月显示在日历中。

HTML -

<div data-ng-controller="dateCtrl as toDate">
                        <span class="span1 actionFilterSpan">
                                <div>
                                    <label for="aaa1">From</label> <br> 
                                    <input class="u-b"
                                        type="text" id="from1" 
                                        datepicker-popup="{{toDate.format}}"
                                        data-ng-model="ctrl.filterForm.fDate" 
                                        is-open="toDate.openedDP1"                                          
                                        datepicker-options="toDate.dateOptions"
                                        date-disabled="disabled(date, mode)" 
                                        data-ng-required="true"
                                        close-text="Close" 
                                        data-ng-change="toDate.fromDateChange(ctrl.filterForm.fDate)"
                                        close-on-date-selection='true'/>

                                    <button type="button" 
                                        class="button-image1"
                                        data-ng-click="toDate.openDP1($event)">
                                        <img class="cal1" src="app/images/calIcon1.jpg">
                                    </button>
                                    &nbsp;
                                </div>                                  
                        </span> 
   </div>

控制器 -

 var self = this;
  self.today = function() {
                    dateSvc.setToDate(new Date());
                    dateSvc.setFromDate(new Date());
                };

                self.today();

                self.clear = function() {
                    dateSvc.setToDate(null);
                    dateSvc.setFromDate(null);
                };



                self.openDP1 = function($event) {
                    $event.preventDefault();
                    $event.stopPropagation();
                    self.openedDP2 = false;
                    self.openedDP1 = !self.openedDP1;
                };
     self.fromDateChange = function(selectedDate){
                    dateSvc.setFromDate(selectedDate);
                    console.log(selectedDate);
                    self.filterForm = selectedDate;
                    console.log("MOdal Value : "+self.filterForm);
                };

                self.toDateChange = function(selectedDate){
                    dateSvc.setToDate(selectedDate);
                    console.log(selectedDate);
                };

                self.dateOptions = {
                    formatYear : 'yy',
                    formatMonth : 'MMM',
                    startingDay : 1
                };

                self.formats = [ 'dd-MMM-yyyy', 'dd-MMMM-yyyy',
                        'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate' ];
                self.format = self.formats[0];

其中 datesvc 是用于获取和设置日期的服务。

Answer 1

您需要在关闭日期选择器时刷新它。

试试这个。希望这会有所帮助

/**
 * Decorates the ui-bootstrap datepicker directive's controller to allow
 * refreshing the datepicker view (and rerunning invalid dates function) 
 * upon an event trigger: `$scope.$broadcast('refreshDatepickers');`

 * 
 * Works with inline and popup. Include this after `ui.bootstrap` js
 */

angular.module('ui.bootstrap.datepicker')
    .config(function($provide) {
        $provide.decorator('datepickerDirective', function($delegate) {
            var directive = $delegate[0];
            var link = directive.link;

            directive.compile = function() {
                return function(scope, element, attrs, ctrls) {
                    link.apply(this, arguments);

                    var datepickerCtrl = ctrls[0];
                    var ngModelCtrl = ctrls[1];

                    if (ngModelCtrl) {
                        // Listen for 'refreshDatepickers' event...
                        scope.$on('refreshDatepickers', function refreshView() {
                            datepickerCtrl.refreshView();
                        });
                    }
                }
            };
            return $delegate;
        });
    });

(1) 创建一个名为 datepicker.decorator.js 的文件，将上面的代码复制粘贴进去。

(2) 将其包含在您的项目中，并在 ui-bootstrap.js 的脚本引用之后添加对 datepicker.decorator.js 的脚本引用

(3) 在自己的代码中，每当需要刷新日历时，只需调用 $scope.$broadcast('refreshDatepickers');

---

如果它不适合你，还有另一种方法可以实现它。

在 datepicker 指令的 datepicker.js 文件中创建一个 $on 事件，您可以从控制器调用该事件。正如我所见，有一个内置方法 refreshView 您可以在 $on 事件中调用它。

希望这会有所帮助。