I used a pop-over to show some details. I need a datepicker in that, but script is not working.
<div class="container" style="height:auto;">
<script type="text/ng-template" id="abc.html">
<div class="input-group date" id="datepicker">
<input class="form-control" name="startDate" ng-model="startDate" name="startDate"></input>
<span class="input-group-addon" >
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</script>
</div>
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
format:"dd-M-yyyy",
changeMonth: true,
changeYear: true,
buttonImage: "images/calendar.gif",
beforeShowDay: unavailable
});
});
</script>
I think there shouldn't be any tags in script tag. And the datepicket should be added to input. Try this.
<div class="container" style="height:auto;">
<script type="text/ng-template" id="abc.html"></script>
<div class="input-group date" >
<input class="form-control" id="datepicker" name="startDate" ng-model="startDate" name="startDate"></input>
<span class="input-group-addon" >
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#datepicker').datepicker({
format:"dd-M-yyyy",
changeMonth: true,
changeYear: true,
buttonImage: "images/calendar.gif",
beforeShowDay: unavailable
});
});
</script>
Related
I'm facing some UI problems in my project and i don't know if it's because JavaScript files i import or not? and I'm using angular JS 1.6.3 and bootstrap 3.3.7
here is the head of the html page i run :
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/cat.js"></script>
<script type="text/javascript" src="angular/angular.js"></script>
<script type="text/javascript" src="angular/angular-messages.js"></script>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="angular/angular-sanitize.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-tpls-2.5.0.min.js"></script>
<script type="text/javascript" src="js/dialogs.min.js" type="text/javascript"></script>
</head>
<body data-ng-controller="CategoryController">
<div class="col-md-8 col-sm-8 col-xs-8" style="position: absolute;top:0;bottom: 0;left: 0;right: 0;margin: auto;">
<div class="panel panel-info spacer">
<div class="panel-heading">
<input type="checkbox" data-ng-model="checked" aria-label="Toggle ngHide" onchange="hideAndShow()"/><b> Category Form</b>
</div>
<div class="panel-body" class="check-element animate-show-hide" data-ng-hide="checked">
<div class="alert alert-success" role="alert" data-ng-if="successMessage1" id="success-alert1">
<strong>Success!</strong> {{successMessage1}}
</div>
<div class="alert alert-danger" role="alert" data-ng-if="errorMessage1" id="error-alert1">
<strong>Error!</strong> {{errorMessage1}}
</div>
<form class="form-horizontal" name="catForm1" novalidate>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-3" for="idCategory">Category ID</label>
<div class="col-md-5 col-sm-5 col-xs-5">
<input type="text" class="form-control" placeholder="Category ID" disabled="disabled">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-3" for="nameCategory">Category Name</label>
<div class="col-md-5 col-sm-5 col-xs-5" data-ng-class="{ 'has-error': catForm1.nameCategory.$touched && catForm1.nameCategory.name.$invalid}">
<input type="text" class="form-control" data-ng-model="category.nameCategory" name="nameCategory" placeholder="Enter Category Name"
data-ng-minlength="6"
data-ng-maxlength="20"
required/>
<div class="help-block" data-ng-messages="catForm1.nameCategory.$error" data-ng-if="catForm1.nameCategory.$touched">
<div data-ng-messages-include="messages.html"></div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-3 col-xs-3 right">
<div class="form-actions">
<button data-ng-click="catForm1.$valid && saveCategory()" class="btn btn-primary btn-sm">Submit</button>
<button data-ng-click="reset()" class="btn btn-default btn-sm" type="reset">Reset</button>
</div></div><br><br></form></div></div>
<div class="panel panel-info spacer">
<div class="panel-heading"><b>Category List</b></div>
<div class="panel-body">
<form class="form-horizontal">
<div class="col-md-4 col-sm-4 col-xs-4 right">
<div class="input-group">
<input type="text" class="form-control" data-ng-model="keyword" placeholder="Search">
<div class="input-group-btn">
<button data-ng-click="search()" class="btn btn-primary"><i class="glyphicon glyphicon-search"></i></button>
</div></div></div></form><br><br>
<div class="alert alert-success" role="alert" data-ng-if="successMessage2" id="success-alert2">
<strong>Success!</strong> {{successMessage2}}
</div>
<div class="alert alert-danger" role="alert" data-ng-if="errorMessage2" id="error-alert2">
<strong>Danger!</strong> {{errorMessage2}}
</div>
<div id="categoryList">
<div class="row" style="margin-right: 10px;margin-left: 10px;">
<div class="col-xs-3"><b>CATEGORY ID</b></div>
<div class="col-xs-6"><b>CATEGORY NAME</b></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
</div>
<hr style="border-color: #cccccc;margin-bottom:5px !important; margin-top:5px !important;margin-right: 10px;margin-left: 10px;" />
<div class="row" data-ng-repeat-start="c in categories.content" data-ng-class-odd="'alt'" style="margin-right: 10px;margin-left: 10px;">
<div class="col-xs-3">{{c.idCategory}}</div>
<div class="col-xs-6">{{c.nameCategory}}</div>
<div class="col-xs-1 text-right"><button type="button" data-ng-mouseover="showEditRow(c)" class="btn btn-primary btn-sm">Edit</button></div>
<div class="col-xs-1"><button type="button" data-ng-click="removeCategory(c.idCategory)" class="btn btn-danger btn-sm">Remove</button></div>
</div>
<div class="row" data-ng-repeat-end="" data-ng-show="active==c" data-ng-class-odd="'alt'" style="margin-right: 10px;margin-left: 10px;">
<div class="col-xs-3"></div>
<form name="catForm2" novalidate>
<div class="col-xs-6" data-ng-class="{ 'has-error': catForm2.nameCategory2.$touched && catForm2.nameCategory2.$invalid}">
<input class="form-control input-sm" data-ng-model="category.nameCategory2" name="nameCategory2"
data-ng-minlength="6"
data-ng-maxlength="20"
required/>
<div class="row" class="help-block" data-ng-messages="catForm2.nameCategory2.$error" data-ng-if="catForm2.nameCategory2.$touched">
<div data-ng-messages-include="messages.html"></div>
</div>
</div>
<div class="col-xs-1"><button type="button" data-ng-click="updateCategory()" class="btn btn-default btn-sm">Save</button></div>
<div class="col-xs-1"></div>
</form>
</div>
</div>
<br>
<div class="col-md-8 col-sm-8 col-xs-8">
<ul class="nav nav-pills">
<li class="clickable" data-ng-repeat="p in pages track by $index" data-ng-class= "{active:$index==currentPage}" >
<a data-ng-click="goToPage($index)">{{$index}}</a>
</li>
</ul>
</div></div></div></div></body></html>
and here it is the javascript file :
var app=angular.module('crm',['ngMessages']);
app.controller('CategoryController', function($scope,$http,$document,$q){
$scope.categories=[];
$scope.keyword=null;
$scope.currentPage=0;
$scope.category={nameCategory:null};
$scope.successMessage1 = '';
$scope.errorMessage1 = '';
$scope.done = false;
$scope.successMessage2 = '';
$scope.errorMessage2='';
//show and hide a DIV
$scope.hideAndShow=function(){
$scope.checkbox = element(by.model('checked'));
$scope.checkElem = element(by.css('.check-element'));
expect($scope.checkElem.isDisplayed()).toBe(true);
$scope.checkbox.click();
expect($scope.checkElem.isDisplayed()).toBe(false);
};
//find a category by a keyword
$scope.search=function(){
$http.get("/catByKW?kw="+$scope.keyword+"&page="+$scope.currentPage)
.then(function(response){
$scope.categories=response.data;
$scope.pages=new Array(response.data.totalPages);
});
};
//index of category list
$scope.goToPage=function(p){
$scope.currentPage=p;
$scope.search();
};
//reset catForm1
$scope.reset1=function(){
$scope.successMessage1='';
$scope.errorMessage1='';
$scope.category={};
$scope.catForm1.$setPristine(); //reset Form
};
//save a new category
$scope.saveCategory=function(){
$http({
method : 'GET',
url : '/saveCat?nameCategory='+$scope.category.nameCategory,
headers : {'Content-Type':'application/x-wwww-form-urlencoded'}
})
.then(
function successCallback(response){
//var x = document.forms['catForm']['nameCategory'].value;
//x='';
document.forms['catForm1'].reset1();
console.log('Category created successfully');
$scope.successMessage1 = 'Category created successfully';
$scope.errorMessage1='';
$scope.done = true;
setTimeout(function() {
$("#success-alert1").fadeIn(2000).fadeOut(4000);
});
//$scope.category={};
//$scope.catForm.$setPristine();
},
function errorCallback(errResponse){
console.error('Error while creating Category : Duplicate entry!');
$scope.errorMessage1 = 'Error while creating Category: Duplicate entry! ' + errResponse.data.object;
$scope.successMessage1='';
setTimeout(function() {
$("#error-alert1").fadeIn(2000).fadeOut(4000);
});
}
);
};
//show a row for updating a category
$scope.showEditRow=function(r){
if($scope.active != r){
$scope.active = r;
}
else{
$scope.active = null;
}
};
//remove a category
$scope.removeCategory=function(catID) {
$http.delete('/deleteCat?catId='+catID)
.then(
function successCallback(response){
$scope.search();
$scope.successMessage2 = 'Category deleted successfully';
$scope.errorMessage2='';
setTimeout(function() {
$("#success-alert2").fadeIn(2000).fadeOut(4000);
});
},
function errorCallback(errResponse) {
console.error('Error while removing Category with id :'+catID);
$scope.errorMessage2 = 'Error while deleting Category: ' + errResponse.data;
$scope.successMessage2='';
setTimeout(function() {
$("#error-alert2").fadeIn(2000).fadeOut(4000);
});
}
)
};
});
and here is what i got
and this is i got on the console
console
You are added two angular.js dependencies on your page. Please use either angular.js or angular.min.js and try
And also cat.js contains angular code please put that script after angular.js
Hope this helps
I need one example for validations on dynamic added fields. Here is my page.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js">
</script>
<title>Add Remove in AngularJS</title>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.deleted = [];
$scope.inputs = [];
$scope.addRow = function(){
$scope.inputs.push({name:'', age:''});
};
$scope.removeRow = function(index, input){
// alert(index);
// alert(input);
$scope.deleted.push(input);
$scope.inputs.splice(index,1);
};
});
</script>
</head>
<body style="background-color: gray; margin-top: 10px; ">
<center>
<div class="row" ng-app="myApp" ng-controller="myCtrl">
<div class="col-md-6">
<div class="panel panel-flat">
<div class="panel-header">
<h4>
Person Address
<button ng-click="addRow()">Add</button>
</h4>
</div>
<div class="panel-body">
<form name="form" class="form-horizontal">
<div ng-repeat="input in inputs">
<div class="form-group" ng-class="{'has-error' : form.name.$invalid}">
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name[$index]" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span class="help-block" ng-show="form.name[$index].$error.pattern">Alphabet only</span>
<span class="help-block" ng-show="form.name[$index].$error.minlength">Too Short</span>
<span class="help-block" ng-show="form.name[$index].$error.maxlength">Too Long</span>
<span class="help-block" ng-show="form.name[$index].$error.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span ng-show="form.age.$invalid && form.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button ng-click="removeRow($index, input)">Remove</button>
<hr>
</div>
</form>
</div>
</div>
</div>
<!-- inputs :{{inputs}}<br>deleted : {{deleted}} -->
</div>
</center>
</body>
</html>
You can add a fonction to you controller :
app.controller('myCtrl', function($scope) {
//...
$scope.validationFn = function () {
//do you validation here
};
then you just need to modify
<form name="form" class="form-horizontal" ng-submit="validationFn()">
Here is the answer:
<div class="panel-body"><form name="form" class="form-horizontal">
<div ng-repeat="input in inputs"><ng-form name="sfIn"><div class="form-group" >
<label class="col-md-2 control-label">Name</label>
<div class="col-md-10">
<input type="text" ng-model="input.name" name="name" ng-maxlength="45" ng-minlength="3"
class="form-control" ng-pattern="/^[a-zA-Z]+$/" required />
<span
class="help-block" ng-show="sfIn.name.$error.pattern">Alphabet only</span>
<span
class="help-block" ng-show="sfIn.name.$error.minlength">Too Short</span>
<span
class="help-block" ng-show="sfIn.name.$error.maxlength">Too Long</span>
<span
class="help-block" ng-show="sfIn.name.$touched.required || sfIn.name.$error.required ||
sfIn.name.$dirty.required">required</span>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Age</label>
<div class="col-md-10">
<input type="text" ng-model="input.age" name="age"
class="form-control" ng-pattern="/^[0-9]{0,3}$/" /><br>
<span
ng-show="sfIn.age.$error.pattern">Number
length should be 3</span>
</div>
</div>
<button
ng-click="removeRow($index, input)">Remove</button>
</ng-form>
<hr>
</div>
</form>
</div>
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
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?
I use Bootstrap-datetimepicker in a apache cordova application.
<div class="col-sm-6 form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" readonly="readonly" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<script>
$(function () {
$('#datetimepicker').datetimepicker({
ignoreReadonly: true
});
});
</script>
works perfectly on simulator but can't change date with picker on "ipad". The picker closes before changing date.