Question

期望

在下面的代码段中，当我在日历弹出窗口中选择离开日期时，光标应自动转到到达日期，并应显示日历弹出窗口以选择到达日期

问题1： 当我选择离开日期时，光标会自动移至到达日期并显示日历弹出并立即关闭。

问题2： 当我选择离开日期时，我无法选择到达日期。但反向工作正常，这意味着在选择到货日期后我们可以选择出发日期。

任何人都可以帮我解决这个问题吗？提前致谢

HTML

<!DOCTYPE html>
<html>
<head>
     <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
     <link
       href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css"
                                rel="stylesheet" type="text/css" />
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
</head>
<body ng-app="ui.date">
      <div ng-controller="test">
           Departure <input id="from" ng-model="from" ui-date="formatCalendar"
                 ng-change="updateDate()">
             Arrival <input id="to" ng-model="to" ui-date="formatCalendar2" >
      </div>
</body>
</html>

的Javascript

angular.module('ui.date', [])
.constant('uiDateConfig', {})
.directive('uiDate', ['uiDateConfig', function (uiDateConfig) {
  'use strict';
  var options;
  options = {};
  angular.extend(options, uiDateConfig);

  return {
    require:'?ngModel',
    link:function (scope, element, attrs, controller) {
      var getOptions = function () {
        return angular.extend({}, uiDateConfig, scope.$eval(attrs.uiDate));
      };

      var initDateWidget = function () {
        console.log('init');
        var showing = false;
        var opts = getOptions();

        // If we have a controller (i.e. ngModelController) then wire it up
        if (controller) {
          // Set the view value in a $apply block when users selects
          // (calling directive user's function too if provided)
          var _onSelect = opts.onSelect || angular.noop;

          opts.onSelect = function (value, picker) {
                  scope.$apply(function() {
              showing = true;
              controller.$setViewValue(element.datepicker("getDate"));
              _onSelect(value, picker);
              element.blur();

              $('#to').focus();
              showing = true;


            });
          };

          opts.beforeShow = function() {
            showing = true;
          };

          opts.onClose = function(value, picker) {
            showing = false;
          };

          element.on('blur', function() {
            if ( !showing ) {
              scope.$apply(function() {
                element.datepicker("setDate", element.datepicker("getDate"));
                controller.$setViewValue(element.datepicker("getDate"));
              });
            }
          });

          // Update the date picker when the model changes
          controller.$render = function () {
            var date = controller.$viewValue;
            if ( angular.isDefined(date) && date !== null && !angular.isDate(date)

) {
              throw new Error('ng-Model value must be a Date object - currently it

is a ' + typeof date + ' - use ui-date-format to convert it from a string');
            }
            element.datepicker("setDate", date);
          };
        }

        // If we don't destroy the old one it doesn't update properly when the

config changes
        element.datepicker('destroy');
        // Create the new datepicker widget
        element.datepicker(opts);
        if ( controller ) {
          // Force a render to override whatever is in the input text box
          controller.$render();
        }
      };
      // Watch for changes to the directives options
      scope.$watch(getOptions, initDateWidget, true);
    }
  };
}
])


.constant('uiDateFormatConfig', '')

.directive('uiDateFormat', ['uiDateFormatConfig', function(uiDateFormatConfig) {
  var directive = {
    require:'ngModel',

    link: function(scope, element, attrs, modelCtrl) {
      var dateFormat = attrs.uiDateFormat || uiDateFormatConfig;

      if ( dateFormat ) {
        // Use the datepicker with the attribute value as the dateFormat string to

convert to and from a string
        modelCtrl.$formatters.push(function(value) {
          if (angular.isString(value) ) {
            return jQuery.datepicker.parseDate(dateFormat, value);
          }
          return null;
        });
        modelCtrl.$parsers.push(function(value){
          if (value) {
            return jQuery.datepicker.formatDate(dateFormat, value);
          }
          return null;
        });
      } else {
        // Default to ISO formatting
        modelCtrl.$formatters.push(function(value) {
          if (angular.isString(value) ) {
            return new Date(value);
          }
          return null;
        });
        modelCtrl.$parsers.push(function(value){
          if (value) {
            return value.toISOString();
          }
          return null;
        });
      }

    }

  };
  return directive;
}]);



function test($scope){

$scope.to = null;
$scope.from = null;

$scope.formatCalendar = {
    minDate: 0,
    maxDate: 180,
    defaultDate: "+1w",
    numberOfMonths: 3,
    changeMonth: true,
    dateFormat: 'dd/mm/yy'
};

$scope.formatCalendar2 = {
    defaultDate: "+1w",
    numberOfMonths: 3,
    changeMonth: true,
    dateFormat: 'dd/mm/yy'
  };

$scope.updateDate = function(){
   console.log($scope.from);
  $scope.formatCalendar2.minDate = $scope.from;
};
}

日历控制日期问题

0 个答案: