带有 Angularjs ng 模型的语义 UI 日期选择器
Posted
技术标签:
【中文标题】带有 Angularjs ng 模型的语义 UI 日期选择器【英文标题】：Simentic UI date picker with Angular js ng model 【发布时间】：2019-10-18 05:10:30 【问题描述】：使用 angularjs 处理语义 UI 日期选择器。尝试将 ng-model 与语义 UI 日期选择器绑定，但未分配选择器的值。我还查看了日期文本框值的选择没有被语义控制 UI 填充。那么有没有更好的获取价值的方法呢？
// 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】：那是因为您需要通知 Angular 模型已更改。
在onChange 上，将范围的值设置为日期。
利乐这个：
// 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>source
注意如果它很重要，你可以用指令包装它。
【讨论】：
以上是关于带有 Angularjs ng 模型的语义 UI 日期选择器的主要内容，如果未能解决你的问题，请参考以下文章
angularJS中的ui-router和ng-grid模块
Angular JS & Semantic-UI 复选框需要双击