Сборщик дат Simentic UI с угловой моделью JS NG - PullRequest
Новая
       32

Сборщик дат Simentic UI с угловой моделью JS NG

2 голосов
/ 02 июня 2019

Работа над семантическим пользовательским интерфейсом выбора даты с angularjs.Попытка связать ng-model с семантическим средством выбора даты в пользовательском интерфейсе, но значение этого средства не назначается.Я также посмотрел на выбор даты текстовое поле значение не заполняется семантическим пользовательским интерфейсом управления.Так есть ли лучший способ получить значение? 

// Code goes here

var app = angular.module('App', [])

app.controller('AppController', function($scope) {

  $('#example2').calendar({
    type: 'date'
  });

  $scope.getDate = function() {
    alert($scope.datevalue)
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>


  <script src="script.js"></script>
</head>

<body ng-app="App" ng-controller="AppController">
  <h3>Date only</h3>
  <div class="ui calendar" id="example2">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date" ng-model="datevalue">
    </div>
  </div>
  <br/>
  <button ng-click="getDate()">Submit</button>
</body>

</html>

1 Ответ

1 голос
/ 02 июня 2019

Это потому, что вам нужно уведомить angular, что модель изменилась.

Вкл. onChange установить значение области в дату.

Lile это: 

// Code goes here

var app = angular.module('App', [])

app.controller('AppController', function($scope) {

  $('#example2').calendar({
    type: 'date',
    onChange: function (date,text) {
      $scope.datevalue = date;
    }
  });

  $scope.getDate = function() {
    alert($scope.datevalue)
  }
})
<!DOCTYPE html>
<html>

<head>
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.css" rel="stylesheet" type="text/css" />
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="https://cdn.rawgit.com/mdehoog/Semantic-UI/6e6d051d47b598ebab05857545f242caf2b4b48c/dist/semantic.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>


  <script src="script.js"></script>
</head>

<body ng-app="App" ng-controller="AppController">
  <h3>Date only</h3>
  <div class="ui calendar" id="example2">
    <div class="ui input left icon">
      <i class="calendar icon"></i>
      <input type="text" placeholder="Date" ng-model="datevalue">
    </div>
  </div>
  <br/>
  <button ng-click="getDate()">Submit</button>
</body>

</html>

источник

Примечание Вы можете заключить это в директиву, если это так важно.

...