Validation on Angular JS bootstrap DatePicker - angularjs

All,
I need to implement the validation on Angular js Bootstrap DatePicker. It works for following scenarios
While page is loading no validation
onChange of date text box it checks for Empty and invalid date format
After selecting the valid date from date picker calender it removes the error messsages mentioned in above scenario no: 2.
while entering the invalid date in text box it throws "Invalid date format ".
But for the following scenarios it doesn't work.
when enter the valid date it is still displaying the error message "Invalid date Format"
Here is my code snippet
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Date output: <em>{{dt}}</em></pre>
<form id="main-form" name="peopleForm" novalidate>
<div class="row">
<div class="col-md-6">
<p class="form-group">
<div ng-class="{ 'has-error': peopleForm.txtGroupExpirationDate.$invalid && peopleForm.txtGroupExpirationDate.$dirty }" class="text-right">
<input id="txtGroupExpirationDate" name="txtGroupExpirationDate"
type="date"
class="form-control"
ng-model="dt"
datepicker-popup="MM-dd-yyyy"
is-open="false"
ng-required="true" />
<input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
<span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$error.required && peopleForm.txtGroupExpirationDate.$dirty">
Expiration Date can not be empty
</span>
<span class="help-block" ng-show="peopleForm.txtGroupExpirationDate.$invalid && peopleForm.txtGroupExpirationDate.$dirty ">
Invalid date format
</span>
</div>
</p>
</div>
</div>
</form>
</div>
</body>
</html>
here is the Example.js
angular.module('ui.bootstrap.demo',['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl',function ($scope) {
$scope.dt = null;
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
$scope.groupExpirationDate = null;
console.log($scope.dt);
};
});
So the question is how to enable the Fifth scenario?

Related

Error message not displayed on form submit when pristine

I have following code for form validation. It shows error messages when I enter some value in textbox (dirty) and the value is invalid. But when I do not make any change (pristine) and click submit, the error messages are not shown. How to fire error messages in this scenario?
Note: When I removed pristine check, the error message is displayed even before submitting.
<!DOCTYPE html>
<html>
<head>
<!-- bootstrap -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<style>
body{padding-top: 30px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-resource.js"></script>
<script type="text/JavaScript">
var myApp = angular.module('myApp', []);
myApp.controller('myController', function ($scope) {
//Call function on form submit
$scope.submitForm = function (isValid) {
if (isValid) {
alert('Valid');
}
else {
alert('Invalid');
}
};
});
</script>
</head>
<body ng-app="myApp" ng-controller="myController">
<div class="myDiv">
<div class="col-sm-8 col-sm-offset-2">
<div class="page-header">
<h1>Validation</h1>
</div>
<form name="userForm" ng-submit="submitForm(userForm.$valid)" novalidate>
<!-- Prevents HTML5 validation using novalidate-->
<div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && !userForm.name.$pristine }">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="user.name" required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">
Name required.</p>
</div>
<div class="form-group" ng-class="{ 'has-error' : userForm.location.$invalid && !userForm.location.$pristine }">
<label>Location</label>
<input type="text" name="location" class="form-control" ng-model="user.location"
ng-minlength="3" ng-maxlength="8">
<p ng-show="userForm.location.$error.minlength" class="help-block">
Location is less than min length.</p>
<p ng-show="userForm.location.$error.maxlength" class="help-block">
Location more than max length.</p>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</body>
</html>

Try using userForm.$submitted instead of $pristine
For a good learning exercise and debugging try the following in view
<pre>{{userForm|json}}</pre>

howto use ui.bootstrap.datepickerPopup with html form

I'm using ui.bootstrap.datepickerPopup with angular forms, but i also want to use it with ASP.Net html forms. If i use an MVC EditorTemplate as below
//Date.cshtml
#{
var prop = ViewData.ModelMetadata.PropertyName;
var required = ViewData.ModelMetadata.IsRequired;
<p class="input-group" >
<input type="text" uib-datepicker-popup="dd/MM/yyyy" id="#prop" name="#prop" ng-model="#prop" #required class="form-control" ng-required="true" is-open="#(prop)Open" init-date="new Date()" value="#ViewData.Model"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="#(prop)Open = !#(prop)Open"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
}
I can select a date and it correctly posts. However when i try and edit a form with an existing Date value, i cannot get it to pre populate the date. Can the init-date be passed inline? I've tried to test this in a plunkr here. http://plnkr.co/edit/glVfsqNVst11IxRvF3tJ?p=preview

You have to set it through datepicker-options as shown below.
<input type="text" uib-datepicker-popup="dd/MM/yyyy" id="#prop" name="#prop" ng-
model="#prop" #required class="form-control" ng-required="true" is-
open="#(prop)Open" datepicker-options="{minDate:'#ViewData.DateOptions'}" value="#ViewData.Model"/>

try this instead ... bootstrap 3 datepicker version 4. You can set the default value as well
https://eonasdan.github.io/bootstrap-datetimepicker/
code snippets from the site ...
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker5'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker5').datetimepicker({
defaultDate: "11/1/2013",
disabledDates: [
moment("12/25/2013"),
new Date(2013, 11 - 1, 21),
"11/22/2013 00:53"
]
});
});
</script>
</div>
</div>
datepicker init has a bug... see this forum..
https://github.com/angular-ui/bootstrap/issues/2331

Html 5 -date picker open and close in event trigger

