Javascript Angularjs将daterangepicker的日期存储到表单变量中
我正在将我的表单验证从thymeleaf切换到angularjs，我对它有一些问题。对于angular，我读到了，所以我想用它在表单字段中存储startdate和enddate。 这是我的HTML模式代码：Javascript Angularjs将daterangepicker的日期存储到表单变量中,javascript,angularjs,forms,datetimepicker,bootstrap-datetimepicker,Javascript,Angularjs,Forms,Datetimepicker,Bootstrap Datetimepicker,我正在将我的表单验证从thymeleaf切换到angularjs，我对它有一些问题。对于angular，我读到了，所以我想用它在表单字段中存储startdate和enddate。 这是我的HTML模式代码： <div class="modal" id="addLicenseModal" data-ng-app="myApp"> <div class="modal-dialog" id="addLicenseModaController" data-ng-controll
<div class="modal" id="addLicenseModal" data-ng-app="myApp">
<div class="modal-dialog" id="addLicenseModaController" data-ng-controller="freeUserController">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">New license</h4>
</div>
<div class="modal-body">
<div data-ng-show='users.length > 0'>
<form novalidate class="simple-form" name="newLicenseForm">
<!-- form start -->
<div class="box-body">
<div class="form-group" id=existingUser>
<label>Username</label>
<ui-select theme="bootstrap" style="width: 100%;"
data-ng-model="newLicense.username" required> <ui-select-match
placeholder="Select username">
{{$select.selected.username}}</ui-select-match> <ui-select-choices
repeat="user.username as user in (users | filter: $select.search) track by user.username">
<span data-ng-bind="user.username"></span> </ui-select-choices> </ui-select>
</div>
<div class="form-group">
<label>Date and time range</label>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-clock-o"></i>
</div>
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text"
data-ng-model="newLicense.date" required/>
</div>
<div class="form-group">
<label>Execution number</label><span id="errmsg"
style="float: right; color: red"></span> <input
data-ng-model="newLicense.counter" id="executionNumber" type="number"
class="form-control" placeholder="executionNumber" min="0" required>
</div>
<div class="form-group">
<label>MAC address</label> <input id="macAddress" type="text"
class="form-control" data-ng-model="newLicense.macAddress" maxlength="25"
placeholder="MAC address" required>
</div>
<div class="form-group">
<label>CPU ID</label> <input id="cpuId" type="text"
class="form-control" data-ng-model="newLicense.cpuId" maxlength="25"
placeholder="CPU ID" required>
</div>
</div>
</form>
</div>
<p data-ng-show="users.length == 0">All clients have the own
license, you can update a license with UPDATE button.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left"
data-dismiss="modal">Close</button>
<button data-ng-show='users.length > 0' data-ng-disabled="newLicenseForm.$invalid"
data-ng-click="createLicense(newLicense)" id="createLicenseButton"
type="button" class="btn btn-primary">Create license</button>
<button data-ng-show='users.length == 0' id="createLicenseButton"
type="button" class="btn btn-primary" disabled>Create
license</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
无法在$scope.datePicker.date={startDate:null，endDate:null}上设置未定义的的属性“date”
一行是否有人使用此插件存储表单信息？谢谢您的问题在于数据绑定，具体如下：
<input date-range-picker id="daterange1" name="daterange1" class="form-control date-picker" type="text" data-ng-model="newLicense.date" required/>
应该是：
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
此外，在ajax帖子中，您的数据应该是$scope.newLicense
因此，您的控制器应该如下所示：
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : $scope.newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);
这是一个它给了我相同的错误类型错误：无法在new（license.js:97）上设置undefined的属性“date”好的，我正在尝试使用此演示进行演示，但在我的代码上没有。现在错误在datarange插件TypeError中：无法读取未定义的at数组的属性“startDate”。（AngularDateRangePicker.js:93）
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
var app = angular.module('myApp',['daterangepicker','ui.select']);
app.controller('freeUserController',['$scope','$http', function($scope, $http) {
$scope.newLicense = {};
$scope.newLicense.date = {startDate: null, endDate: null};
//Create new user from modal
$scope.createLicense = function(newLicense) {
$http({
method: 'POST',
url: '',
headers: {'Content-Type': 'application/json'},
data : $scope.newLicense,
}).then(function successCallback(response) {
if (response.data.success==true){
ajaxResultPost();
licenseTable.ajax.reload();
$('#addLicenseModal').modal("hide");
notifyMessage(data.result, 'success');
} else {
notifyMessage(response.data.result, 'error');
}
}, function errorCallback(response) {
window.location.href = "/ATS/500";
});
};
}]);