Question

我正在开发我的应用程序，我想要做的是当我在日历上选择日期时，所选日期特别是月份，日期和年份将是下拉列表值。每个属性（例如一个月）用于一个下拉列表，下一个用于花药下拉列表

这是我的选择代码

  <select ng-disabled="isCheckboxSelected('1')" ng-model="ngModel">
       <option ng-value=" {{ngModel | date: 'MM'}}"
      </option>
  </select>

我的datepicker是

<input
    type="date"
    ng-disabled="isCheckboxSelected('1')"
    id="test"
    name="date"
    ng-model="ngModel"
    popup="d MMM yyyy"
    options="dateOptions"
     ng-click="Opened=true"
     ng-change="saveNewDate"
     custom-datepicker/>

我正在使用AngularJS

Answer 1

通过在日历控件上使用$ watch，您可以将日期值指定为下拉列表。

这是相同的基本版本。如果日期将被选择一次，那么您不需要月，日和年的数组。在这种情况下，一个简单的变量足以进行值绑定。

function TodoCtrl($scope, $filter) {
    $scope.month = [];
    $scope.day = [];
    $scope.year = [];

    $scope.$watch('myDate', function(newValue) {
        if (newValue != undefined) {
            if ($scope.month.indexOf($filter('date')(newValue, 'MM')) == -1) {
                $scope.month.push($filter('date')(newValue, 'MM'));
            }

            if ($scope.day.indexOf($filter('date')(newValue, 'dd')) == -1) {
                $scope.day.push($filter('date')(newValue, 'dd'));
            }

            if ($scope.year.indexOf($filter('date')(newValue, 'yyyy')) == -1) {
                $scope.year.push($filter('date')(newValue, 'yyyy'));
            }
        }
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <h2>Todo</h2>

    <div ng-controller="TodoCtrl">
        <table width="70%">
            <tr>
                <td>Calender :</td>
                <td>
                    <input type="date" ng-disabled="isCheckboxSelected('1')" id="test" name="date" ng-model="myDate" popup="d MMM yyyy" options="dateOptions" ng-click="Opened=true" ng-change="saveNewDate" custom-datepicker/>
                </td>
            </tr>
            <tr>
                <td>Date :</td>
                <td>
                    <select data-ng-model="daySelected" data-ng-options="c as c for c in day">
                        <option value="">-- Select Day --</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Month :</td>
                <td>
                    <select data-ng-model="monthSelected" data-ng-options="c as c for c in month">
                        <option value="">-- Select Month --</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Year :</td>
                <td>
                    <select data-ng-model="yearSelected" data-ng-options="c as c for c in year">
                        <option value="">-- Select Year --</option>
                    </select>
                </td>
            </tr>
        </table>

    </div>
</div>

JSFiddle

Datepicker值分配给下拉列表

1 个答案: