Угловой материал - Для загрузки даты в 3-х различных входных элементах

у меня есть простой пример с угловым материалом datapicker:Угловой материал - Для загрузки даты в 3-х различных входных элементах

<md-datepicker ng-model="myDate" md-placeholder="Enter date"></md-datepicker>

Я хотел бы знать, если это возможно, чтобы использовать этот плагин для загрузки даты в три разных элемента ввода.

<input name="day" /> <input name="month" /> <input name="year" />

источник

2017-01-30 Eladerezador

вам хотите связать их с моря? – Sajeetharan

Точно, когда я выбираю дату, день будет помещен в ввод, месяц в другой и год в другой. – Eladerezador

проверить мой ответ – Sajeetharan

Вы можете получить выбранное значение даты на ng-change, и разделить день, месяц, год, используя JavaScript и связать их с полем ввода,

angular.module('datepickerBasicUsage', ['ngMaterial']) 
 
    .controller('AppCtrl', function($scope) { 
 
    $scope.bind = function() { 
 
     $scope.date = $scope.myDate; 
 
     $scope.month = $scope.date.getUTCMonth() +1 ; 
 
     $scope.day = $scope.date.getUTCDate() +1; 
 
     $scope.year = $scope.date.getUTCFullYear(); 
 
    } 
 
    });

<!doctype html> 
 
<html ng-app="datepickerBasicUsage"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css"> 
 

 
    <script src="app.js"></script> 
 
</head> 
 
<body> 
 
    <div ng-controller="AppCtrl" style='padding: 40px;'> 
 
    <form > 
 
     <md-content> 
 
     <md-datepicker ng-change="bind()" ng-model="myDate" md-placeholder="Enter date"></md-datepicker> 
 
     <md-input-container class="md-block"> 
 
      <label>label</label> 
 
      <input required type="text" ng-model="month" /> 
 
     </md-input-container> 
 
     <md-input-container class="md-block"> 
 
      <label>label</label> 
 
      <input required type="text" ng-model="day" /> 
 
     </md-input-container> 
 
     <md-input-container class="md-block"> 
 
      <label>label</label> 
 
      <input required type="text" ng-model="year" /> 
 
     </md-input-container> 
 
     </md-content> 
 
    </form> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2017-01-30 12:52:34 Sajeetharan

Хорошая идея, я собираюсь протестировать, большое спасибо – Eladerezador

отметить как ответ, если это помогает – Sajeetharan

Работало ли так, как вы хотели? – Sajeetharan

Угловой материал - Для загрузки даты в 3-х различных входных элементах

ответ

Смежные вопросы