AngularJS响应式日期选择器



可能是这个问题被问了很多次,但我会再问一次。我正在寻找没有jquery和bootstarp的纯angularjs日期选择器。它应该是响应式的,因为我将在离子框架中用于移动应用程序。

它应该设置最大和最小日期,并且可以使用超过1次。

HTML View

<div class="row">
        <div class="item-text-wrap item col col-50">
            <div class="item-icon-left">
                <i class="icon ion-calendar"></i>
                <input type="text" class="dateClass" pick-a-date="depDate" pick-a-date-options="depOptions" placeholder="Departure Date" />
            </div>
        </div>
        <div class="item-text-wrap item col col-50">
            <div class="item-icon-left">
                <i class="icon ion-calendar"></i>
                <input type="text" class="dateClass" pick-a-date="arrDate" placeholder="Arrival Date" />
            </div>
        </div>
    </div>

Controller Code

var minDate = new Date();
        var maxDate = new Date(minDate.getFullYear() + 1, minDate.getMonth(), minDate.getDate());
        $scope.depOptions = {
          format: 'dd/mm/yyyy',
          min: minDate,
          max: maxDate,
          onClose: function(e) {
            alert($scope.depDate);
          }
        }

现在,如果您看到我在onClose方法中使用了$scope.depDate,但我总是未定义。实际上,我正在尝试将第二条指令的最小日期设置为第一指令的选定日期。

我创建了一个ionic-datepicker的 bower 组件。你可以使用它。不需要其他依赖项。https://github.com/rajeshwarpatlolla/ionic-datepicker

您甚至可以查看ionic-timepicker bower 组件。不需要其他依赖项。https://github.com/rajeshwarpatlolla/ionic-timepicker

这个看起来很有前途,似乎不需要jquery或bootstrap:

https://github.com/alongubkin/angular-datepicker

最新更新