I want to click the image icon to open the calender pop for html5. I am using angularjs. Its version issue for ui-bootstrap-tpls. Some one please help me as soon as possible.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="https://code.angularjs.org/1.4.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>
<script>
angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
console.log($scope.dt);
};
});
</script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DatepickerDemoCtrl">
<pre>Date output: <em>{{dt}}</em></pre>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" ng-model="dt" ng-required="true" />
<input type="hidden" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
</div>
</body>
</html>

I´ll recommend you to try something like this.
<span class="input-group-addon" id="ID">text</span>
<input type="text" data-ng-model="MODEL"
class="form-control" data-uib-datepicker-popup
data-is-open="popup.opened" data-min-date="minDate"
data-max-date="maxDate" data-datepicker-options="dateOptions"
data-date-disabled="disabled(date, mode)" data-ng-required="true"
data-close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
data-ng-click="open()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
Let me know if it works.
What versions of angular Js, Datepicker and angular ui-bootstrap-tpls are you using?

Here it might be helpful to your situation.
Working fiddle :
fiddle link

Unable to fetch value using angular

I'm unable to get through a piece of code using angular js.
Actually I'm trying to fill in a form and pass data using AngularJS. I'm able to fetch all data except the date input textfield, which is populated on the click of a button and displayed on textfield.
Here's my code:
<div ng-controller="EmployeeController">
<form name="frmEmp" novalidate>
Employee Name:
<input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" required />
Salary:
<input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" required />
Date of Birth:
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default btn-sm calendar-icon" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
</span>
<input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
</div>
<input type="text" class="form-control input-sm datepickr" name="Dob" ng-model="emp.Dob" id="calendar-input" style="width: 120px;">
<input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save(emp)" />
</form>
</div>
And my controller looks like below:
myApp.controller('EmployeeController', ['$scope',function ($scope) {
$scope.Save = function (emp) {
alert("In employee\'s Save function\n" + emp);
$scope.emp = {
EName: emp.EName,
Salary: emp.Salary,
Dob: emp.Dob
};
alert("Ename: " + $scope.emp.EName);
console.log("Ename: " + $scope.emp.EName);
alert("Salary: " + $scope.emp.Salary);
console.log("Salary: " + $scope.emp.Salary);
alert("Dob: " + $scope.emp.Dob);
console.log("Dob: " + $scope.emp.Dob);
};
}
My concern is that I'm able to fetch Ename and Salary. But Dob returns 'undefined'.
For the datepicker i'm using the following script.
<script type="text/javascript">
datepickr('.calendar-icon', { altInput: document.getElementById('calendar-input'), dateFormat: 'd-m-Y' });
</script>
One more fact. I'm familiar with JQuery and trying to make my application purely on AngularJS.
Any help in this regard would be greatly appreciated.
Sorry for my poor English.:-)
Here's the plunk code:
PlunKr

Here is a working plnkr of your example.
The solution is to use bootstrap-tpls for angular integration, then you have access to datepicker directive.
Instead of your input, I just added:
I also made a few improvements in your controller (Save function param removed, emp object initialization on controller creation) and on save button (form validation, usage of ng-form directive). so final solution looks like this:
Html:
<head>
<meta charset="utf-8" />
<title>AngularJS demo</title>
<link data-require="bootstrap-css" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link data-require="bootstrap#*" data-semver="3.3.5" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<script data-require="jquery" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"> </script>
<script src="angular-ui-bootstrap.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="EmployeeController">
<div ng-form="frmEmp">
Employee Name:
<input type="text" class="form-control input-sm" name="EName" id="EName" ng-model="emp.EName" ng-required="true" /> Salary:
<input type="number" class="form-control input-sm" name="Salary" id="Salary" ng-model="emp.Salary" ng-required="true" /> Date of Birth:
<input type="text" class="form-control" uib-datepicker-popup="dd-MMMM-yyyy" ng-model="emp.Dob" is-open="opened" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="opened = true"> <i class="glyphicon glyphicon-calendar"></i></button>
</span>
<input type="button" id="btnSubmit" name="btnSubmit" class="btn btn-success btn-sm" value="Looks Good" ng-click="Save()" ng-disabled="frmEmp.$invalid" />
</div>
</body>
Controller:
var app = angular.module('plunker', ['ui.bootstrap']);
app.controller('EmployeeController', ['$scope', function($scope) {
$scope.emp = {};
$scope.Save = function() {
//alert("In employee\'s Save function\n" + $scope.emp);
alert("Ename: " + $scope.emp.EName);
console.log("Ename: " + $scope.emp.EName);
alert("Salary: " + $scope.emp.Salary);
console.log("Salary: " + $scope.emp.Salary);
alert("Dob: " + $scope.emp.Dob);
console.log("Dob: " + $scope.emp.Dob);
};
}])
And please make sure to have the css included.

Onsen ui and bootstrap datepicker

i've tried to use a datepicker in Onsen Ui , but no sucess! Seems ng-click is empty. I guess it's a problem with : JS dependencies (order matters!).
Working out onsen project , i have no problem
angular.module("MyModule", ["ui.bootstrap"]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
<div ng-app="MyModule">
<div class="form-group">
<label for="BirthDate" class="control-label col-sm-4">BirthDate</label>
<div class="col-sm-6">
<p class="input-group">
<input
type="text"
class="form-control"
id="BirthDate"
ng-model="NewEmployee.BirthDate"
datepicker-popup="dd.MM.yyyy"
is-open="Opened"
ng-click="Opened=true">
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="Opened=true">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
</div>
</div>
My doubt: in the code bellow where i can paste my dependencies ? Head section, or body?

I've uploaded an example of what you are trying to achieve.
Here is the link --> Download from here

Resources