Is there a way to change the starting day for the ui-bootstrap date picker for AngularJS? At the moment, from left to right, the days starts Monday and ends on Sunday, and I would like the days to start on Saturday and end on Friday.
Here is a plunker
<p class="input-group">
<input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
You already assign startingDay, put it to 6 and it will start on saturday.
Related
ng-change on uib-datepicker-popup is not working
Code in my html -
<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="popup1.opened" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" ng-focus="myFocus(123)" ng-change="mychange(987)"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open1()"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
Code in my controller -
$scope.myChange = function(para1) {
console.log("myChange -- "+para1);
}
Expecting mychange function to trigger whenever user types in a different date or when he uses the picker to select a date.
Plunker link - https://plnkr.co/edit/e20qSViEAh9dZ6GEFnVh?p=preview
I am trying to custom the ui.bootstrap.datepicker there http://plnkr.co/edit/?p=preview
I would like to set the format to dd-MM-yy and make it work with the input with the mask (the second one below 'Popup' in the plunkr)
<div class="col-md-6">
<p class="input-group">
<input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" 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>
I have added a new format in script.js :
$scope.formats = ['dd-MM-yy', 'dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
Is there a way to change the format of the second datepicker (under 'Popup'), the one with <input type="date"...> ?
Thanks.
HTML5 date input types do not support custom formats. See Is there any way to change input type="date" format? for more information. I think it is better to change input type to text, like the first one.
Using Angularjs with spring(java)
I have following Angularjs bootstrap datepicker. it shows error when field is empty i am trying to inplace mindate validation which is today's date. if user type min-date should display error msg.
I tried placing check like 'form.offerStartDate.$error.mindate' but there is no property for mindate in error object. any help appreciated.
<p class="input-group">
<input type="text" name="offerStartDate" class="form-control" ng-required="true"
ng-class="{error: form.offerStartDate.$dirty && form.offerStartDate.$invalid}"
datepicker-popup="MM-dd-yyyy" ng-model="formData.offerStartDate"
is-open="startDateOpened" min-date="minDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
close-text="Close" /> <span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event,'startDate')">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div ng-show="form.offerStartDate.$dirty && form.offerStartDate.$invalid">
<small class="err-msg" ng-show="form.offerStartDate.$error.required">
Offer Start Date is required.
</small>
<small class="err-msg" ng-show="form.offerStartDate.$error.mindate">
Offer mindate is today's date.
</small>
</div>
Try to change min-date to min in input
It may be related with this issue:
https://github.com/angular-ui/bootstrap/issues/2189
i use Anguar-Ui Bootstrap http://angular-ui.github.io/bootstrap/
and i have implemented the "Accordion" from Angular UI and now i want add inside this Accordeon the Popup DatePicker from Angular UI.
The Problem is, if i click inside the Accordeon on the Date it opens the Popup so that i can choose the date but it opens this Popup inside the Accordeon. Is it possible that this popup is opened outside the Accordion window ? The Accordion Window is to small to display the whole date selector.
I hope you understand what i mean..
the code looks like that, the controller for the datePicker is the same as in the Angular UI example:
<accordion close-others="oneAtATime">
<accordion-group heading="Filter">
<p class="input-group">
<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" 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>
</accordion-group>
</accordion>
EDIT: ok i have solved the problem i must only add "datepicker-append-to-body="true"" and now it works..
Here is the complete code, using the example used at Angular UI, showing where to set datepicker-append-to-body="true"
<div ng-controller="datePickerController" >
<div class="row">
<div class="col-md-6">
<p class="input-group">
<input type="text" class="form-control" datepicker-append-to-body="true" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" 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>
The modification is on line 5, on the input element
The Angular Bootstrap Datepicker is giving the format
Wed Nov 02 2011 00:00:00 GMT+0000 (Hora padrão de GMT)
How can I change to ?
2011-11-02
HTML
<div ng-controller="FetchCtrl">
<input type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="data_inicial"
ng-change="updateUrl()"
is-open="opened"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<h1>{{data_inicial}}</h1>
Thank you
Hugo
Set date filter like date:'yyyy-MM-dd'
In your case:
<div ng-controller="FetchCtrl">
<input type="text"
class="form-control"
datepicker-popup="{{format}}"
ng-model="data_inicial"
ng-change="updateUrl()"
is-open="opened"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
<h1>{{data_inicial | date:'yyyy-MM-dd'}}</h1>
Other formats you can find here
For controller try:
JS
$scope.data_inicial = new Date();
// ....
var date = '0' + $scope.data_inicial.getDate();
var month = '0' + ($scope.data_inicial.getMonth() + 1); //Months are zero based
var year = $scope.data_inicial.getFullYear();
$scope.fixedDate = year + "-" + month + "-" + date ;
Judging on documentation, you may format using attributes, for example.