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
Related
I have a form made with Bootstrap 4 and AngularJS and I want to make a simple form validation where I could:
validate input fields AFTER user has touched them,
show two different error messages depending on validation constraint,
create custom validation constraint (e.g. compare password and password confirmation field).
1.
In previous versions of Bootstrap you could do something like:
<div class="form-group" ng-class="{'has-error': userForm.email.$invalid && userForm.email.$touched}">
but with Bootstrap 4, there is no 'has-error' class. I tried to use 'is-invalid' class instead
<div class="form-group" ng-class="{'is-invalid': userForm.email.$invalid && userForm.email.$touched}">
but nothing happens. I managed to make it work as it is shown in Bootstrap 4 Documentation but validation happens only after the form submission and not when user has touched the input field.
2.
There are no error messages in Bootstrap 4, only 'invalid-feedback' and I can't figure out how to change message text depending on which constraint was violated. I tried something like:
<div class="invalid-feedback">
<p ng-show="userForm.email.$error.required">Required</p>
<p ng-show="userForm.email.$error.email">Enter a valid email</p>
</div>
but this does not work.
3.
I tried to make an Angular directive but because 1. and 2. didn't work I couldn't test this.
Any help will be appreciated.
UPDATE
As Peter Wilson suggested, nothing was wrong with my code. The code didn't work because my form was in a modal window and modal window must have a separate controller in AngularJS to be able to work correctly.
the is-invalid class is the right answer you may have another problem with your form so check my below demo
Note to test touched input you have to focus on the input and then leave focus to trigger touched state
angular.module('myApp',[])
.controller('myCtrl',function(){
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script>
<div ng-app="myApp" class="container">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div ng-controller="myCtrl" class="container">
<form name="loginForm" novalidate>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" ng-model="email" required class="form-control" name="email" ng-class="{'is-invalid':loginForm.email.$error.required && loginForm.email.$touched}" placeholder="Enter email">
<small ng-show="loginForm.email.$error.required && loginForm.email.$touched" id="emailHelp" class="form-text text-danger">email is required.</small>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
I'm trying to build a counter functionality. I'm using AngularJS with Bootstrap button group and I'm not sure where the conflict is. Below is my code. Can someone please help?
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<body>
<div ng-app="meetingDetail" ng-controller="meetingDetailCtrl">
<div class="col-md-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-sm">
<input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vYes" autocomplete="off">Yes
</label>
<label class="btn btn-warning btn-sm">
<input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vNo" autocomplete="off"> No
</label>
<label class="btn btn-info btn-sm">
<input type="radio" name="radioSecondBy" ng-click = "yesCount = yesCount+1" id="vAbstain" autocomplete="off"> Abstain
</label>
</div>
{{yesCount}}
</div>
<script>
var app = angular.module('meetingDetail', []);
app.controller('meetingDetailCtrl', function($scope) {
$scope.yesCount= 0;
});
</script>
</body>
</html>
Radio buttons don't have click event.
Put click event on label instead of radio button
Like this
<label ng-click = "yesCount = yesCount+1" class="btn btn-info btn-sm">
<input type="radio" name="radioSecondBy" id="vAbstain" autocomplete="off"> Abstain
</label>
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div ng-app="meetingDetail" ng-controller="meetingDetailCtrl">
<div class="col-md-12">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-success btn-sm" ng-click = "yesCount = yesCount+1">
<input type="radio" name="radioSecondBy" id="vYes" autocomplete="off">Yes
</label>
<label class="btn btn-warning btn-sm" ng-click = "yesCount = yesCount+1" >
<input type="radio" name="radioSecondBy" id="vNo" autocomplete="off"> No
</label>
<label ng-click = "yesCount = yesCount+1" class="btn btn-info btn-sm">
<input type="radio" name="radioSecondBy" id="vAbstain" autocomplete="off"> Abstain
</label>
</div>
{{yesCount}}
</div>
</div>
<script>
var app = angular.module('meetingDetail', []);
app.controller('meetingDetailCtrl', function($scope) {
$scope.yesCount= 0;
});
</script>
</body>
</html>
ng-click does not work on radio buttons. You can use either ng-change or watch the variable
1) ng-change
<input type="radio" name="radioSecondBy" ng-change= "yesCount = yesCount+1" id="vYes" autocomplete="off">Yes
2) $watch
$scope.$watch('yesCount', function(value) {
$scope.yesCount = $scope.yesCount + 1;
});
here is the similar question
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
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
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?