Question

我希望使用角度js和bootstrap创建一个日期范围选择器。

我有两个文本框，它们都打开日期选择器框。但是它同时将日期输入两个框？

html代码段

  <div class="form-group">

      <div class="input-group">
          <input type="text" class="form-control date" id="dateFrom" placeholder="From" ng-click="open($event)"   class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" >
          <input type="text" class="form-control date" id="dateTo"   placeholder="To" ng-click="open($event)"   class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" >
      </div>

  </div>

Javascript代码段

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {

  $scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();

        $scope.opened = true;
  };
  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[1];
});

您可以看到 working plunker example here

Answer 1

您在两个字段中使用相同的模型，ng-model =＆＃34; dt＆＃34 ;;

只需使用两种不同的模型ng-model =＆＃34; dtFrom＆＃34; for dateFrom和ng-model =＆＃34; dtTo＆＃34;对于dateTo：

<input type="text" class="form-control date" id="dateFrom" placeholder="From" ng-click="open($event)"   class="form-control" datepicker-popup="{{format}}" ng-model="dtFrom" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" >
<input type="text" class="form-control date" id="dateTo"   placeholder="To" ng-click="open($event)"   class="form-control" datepicker-popup="{{format}}" ng-model="dtTo" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" >

这是the working Plunker

关于ngModel的AngularJS文档应该有很多帮助。

基本数据范围选择器角度js。双重进入

1 个答案: