Question

使用Angular Bootstrap calender并面临问题。编辑输入字段时，日历

中会显示相同的日期

但是，如果我碰巧导航到另一个月并关闭了日期选择器，则输入字段中的日期被选中但不会显示在日历中。例如，我说从9月到8月，没有做出任何选择并关闭了datepicker然后重新打开日历，而不是在输入字段中获取日期，即（16-Sept）我将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事件中调用它。

希望这会有所帮助。

Angular Bootstrap Datepicker问题

1 个答案: