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
Related
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'm referring this one example on Official site
Whenever I clicked on calendar icon it open two date-pickers. What I want is single datepicker for single date input.
You can bind different variables to the is-open attribute as following:
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="isOpened1" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="isOpened1 = !isOpened1"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
<p class="input-group">
<input type="date" class="form-control" uib-datepicker-popup ng-model="dt" is-open="isOpened2" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="isOpened2 = !isOpened2"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
Then, handle the click event to change the bound variable.
See how it works
Use this code.
For the two boxes they gives two calender box. use single one.
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
.full button span {
background-color: limegreen;
border-radius: 32px;
color: black;
}
.partially button span {
background-color: orange;
border-radius: 32px;
color: black;
}
</style>
<div ng-controller="DatepickerDemoCtrl">
<pre>Selected date is: <em>{{dt | date:'fullDate' }}</em></pre>
<h4>Inline</h4>
<div style="display:inline-block; min-height:290px;">
<uib-datepicker ng-model="dt" min-date="minDate" show-weeks="true" class="well well-sm" custom-class="getDayClass(date, mode)"></uib-datepicker>
</div>
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" 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 class="row">
<div class="col-md-6">
<label>Format:</label> <select class="form-control" ng-model="format" ng-options="f for f in formats"><option></option></select>
</div>
</div>
<hr />
<button type="button" class="btn btn-sm btn-info" ng-click="today()">Today</button>
<button type="button" class="btn btn-sm btn-default" ng-click="setDate(2009, 7, 24)">2009-08-24</button>
<button type="button" class="btn btn-sm btn-danger" ng-click="clear()">Clear</button>
<button type="button" class="btn btn-sm btn-default" ng-click="toggleMin()" uib-tooltip="After today restriction">Min date</button>
</div>
</body>
</html>
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?