Why not datepicker getting in mvc using angularjs
Hi.i am trying getting date picker in mvc using angulajs and also i am using validation. My validation is working fine. but i am not able to get date picker. so how can i get date picker on button image click.
@section scripts{
<script src="~/Scripts/register/module.js"></script>
<script src="~/Scripts/register/service.js"></script>
<script src="~/Scripts/register/controller.js"></script>
<script src="~/Scripts/jquery-1.12.4.js"></script>
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery.ui.datepicker.js"></script>
<script src="~/Scripts/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('mysApp', []);
app.controller('validate', function ($scope) { });
</script>
<script>
var datePicker = angular.module('app', []);
app.directive('datepicker', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ngModelCtrl) {
$(function () {
element.datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function (date) {
scope.$apply(function () {
ngModelCtrl.$setViewValue(date);
});
}
});
});
}
}
});
</script>
}
<link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet" />
<div ng-app="RegMyApp" ng-controller="regCntr">
<h1>User Details</h1>
<br />
<a ng-click="AddUserDiv()" class="btn btn-primary"><i class="fa fa-plus"></i> Create New</a>
<br />
<br />
<div class="divList">
<table cellpadding="12" class="table table-bordered table-hover">
<tr style="background-color:black; color:white;">
<td><b>Name</b></td>
<td><b>Email</b></td>
<td><b>Contact No</b></td>
<td><b>Actions</b></td>
</tr>
<tr ng-repeat="user in users">
<td style="width:50%;">
{{user.Fname}} {{user.LName}}
</td>
<td>
{{user.Email}}
</td>
<td>
{{user.ContactNo}}
</td>
<td align="center">
<a ng-click="editUser(user)" class="btn btn-primary"><i class="fa fa-pencil"></i> Edit</a>
<a ng-click="detailsUser(user)" class="btn btn-primary"><i class="fa fa-eye"></i> Details</a>
<a ng-click="deleteUser(user)" class="btn btn-danger"><i class="fa fa-trash"></i> Delete</a>
</td>
</tr>
</table>
</div>
<div ng-show="divUser">
<div class="btn btn-primary disabled" style="width:10%;">{{Action}} User</div>
<br />
<br />
<form class="form-horizontal" name="frmRegister" ng-submit="submitForm()" novalidate ng-app="RegMyApp">
<table class="table table-bordered">
<tr>
<td colspan="2">
<div class="form-group">
<label for="UserId" class="col-md-4 control-label">User Id :</label>
<div class="col-md-8">
<input type="text" id="userId" disabled="disabled" name=" userid" class="form-control" ng-model="userId" />
</div>
</div>
</td>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userUserName.$invalid && !frmRegister.userUserName.$pristone }">
<label for="UserName" class="col-md-4 control-label">User Name :</label>
<div class="col-md-8">
<input type="text" id="userUserName" name="userUserName" class="form-control" ng-model="userUserName" placeholder="Enter User Name" required />
<p ng-show="frmRegister.userUserName.$invalid && !frmRegister.userUserName.$pristine" class="text-danger">User name is required</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userPassword.$invalid && !frmRegister.userPassword.$pristone }">
<label for="UserPassword" class="col-md-4 control-label">Password :</label>
<div class="col-md-8">
<input type="text" id="userPassword" name="userPassword" class="form-control" ng-model="userPassword" placeholder="Enter Password" required />
<p ng-show="frmRegister.userPassword.$invalid && !frmRegister.userPassword.$pristine" class="text-danger">User Password is required</p>
</div>
</div>
</td>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userFName.$invalid && !frmRegister.userFName.$pristone }">
<label for="UserFName" class="col-md-4 control-label">First Name :</label>
<div class="col-md-8">
<input type="text" id="userFName" name="userFName" class="form-control" ng-model="userFName" placeholder="Enter First Name" required />
<p ng-show="frmRegister.userFName.$invalid && !frmRegister.userFName.$pristine" class="text-danger">User First Name is required</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userLName.$invalid && !frmRegister.userLName.$pristone }">
<label for="UserLName" class="col-md-4 control-label">Last Name :</label>
<div class="col-md-8">
<input type="text" id="userLName" name="userLName" class="form-control" ng-model="userLName" placeholder="Enter Last Name" required />
<p ng-show="frmRegister.userLName.$invalid && !frmRegister.userLName.$pristine" class="text-danger">User Last Name is required</p>
</div>
</div>
</td>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userAddress.$invalid && !frmRegister.userAddress.$pristone }">
<label for="UserAddress" class="col-md-4 control-label">Address :</label>
<div class="col-md-8">
<textarea rows="3" id="userAddress" name="userAddress" class="form-control" ng-model="userAddress" placeholder="Enter Address" required></textarea>
<p ng-show="frmRegister.userAddress.$invalid && !frmRegister.userAddress.$pristine" class="text-danger">User Address is required</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userEmail.$invalid && !frmRegister.userEmail.$pristone }">
<label for="UserEmail" class="col-md-4 control-label">Email :</label>
<div class="col-md-8">
<input type="text" id="userEmail" name="userEmail" class="form-control" ng-model="userEmail" placeholder="Enter Email" required />
<p ng-show="frmRegister.userEmail.$invalid && !frmRegister.userEmail.$pristine" class="text-danger">User Email is required</p>
</div>
</div>
</td>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userContactNo.$invalid && !frmRegister.userContactNo.$pristone }">
<label for="UserContactNo" class="col-md-4 control-label">Contact No. :</label>
<div class="col-md-8">
<input type="text" id="userContactNo" name="userContactNo" class="form-control" ng-model="userContactNo" placeholder="Enter Contact No." required />
<p ng-show="frmRegister.userContactNo.$invalid && !frmRegister.userContactNo.$pristine" class="text-danger">User Contact No. is required</p>
</div>
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="form-group" ng-class="{'has error' : frmRegister.userDateOfBirth.$invalid && !frmRegister.userDateOfBirth.$pristone }">
<label for="UserDateOfBirth" class="col-md-4 control-label">Date Of Birth :</label>
<div class="col-md-8 input-group date">
<input type="datetime" id="userDateOfBirth" name="userDateOfBirth" class="form-control" ng-model="userDateOfBirth" placeholder="dd-MM-yyyy" required datepicker />
<span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
<p ng-show="frmRegister.userDateOfBirth.$invalid && !frmRegister.userDateOfBirth.$pristine" class="text-danger">User Date Of Birth is required</p>
</div>
</div>
</td>
<td colspan="2" align="center">
<input type="submit" ng-disabled="frmRegister.$invalid || frmRegister.$pristine"
class="btn btn-primary" value="Save" ng-click="AddUpdateUser()" />
<input type="button" class="btn btn-danger" value="Cancel" ng-click="Cancel()" />
</td>
</tr>
</table>
</form>
</div>
</div>