I'm currently working on a angular datepicker. To do so, I use the UIBootstrap datepicker. But I'm facing a problem. I need to use the init-date attribute :
init-date : The initial date view when no model value is specified.
The attribute seems to be available only on the datepicker directive. The fact is that I sue the popup datepicker and not the datepicker himself. There is the html for the datepicker-popup
Html
<input type="text" class="form-control " datepicker-popup="dd/MM/yyyy" ng-model="date" is-open="opened" datepicker-options="dateOptions" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openCalendar($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
I want to know If there is something like the init-date for the popup-datepicker. I had thougth about the datepicker-options but I wasn't capable of doing something who works with this idea. Nevertheless, is it possible to make it works with this datepicker-options ?
Well It was definitely on the datepicker-options but it doesn't works because of a problem due to a bug in angular-ui-bootstrap 0.12.1.0. This problem is solve in the latest version of angular-ui-bootstrap (0.13.0)
Related
I am using the angular ui datepicker widget from the angular ui bootstrap library (http://angular-ui.github.io/bootstrap/). By default, the datepicker only allows today or later dates to be enabled. All dates before today are disabled. I would like all dates on the datepicker to be enabled. How can I do that? Please advise.
The following site shows how to disable weekends only.
http://angular-ui.github.io/bootstrap/
I change the scope function (from that site) so all weekends are enabled. But all dates (weekdays and weekends) before today are still disabled.
My code update for controller for the $scope.disabled() function :
$scope.disabled = function (date, mode) {
return false;
};
Here is my markup with the datepicker widget:
<input type="text" id="textSearchUpdatedDate"
uib-datepicker-popup="{{format}}" ng-model="updatedDateChangeText"
ng-change="searchUpdatedDateChanged()" ng-keyup="searchUpdatedDateChanged()"
is-open="status.opened"
min-date="minDate"
max-date="maxDate"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close" />
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
Removing the min-date and the max-date attributes might help.
I am working with AngularUI Datepicker.I have seprate partial views each having ng-repeat .There I am using AngularUI-Bootstrap-Datepickers and it is making page load really slow.
I followed this answer:
Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
But I got few other issues.In this approach we are using separate ng-if to switch from span to textbox. But switching between them is taking considerable amount of time which make it visible to user that we are playing with textboxes.(check Image
http://i.stack.imgur.com/YxZXQ.png )
I also followed this : https://github.com/angular-ui/bootstrap/pull/3666/commits
But I am unable to integrate the changes and successfully run the datepicker.
Is there any reliable solution to this issue?
Many UI-Bootstrap-Datepickers on page loads very slowly - can I use a single instance and move element?
<p class="input-group">
<span class="form-control" ng-if="!date.opened1">{{date.data1|date:format}}</span>
<input type="text" class="form-control"
ng-if="date.opened1" datepicker-popup="{{format}}" ng-model="date.data1"
is-open="date.opened1"
datepicker-options="dateOptions"
close-text="Close"/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, date,1)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
code
$scope.open = function($event,date,i) {
$event.preventDefault();
$event.stopPropagation();
date['opened'+i] = !date['opened'+i];
};
Plunkr link
I have a form with many fields, including several datepickers (Angular UI Bootstrap).
<div name="mainForm" ng-form>
<div class="form-group">
<p class="input-group">
<input type="text" name="dt"
class="form-control"
ng-model="dt"
is-open="opened"
datepicker-popup="MM/dd/yyyy" />
<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>
<p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>
I'm using Angular validation w/ the form. We have some required fields, but the dates are not. If you enter a date and remove it, it marks the form invalid. I created a Plunkr to demonstrate this.
Is there a way around this?
Note: It also logs this error in the console when you clear the date out.
Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.
In the current version of the code there is a $datepickerSuppressError value that you can set to true which will hide the console error. You can see in the code that it checks if the date is NaN and then displays the console error if $datepickerSuppressError is still false.
However, having said that, there is still a way to work around the issue of the form being invalid. You will just need to add an additional check to see if mainForm.$error.date is set, or something similar to this.
For example you can change your button to have this instead:
ng-disabled="mainForm.$invalid && !mainForm.$error.date"
Which will leave your button enabled even though the directive has set an error on the date and it should disable if any other field is invalid.
I have datepicker ,in which i want to configure initDate so that if model value is null then datepicker show default selected date.
Here is the HTML:
<span class="input-group">
<input type="text" id="input_empdob" ng-readonly="isEmployeeRelieved" readonly placeholder="mm/dd/yyyy" min="mindobDate" max="maxdobDate" ng-change="setYearOfPassing(); setJoiningDate();" class="form-control" datepicker-popup="{{format}}" ng-model="employee.dob" datepicker-options="dateOptions" is-open="emp_dob_opened" ng-required="true" close-text="Close" name="input_empdob"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="open($event); emp_dob_opened = true;"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
and in controller i have configured datepicker-options like:
$scope.dateOptions = {
'init-date': new Date(1991,01,02)
};
at first time while loading it behaves fine, but when on save, when i clear model value then it does not show initDate properly as configured.
Thanks for any help.
I tried to use it too, didn't work.
so, i am using the initialization with the model.
in my controller i set it like:
$scope.initialDate: $filter('date')(new Date(), 'dd/MM/yyyy');
[http://jsfiddle.net/shykwoh3/2/]
<span class="input-group">
<input type="text"
class="form-control"
ng-model="hole.date"
/>
<!--
datepicker-popup="yyyy-MM-dd"
show-button-bar="false"
is-open="opened"
-->
<span class="input-group-btn">
<button type="button"
class="btn btn-default"
ng-click="showDatePicker();">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</span>
I am trying to create a dynamic/on-demand date picker.
Explenation: I would like to have a single directive or controller function that can call or show a date picker but binding has to happen only on the fields which calander icons were clicked. I.E. It should not bind these input fields to a date picker etc. until the icon is clicked, the reson being, if I have lets say 1000 dates like these on a page, the page loads very slowly because of the date picker popup binding that is binded on page load.
The default popup datepicker works something like this:
Bootstrap.UI: angular-ui.github.io (Scroll down to Datepicker (ui.bootstrap.datepicker))
If anyone understands my problem and what I am trying to achieve please help me out: Something like Modal Date Picker but I don't want a Modal. The date picker should seem to work exactly like the popup date picker of http://angular-ui.github.io/bootstrap/ but the binding should not happen on page load, but on click only