Develop Reference

ng-bootstrap date format starts with zero

I am using angular with ng-bootstrap date component. Datepicker working well. But when I select today date shows as 2018-11-6.
I need change format like 2018-11-06 (leading zero). How can I change it?
<div class="input-group">
<input class="form-control" placeholder="yyyy-mm-dd"
name="mydate" [(ngModel)]="bankDetailDate" ngbDatepicker #d="ngbDatepicker">
<div class="input-group-append">
<button class="btn btn-outline-secondary fa fa-calendar" (click)="d.toggle()" type="button"></button>
</div>
</div>

How to make a clickable datepicker glyphicon-calender icon to work properly?

Here are the code for enabling datepicket to work in firefox
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribute("type", "date");
if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" />\n');
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n');
}
</script>
<script>
$(function(){
if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'dd-mm-yy'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
Below are the html code
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
What I want is when I click on the glyphicon icon/button, that the calendar also appear so that I can choose a date to input into the same field just like the input type=date.

<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<label class="input-group-addon" for="datefield">
<i class="glyphicon glyphicon-calendar"></i>
</label>
</div>
</div>
Change span containing glyphicon-calendar to label, add attribute for with the ID of parent datetimepicker (in this case ID is datefield), your glyphicon-calendar icon is now clickable and will open the date time picker.
Thanks #Washington Guedes for original answer
btw this solution won't work if you nest your date time picker in html table for some reason - thought this info might be useful... you have to use bootstrap.

Uib datepicker ng-change not firing on date selection

I'm trying to trigger a call to a function on change of the date in the uib datepicker however the ng-change attribute doesn't seem to be getting applied. I've tried using a watcher but since we're not using $scope in our controller I haven't been able to find a solution that works with that method. See code below:
<span class="input-group">
<span class="input-group-btn">
<button class="btn btn-default"
data-test="start-date-button"
ng-click="startDateIsOpen = !startDateIsOpen"
type="button">
<i class="fa fa-calendar"></i>
<span class="sr-only" translate>{{::'datePicker.openDatePicker'}}</span>
</button>
</span>
<input class="form-control"
is-open="startDateIsOpen"
name="startDate"
ng-attr-aria-describedby="{{conditionsController.showError(conditionsController.newConditionAttributes, 'startDate') ?
'new-condition-start-date-errors' : undefined}}"
ng-change="conditionsController.setMinStartDate(conditionsController.newCondition.editCondition.startDate)"
ng-model="conditionsController.newCondition.editCondition.startDate"
ng-required="conditionsController.newCondition.editCondition.startTime"
popup-placement="top-left"
type="text"
uib-datepicker-popup="{{dateFormat}}"/>
</span>
Any ideas on why this wouldn't be working?

Get bootstrap-datetimepicker to appear on field and on icon, without duplicating

I am trying to get bootstrap-datetimepicker to work the way I want it to. Normally the datetime selector only pops up when clicked on the icon. But I want it to pop up when clicked on the field and on the icon.
<div class="input-group datetime datepicker">
<input class="form-control" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
I found out that if I added the same class (datepicker) on the input field the popup will appear when clicked on the field, which is what I want.
The problem however is that if I click on the field first and then the icon the date picker that popped up when clicked on the field does not disappear. Which means there ends up being two date pickers on the screen.
However if I click on the glphyicon first and then the field it works properly. As in, when the field is clicked the date picker on time disappears and the on field appears. How do I make it so that the same thing happens if the field is clicked first and then the icon.
<div class="input-group datetime datepicker">
<input class="form-control datepicked" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>
Here is the javascript codes that calls datetimepicker:
$(document).on('ready page:change', function() {
$('.datepicker').datetimepicker({
format: 'MMM Do YYYY',
pickTime: false,
collapse: true
});
});

You can simply focus the input when clicking on the input group addon span.
$('.datepicker').each(function(k, v) {
var $input = $(v).find('.make-datepicker');
$input.datetimepicker({
format: 'MMM Do YYYY',
collapse: true
});
$(v).find('span.input-group-addon').click(function(e) {
$input.focus();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/src/js/bootstrap-datetimepicker.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/v4.0.0/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<br/>
<div class="input-group datetime datepicker">
<input class="form-control make-datepicker" type="text" name="leaving_time" id="leaving_time">
<span class="input-group-addon">
<i class="glyphicon glyphicon-time"></i>
</span>
</div>

Late answer but I've found a better solution for anyone need.
<div class="col-md-6 input-group">
<input type="text" id="testdate" name="testdate" class="form-control" value="">
<label class="input-group-addon btn" for="testdate">
<span class="fa fa-calendar"></span>
</label>
</div>

why is the AngularUI bootstrap datepicker not popping up?

trying out angularUI bootstrap's popup datepicker demo. Demo embedded in their page works, but my minimal plunker does not - button click does not popup the calendar. Any idea why?
JS:
$scope.open = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.opened = true;
console.log('opened is now: %s', $scope.opened);
};
HTML:
<h4>Popup</h4>
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" ng-model="dt" is-open="opened">
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>

The problem is because you didn't supply datepicker-popup the format for the datepicker popup in your ng-model="dt" input.
simply change this
<input type="text" class="form-control" ng-model="dt" is-open="opened">
to this
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened">
Check this working plunker.