我在使用datepicker时遇到错误。代码在datepicker.js中断 在这里我附上我的代码 datepicker.js
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
应该显示我的datepicker的html页面： ReportDetails.html
<div ng-controller="headerCtrl">
<div class="container" style="padding-top:20px;">
<div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p>{{ error }}</p>
</div>
<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>
<div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add Project ID</h4>
<h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit Project ID</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">UserID</label>
<div class="col-sm-10">
<select data-ng-model="user.userid" class="form-control" id="title" required>
<option value="" selected="selected">(Select User ID)</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
<!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Status</label>
<div class="col-sm-10">
Active <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status">
In-Active <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
</div>
</div>
<div class="form-group">
<label for="startDate" class="col-sm-2 control-label">Date</label>
<div class="col-sm-10">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" />
<!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h1>Headers List</h1>
<table class="table table-hover">
<tr>
<td><strong>User ID</strong></td>
<th>Status</th>
<th>Action</th>
</tr>
<tr data-ng-repeat="user in users">
<td>
<p>{{ user.userid }}</p>
</td>
<td>
<p>{{ user.ResultStatus }}</p>
</td>
<td>
<p>
<a data-ng-click="edit(user)" href="javascript:;">Edit</a>
</p>
</td>
</tr>
</table>
<hr />
</div>
</div>
</div>
我的主页 - index.html，您可以在其中找到所有文件导入
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="../lib/angular.js"></script>
<script src="../lib/jquery-1.11.1.js"></script>
<script src="../lib/bootstrap.js"></script>
<script src="../app.js"></script>
<script src="../Controller/HeaderCtrl.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="../css/index.css" rel="stylesheet" />
<script src="../lib/datepicker.js"></script>
</head>
<body ng-controller="headerCtrl">
<div class="navbar navbar-inverse navbar-fixed-left">
<p>
<br />
</p>
<b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
<ul class="nav navbar-nav">
<li><a href="#AddHeader">Header Details</a></li>
<li><a href="#ProjectIDCreation">Project ID Creation</a></li>
<li><a href="#ReportDetails">Report Details</a></li>
<li><a href="#">Display all submission for verify</a></li>
</ul>
<b><a class="navbar-brand" href="#" style="color:white">User</a></b>
<ul class="nav navbar-nav">
<li><a href="#">Timesheet Information</a></li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<ul id="login_signup">
<li><a href="#" id="login_link">Login <span>◀</span></a></li>
<li><a href="#" id="sign_link">SignUp <span>◀</span></a></li>
</ul>
</div>
<div class="page-content">
<div ng-view>
</div>
</div>
</body>
</html>
代码片段
.ui-datepicker-calendar {
display: none;
}