I am Useing Bootstrap angular datepicker in a form to update my model 'User'.
I set this datepicker 'require' property is true.
UpdateUser.html:
<form name="userForm" novalidate>
<div class="form-group">
<label>Birthday</label>
<p class="input-group">
<input type="text" name="birthday" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="user.birthday" is-open="opened" datepicker-options="dateOptions" ng-required="true" />
<span class="input-group-btn">
<button type="button" class="btn btn-default"
ng-click="openDate($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<span>{{userForm.birthday.$invalid}}</span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Update</button>
</div>
</form>
UserCtrl.js:
mainApp.controller("detailCtrl", function($scope, $http, $routeParams, DemoService) {
$scope.user = DemoService.get({userId : $routeParams.userId});
$scope.openDate = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
});
So my question is:
Why {{userForm.birthday.$invalid}} is true when I first set the 'user.birthday' to the datepicker?
Plunker:
http://plnkr.co/edit/DkGEVJ?p=preview
This is weird, but changing the initial birthday from '1403575208000' to new Date(1403575208000) fixes this problem.
http://plnkr.co/edit/Wut4sJT5hFcG6EfSYe8t?p=preview
There are a lot of different problems that look the same at angular-bootstrap Github forums.
I am using angular-bootstrap version 0.13.0 and I found that the datepicker has the value:
userForm.$invalid = true
when the date field is empty and other situations, and does not work well.
When you want to validate it, problems arise. In such cases, to avoid datepicker validation I used the following code:
<div class="form-group">
<button type="submit" class="btn btn-primary" ng-disabled="userForm.$error['required'] !== undefined">Update</button>
</div>
Here is my plunkr
http://plnkr.co/edit/Sqog7OqudQkww9WsCUT2?p=preview
There you can see the value of userForm.$error and decide to use ng-required=true or false at 'birthday'.
Hope it helps!
Related
I am trying to use uib-datepicker-popup but am running into an issue that once the calendar opens and I choose a date, I cannot reopen the calendar without refreshing the screen. I step through the function call on the ng-click and it sets the is-open flag to true but the popup doesn't show after the first time.
This is the HTML:
<span class="input-group" >
<input type="text" class="input-sm " uib-datepicker-popup="{{format}}"
ng-model="requestDate" is-open="opened1"
datepicker-options="dateOptions" close-text="Close" />
<span class=" input-sm" >
<button type="button" class="btn btn-default" ng-click="open1()">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</span>
And the controller:
$scope.format = 'yyyy-MM-dd';
$scope.dateOptions = {
'year-format': "'yy'",
'starting-day': 1
};
$scope.open1 = function() {
$scope.opened1 = true;
};
I don't understand why it won't open...any thoughts?
thank you all for your help. I did a lot more searching after I posted the question and came across something that fixed the issue...not sure why it made it work but it does.
I changed the open1 function to the following...I got it to work first for one and then extended to so I can use it for all...
$rootScope.openCalendar = function($event,whch) {
$event.preventDefault(); <- I had tried this before
$event.stopPropagation(); <- I had tried this before
$rootScope.datepicker = {[whch]: true};
};
In my HTML I changed both lines: (look for the <--)
<input type="text" class="input-sm " uib-datepicker-popup="{{format}}"
ng-model="requestDate" is-open="datepicker.opened1" <--
datepicker-options="dateOptions" close-text="Close" />
<span class=" input-sm" >
<button type="button" class="btn btn-default" ng-click="openCalendar($even, 'opened1')"> <--
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
This works really well from what I can see so far. I guess I could shorten it a bit by using Lex's suggestion too....
Thanks again!
In this plunk I have an Angular UI date picker and a message that should be shown only when the date is valid. The problem is that the message is always shown, even when form.$valid is true. Note that if you enter a valid or invalid date and then click on Validate, an alert will display correctly that the date is valid or invalid respectively.
Why is the validation message shown all the time, even when form.$valid is true?
Javascript
var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller('ctl', function ($scope) {
$scope.dtFrom = new Date ();
$scope.config1 = {};
$scope.config1.opened = false;
$scope.open1 = function(event){
event.preventDefault();
event.stopPropagation();
$scope.config1.opened = true;
};
$scope.validate = function(form){
if (!form.$valid) {
alert("Date invalid");
}
else {
alert("Date valid");
}
}
});
HTML
<div ng-controller="ctl">
<form name="form1" ng-submit="validate(form1)" novalidate>
<p class="input-group" name="dtFrom" style="width:160px;margin-bottom:0px;">
<input type="text" class="form-control" ng-model="dtFrom"
is-open="config1.opened" uib-datepicker-popup="MM-dd-yyyy"
close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<span ng-show="!form1.dtFrom.$valid">Invalid Date</span>
<br/>
<button type="submit">Validate</button>
</form>
</div>
You should create name for the input
<input type="text" class="form-control" ng-model="dtFrom"
is-open="config1.opened" uib-datepicker-popup="MM-dd-yyyy"
close-text="Close" name="date" />
<span ng-show="!form1.date.$valid">Invalid Date</span>
Here is plnkr
http://plnkr.co/edit/gc0Oefhok6Gjim66UG0K?p=preview
How can I prevent the datepicker popup from opening at the same time when I click on only 1 input?
Plunkr
<form>
<div class="form-group">
<label for="fromDate">From:</label>
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-weeks="false" ng-click="open($event)" name="fromDate" id="fromDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
<div class="form-group">
<label for="toDate">To:</label>
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="toDate" is-open="opened2" datepicker-options="dateOptions" ng-required="true" close-text="Close" show-weeks="false" ng-click="open($event)" name="toDate" id="toDate" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</div>
</form>
I looked at your plunkr. In your script.js file you have the following
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
$scope.opened2 = true;
};
$scope.opened = true; and $scope.opened2=true; are both being set. This is forcing both of them to open. You are calling this function when either of the calendar buttons is clicked
ng-click="open($event)"
is-open will force the calendar to show when the variable is set somewhere else in code as well. Remember it is 2-way binding
As for your solution. A simple way I can think to fix it is to pass another variable into your open method telling it which button was clicked so
$scope.open = function($event, calId) {
$event.preventDefault();
$event.stopPropagation();
if(calId===1) $scope.opened = true;
if(calId===2) $scope.opened2 = true;
};
Then in your html for the buttons change to the following passing in a 1,2,3 etc.. for whichever datepicker on the page you want to display.
ng-click="open($event,1)"
I am using the angular-ui bootstrap datepicker component. on one view where I have two date fields, the datepicker opens up and after closed it opens up again when clicked fine.
On another page, after once opened and closed, the datepicker does not open up anymore.
Surely I'm missing something here, but I gave up after hours of trying to find it.
Can you help ?
the HTML section of the datepicker looks as follows:
<div class="input-group">
<input type="text" class="input-sm-7" datepicker-popup="dd/MM/yyyy" is-open="opened"
datepicker-options="dateOptions" ng-model="singleDate"
close-text="Close" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i
class="fa fa-calendar"></i>
</button>
</div>
The JS code in the controller looks like this:
$scope.dateOptions = {
formatYear: 'yy',
startingDay: 1
};
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
This is a known issue and there is a hack for it. Try this.
$scope.datePicker = {};
$scope.open = function ($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.datePicker.opened = true;
};
Change in the Html
<div class="input-group">
<input type="text" class="input-sm-7" datepicker-popup="dd/MM/yyyy" is-open="datePicker.opened"
datepicker-options="dateOptions" ng-model="singleDate"
close-text="Close" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i
class="fa fa-calendar"></i>
</button>
</div>
Here is code which I am to trying to run in my application. Even I have the same versions of js and css. here is the plunker link. demo of original code, here.
//html code
<div ng-controller="DatepickerDemoCtrl">
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" />
<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>
//Js code
var DatepickerDemoCtrl = function ($scope) {
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
};
This code I have applied exactly same in my controller, I have included dependency modules also, I have same versions as in plunker. but is not working in my application. I am struggling from last 2 days. Please somebody let me know the reason.
Here is my html
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="dt" is-open="opened" />hi{{dt}}
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="opencal($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
....//my ctrl is home ctrl here so this code wrapped in homectl.
Here is my js code
//app code.
var app1 = angular.module("HomeApp",['uiSlider','ui.bootstrap']);
//this where i defined dependency.
app1.controller('HomeCtrl', function( $scope,$http,$q,$location,$window,$routeParams,$modal, $log) {
//here is my datepicker code.
$scope.opencal = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
};
...//my rest code goes below
Queries I have is
I cant see date when I select date from calendar.(in {{dt}}).
I need to pass selected date to my home controller.