fragaria/angular-daterangepicker

Angular.js wrapper for dangrossman/bootstrap-daterangepicker

angular-daterangepicker's Issues

Infinite $digest loop when pre inititializing model

When pre-initializing the ng-model attribute in the controller and adding a $watch to it, an infinite $digest loop is triggered on page load:

http://plnkr.co/edit/CALqGo

Attempting to reset date range picker dates

I have a form with the date picker on it. The initial {startDate:null, endDate:null} seems to work. If the user attempts to reset the form, I reset with null values but the picker shows the previously selected values and the resulting object data is set to null even after clicking apply.

closed

Add support for custom ranges

Thanks for the work on this angular directive.
It would be very nice to be able to pass the set of predefined date ranges. At the moment, if I populate the options with the ranges as following:

var ranges = {
  "Last Week": [window.moment().subtract("days", 6), window.moment()],
  "Last Month": [window.moment().subtract("days", 29), window.moment()],
  "Last Three Months": [window.moment().subtract("months", 89), window.moment()]
};

<input type="text" ng-model="dateRange" required date-range-picker options="{ ranges: ranges }">

The moment objects are automatically converted in strings and trigger errors. Instead, you should parse them as separate attribute and internally join them to the jQuery options you pass to daterangepicker():

<input type="text" ng-model="dateRange" required date-range-picker ranges="ranges">

Do you need any help?
Let me know.

Date vs. Moment object in watch function

Thanks for the awesome library. However, I'm confused about the data returned in the $watch function as shown in the example.

Before when I used daterangepicker by itself in my pre-Angular days, the daterangepicker callback would provide me with Moment objects.

However, when I've set things up per the example in this repo, the start and end dates in the callback return either the type of start date and end date object the picker was configured with or -- when the user selects new ranges -- Date objects (not Moment objects set to the correct UTC).

Is there a way to configure angular-daterangepicker so that it returns Moment objects set to the correct UTC?

dateLimit: not sure how to setup?

Hi there,

Would you mind providing a way to set the date limit?

Kind regards,

Format is not applied correctly at initialization

When trying to override the format there are two issues I observed:

1. it is not used for initial rendering of the first value
2. it is parsed in a wrong manner after applying it, e.g. in the format "DD.MM.YYYY" the YYYY is parsed wrong.

To reproduce just take a look at the example.html in the default distribution and the field where it should render in a different format.

I didn't fully dive into the directive, but it seems that the format is not consistently applied at all conversion points interacting with ngModel, could that be the reason?

Directive does not respond to apply.daterangepicker trigger

This is important as it will fix my problem, which is the comment in issue #26, but I will reproduce it here:

---

Everything seems to be shared between multiple instances. I'm using $watch to get when the field changes.

I've got ranges, "Yesterday" "Today" "Last 7" "Last 30". If I go to one screen and click on Today. The dates are filled in on the form, and the $watch executes perfectly.

If i then go to a completely different screen, bring up the calendar, first off, Today is already highlighted, and if I click Today, it fills in the dates on the form, but the $watch does NOT fire.

This is a huge problem.

---

This is related to the fact that there is no action on apply.daterangepicker. If you grab the results when this trigger is sent, this directive will be perfect for my use. I have spent several hours trying to figure out this directive's code and I am not having any luck adding this.

A co-worker originally had this working with the javascript straight in the page, with code like this which filled in the field properly:

$('#datepickertime').on('apply.daterangepicker', function(ev, picker) {
  angular.element(document.getElementById('datepickertime')).scope().dateRangePicker(picker);
});

And dateRangePicker was defined as:

dateRangePicker = function(picker) {
  ... picker has the start and end dates ...
};

Any way to do this with your directive?

Date vs. Moment object in watch function

Hi,

Thanks for the awesome library. However, I'm confused about the data returned in the $watch function as shown in the example.

Before when I used daterangepicker by itself in my pre-Angular days, the daterangepicker callback would provide me with Moment objects.

However, when I've set things up per the example in this repo, the start and end dates in the callback are only Date objects.

Is there a way to configure angular-daterangepicker so that it returns Moment objects set to the correct UTC?

Thanks for any thoughts.

Difference between selecting a date via mouse click and from and to inputs

Hey, great work! I'm just trying to work out some kinks that I was experiencing and I noticed a difference in the output when I clicked on the calendar vs when I input the dates in the text boxes. When i click on it the end of the day comes out, when I enter it in it's the beginning of the day.

showDropdowns

I'd like to set the showDropdowns to true

It's imposible to type date range in main inputbox

Input box is refreshing to aggressively, for example if I try to change start date year from 2014 to 1999 it will end up "0001" just after pressing "1"

I'm using default date range format and separator "YYYY-MM-DD - YYYY-MM-DD"

For my purposes it would be better to use this tree callbacks instead of default one currently implemented:

el.on('hide.daterangepicker', function(ev, picker) {
    refreshAll(ev, picker);
});

el.on('cancel.daterangepicker', function(ev, picker) {
    el.val(_formatted(modelCtrl.$modelValue));
});

el.on('apply.daterangepicker', function(ev, picker) {
    refreshAll(ev, picker);
});

Angular 1.3.5 renders Today - Today in input when range is given

With Angular 1.3.5 the Simple Picker Date range example renders [Todays Date] - [Todays Date] instead of rendering date.startDate - date.endDate

Reproduce
Replace this line in example.html:
<script src="lib/angular/angular.js"></script>
With:
<script src="http:///ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>

Model not being updated:

There seems to be something wrong with the ng-model binding, because my $scope model variable is not being updated, and also, adding a $watch on the variable that does nothing triggers an infinite $digest loop.

my versions are:

├─┬ angular-daterangepicker#0.1.1
│ ├── angular#1.2.16 (1.2.17-build.162+sha.5319621 available, latest is 1.3.0-build.2692+sha.7f5e0f0)
│ ├─┬ bootstrap#3.0.3 (latest is 3.1.1)
│ │ └── jquery#1.10.2 (2.1.1 available)
│ └─┬ bootstrap-daterangepicker#1.3.6
│   ├── jquery#1.10.2 (2.1.1 available)
│   └── momentjs#2.5.1 (latest is 2.6.0)

Daylight savings offset error

If a date is selected that has a different UTC offset, the date will be improperly set. This is mainly evident if you select a date before daylight savings time went into affect.

Example:
Select the range "Mar 1" to "Mar 1" using the calendar. After you hit apply, the date range will change to "Feb 28" to "Mar 1".

This issue does not appear with the vanilla bootstrap-daterangepicker.

Error when used in a modal window

Hi

I'm getting a Cannot read property 'remove' of undefined when I use the directive inside of a angular-ui modal window and that modal is then closed/dismissed. The line is question is 154.

return $scope.$on('$destroy', function() {
    return el.data('daterangepicker').remove();
});

The element is probably already removed from the DOM by the time this code executes. I think a check to see if the element is undefined would handle this scenario?

Should not allow user to edit start date and end date in input text box

How can we make input box of start and end date to be readonly ?

Directive is not working when using minified file

Hi, I'm getting the below error when using the minified file.
I'm guessing it has to do with the directive initialization injection list that is not using strings and relies on variables names.
am I the only one who experience this?
using the full (not minified) version works as expected (except for know issues described here on github).

Thanks,
Harel M.

Error: [$injector:unpr] Unknown provider: tProvider <- t <- dateRangePickerDirective
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=tProvider%20%3C-%20t%20%3C-%20dateRangePickerDirective
at REGEX_STRING_REGEXP (angular.js:63)
at angular.js:3994
at Object.getService as get
at angular.js:3999
at getService (angular.js:4141)
at Object.invoke (angular.js:4173)
at angular.js:6482
at forEach (angular.js:323)
at Object. (angular.js:6480)
at Object.invoke (angular.js:4182)

Date picker localization via angular-translate

Trying to localize daterangepicker via angular-translate.

Basically it's look like:

View

<input date-range-picker 
   class="form-control date-picker" type="text" 
   ng-model="date" options="opts"/>

Controller

var localizedRanges = {};
localizedRanges[$translate.instant('TODAY')] = [moment(), moment()];

$scope.opts = {
    locale: {
        applyLabel: $translate.instant('APPLY'),
        daysOfWeek: $locale.DATETIME_FORMATS.SHORTDAY,
        monthNames: $locale.DATETIME_FORMATS.MONTH
    },
    ranges: localizedRanges
};

It works very well, but if I change language, datepicker is still on previous language. If I reload page it will show datepicker on the right language.

I find out that I can subscribe on $translateChangeSuccess event:

$rootScope.$on('$translateChangeSuccess', function () {
//reinitialize datepicker
});

So, I'm looking for refresh/reinitialize datepicker mechanism at runtime.
Any ideas how to do that?

New Feture: Set "startDate" and "endDate" reset to null

Is there a possibility to set back startDate and endDate to null after a date is set,
like Apply and Cancel button one more button for a reset in picker to make it happen and make text box empty.

New Feature: when timepicker is enabled, if start/end days are the same, it should be shown only once

When timepicker is enabled, if startDate and endDate have the same day, the day should only be shown once.
Here is an example with the following code:

    <input type="text" date-range-picker="{format: 'MM/DD/YYYY h:mm A', timePicker: true, timePickerIncrement: 30}" id="daterange3"
           class="form-control date-picker" type="text"
           name="daterangepicker" ng-model="class.dateRange"
           required/>

Instead of showing 10/09/2014 2:30 PM - 10/09/2014 5:30 PM, it would be nice to show 10/09/2014 2:30 PM - 5:30 PM

Timezone support?

First off, great work on this.

Is there an easy way to incorporate timezones into this? Would like to be able to tack on a time-zone="America/Los_Angeles" attribute and have the times be formatted to that particular timezone.

TypeError: Cannot read property 'remove' of null

This error occurs in 0.1.14 and 0.1.13:
TypeError: Cannot read property 'remove' of null at angular-daterangepicker.js:179

That line is:

return _picker.remove();

where _picker is null.

0.1.12 does not have this problem.

Bad Tag Release 0.1.13 - Code is old?

Since I have patch releases enabled, ~0.1.13 got picked up.

The Tag 0.1.13 has quite a few code differences from Master even though it is 0 commits behind:
https://github.com/fragaria/angular-daterangepicker/blob/master/coffee/angular-daterangepicker.coffee#L100
https://github.com/fragaria/angular-daterangepicker/blob/0.1.13/coffee/angular-daterangepicker.coffee#L116

https://github.com/fragaria/angular-daterangepicker/blob/master/js/angular-daterangepicker.js#L105
https://github.com/fragaria/angular-daterangepicker/blob/0.1.13/js/angular-daterangepicker.js#L130

Original error from console:

TypeError: Cannot read property 'endDate' of undefined
    at angular-daterangepicker.js:31
    at angular.js:16299
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312(anonymous function) @ angular.js:11655
angular.js:11655 TypeError: Cannot read property 'startDate' of undefined
    at angular-daterangepicker.js:41
    at angular.js:16299
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312(anonymous function) @ angular.js:11655
angular.js:11655 TypeError: Cannot read property 'endDate' of undefined
    at angular-daterangepicker.js:31
    at angular.js:16299
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312(anonymous function) @ angular.js:11655
angular.js:11655 TypeError: Cannot read property 'startDate' of undefined
    at angular-daterangepicker.js:41
    at angular.js:16299
    at completeOutstandingRequest (angular.js:4924)
    at angular.js:5312

Bundle

can you do a bundle with the dependencies and angular-date-rangepicker?

Can not customize the format of the date in the input field

Hi There

I tried with the sample of customising format of date. Which didn't work for me .

Cheers
Wallace

need handle event in angular way

There are events(show.daterangepicker/hide.daterangepicker/cancel.daterangepicker) in daterangepicker. If we don't use angular, we can use code:

$('#daterange').on('cancel.daterangepicker', function(ev, picker) {
  //do something, like clearing an input
  $('#daterange').val('');
});

But we are using angular, we use should write code like $scope.$on('cancel.daterangepicker', ...).

So, please consider event hanlder integration.

Pickers show today instead of set date

I have a daterangepicker that I set its startDate and endDate on an async callback. The input displays the correct dates but opening the picker shows today as the dates selected.

$rootScope.$on('someEvent', function(evt, property) {
      $scope.displayDateRange = {
        startDate : moment(property.start),
        endDate : moment(property.end)
      };
});

End date selection should not exceed current date and time

How can we set a option that to restrict the end date value to select not greater than current date as well as time?

maxDate and minDate value not honoured in the widget drop-down

I can enter dates in the From and To input fields in the dropdown and this gets assigned to the model.
the min and max attributes are not honoured.

td min-width prevents resizing calendar

.daterangepicker .calendar th, .daterangepicker .calendar td has a min-width applied. This prevents the overall width of the calendar from shrinking as needed overriding this solved my issue

.daterangepicker .calendar th, .daterangepicker .calendar td { min-width: 100% !important; }

TypeError: Cannot read property 'remove' of undefined

Hi There

I got the following js error when closing Dialog(Modal)

TypeError: Cannot read property 'remove' of undefined
at angular-daterangepicker.min.js?compile=false:1

Just wondering if you know how to get around this

Cheers
Wallace

Daterangepicker presentation

Thanks for building this.

How to create a datepicker that looks the one in the original examples.

Thanks again!

Initialize with a default date when singleDatePicker set true

Hi,

When I attempt to set a default date (contained in my scope like $scope.date) with the option singleDatePicker set to true, the plugin don't handle the date and display the current date.
Otherwise, this functionality works correctly when the option singleDatePicker is set to false.
Anyone know why ?

Thanks

Models are not updated

Hi, please look at Plunker http://plnkr.co/edit/uZwZl1XOdWYHiCji7YPQ The date range picker is not updating the model. Therefore clicking + - Button results in complete reset of the values.

Licensing

Hello,

Can you please include a license in your repository? Or at least state the licensing for the code in the README?

Thanks

changing date format issue options="{format: 'MM-DD-YYYY'}

I tried using the way below:

In controller
$scope.vm = {
date: {startDate: moment('01-01-2014', 'MM-DD-YYYY'), endDate: moment('01-31-2014', 'MM-DD-YYYY')},
categories: '',
outputCategories: [],
min: moment('01-01-2014', 'MM-DD-YYYY'),
max: moment('01-31-2014', 'MM-DD-YYYY')
};

On model popup opened

$modalInstance.opened.then(function() {

    var monthYearArray = monthYear.split(' ');
    var monthStart = moment().year(monthYearArray[1]).month(monthYearArray[0]).date(1).format('MM-DD-YYYY');
    var monthEnd = moment().year(monthYearArray[1]).month(monthYearArray[0]).date(31).format('MM-DD-YYYY');
    $log.log('monthYearArray', monthStart, monthEnd);

    $scope.vm.date.startDate = moment(monthStart, 'MM-DD-YYYY');
    $scope.vm.date.endDate = moment(monthEnd, 'MM-DD-YYYY');   
    $scope.vm.min = moment(monthStart, 'MM-DD-YYYY');
    $scope.vm.max = moment(monthEnd, 'MM-DD-YYYY');   
});

It says invalid date

No format applied with initial display of date range

In html

   <input type="daterange" date-range-picker id="daterange3" class="form-control date-picker" type="text"
          name="date" ng-model="class.dateRange" options="opts" required/>

In controller:

    $scope.class.dateRange = {startDate: moment().subtract("days", 1), endDate: moment()};

    $scope.opts = {
        format: 'MM/DD/YYYY h:mm A',
        timePicker: true,
        timePickerIncrement: 5
    };

When the page is first loaded, the format is not applied. It shows "2014-09-30 - 2014-10-01". Once I selected a new date/time, the format is applied and shows "10/01/2014 8:00 AM - 10/01/2014 11:59 PM".

The format should be applied at the initial display.

Local options

Hi, you can't change the locale options ( like fromLabel )

if (typeof options.locale.fromLabel === 'string') {
this.locale.fromLabel = options.locale.fromLabel;
}

Model doesn't update for current day

Hi,

Either selecting todays date on both datepickers, or clicking 'today' (essentially the same thing) does not seem to update the model.

I can select any other day or range (including today) and it updates.

Any idea why please?

Thanks.

initialization issue with Angular v1.3.0-rc.0

Angular 1.2.17 - On page load I can see the value in text field.
Angular v1.3.0-rc.0 - on page load the field is empty. Upon clicking dates from calendar widget the text field is populated with the values and everything works fine from then.

"SingleDatePicker" set, but date displays as a range until you provide some input

I'm using the daterangepicker like this:

<input date-range-picker type="text" options="{singleDatePicker: true, showDropdowns: true}" ng-model="anniversaryDate" name="anniversaryDate" placeholder="Anniversary Date" class="form-control">

If I set the date from my controller like this:

$scope.anniversaryDate = {
    startDate: moment(),
    endDate: moment()
}

then the initially displays the date as a range with the same start/end date.

If I click into the input, and press any key (like arrow the cursor over) the date suddenly formats correctly as a single date. Also, when a date is initially selected, it is formatted correctly without the range. It only shows up when setting the value initially. Any thoughts? The functionality is fine, but this is killing my UI.

Thanks!

How to disable the start and end date inside the daterangepicker?

Is there any option i can provide in the config to just disable the start and the end date inside the date range picker. I do not want the user to enter the date in the two mini text boxes,but select from the calendar.

The date picker can be later customized by passing options attribute.

Readme states "The date picker can be later customized by passing options attribute." Can somebody post a working example?

Minified JS problem?

Hi,
first of all - thanks for your great work!

Directive is working perfectly, while testing it locally (using yeoman with angularjs + requirejs, wiredep, loading all dependencies).

However, during the built, my grunt configuration is performing minification (etc.) and after build such error is printed into console:

TypeError: undefined is not a function
    at a.directive.link.n (http://localhost/scripts/main.js:32:1100)
    at a.directive.link (http://localhost/scripts/main.js:32:1311)
    at http://localhost/scripts/main.js:3:5951
    at invokeLinkFn (http://localhost/scripts/main.js:3:6069)
    at nodeLinkFn (http://localhost/scripts/main.js:2:24060)
    at compositeLinkFn (http://localhost/scripts/main.js:2:13776)
    at compositeLinkFn (http://localhost/scripts/main.js:2:13866)
    at $get.node (http://localhost/scripts/main.js:2:12447)
    at compile (http://localhost/scripts/main.js:20:12698)
    at invokeLinkFn (http://localhost/scripts/main.js:3:6069) <div class="date-picker ng-pristine ng-untouched ng-valid ng-isolate-scope" options="datepickerOptions" ng-model="active.date" date-range-picker="">

I tried out included minified version, but still no success, so it seems that this is not the problem. Any ideas what could went wrong?

Thanks in advance, cheers!

Watch for date changes is not working with options passed

Hi,

If i pass options, watch for date is not working for me. If i don`t pass options, it is working fine.
Is it some my mistake or should i use $Interval to get date changes instead ?

As i am learning angular, the most possible is that i am just blind :-).

Thank you,
Denis

Using with $watch?

I was trying this with $watch, but I don't seem to get events when dates are changed..

ng-model not updated

It seems that the ng-model, defined to start the directive, is not bind on change of the date.
It should need an hack to get it work?

Thank you

Min/Max options are ignored after date is changed

Min/Max options work well initially. But, after a new date is chosen, the user is allowed to choose a new date that is beyond the Min/Max bounds. Thanks!

Distinct Instances of Date Range picker share same config

I have a problem when using the date range picker in two different combination, once with single date and once with date range. Both are in two different pages (even popups). When using any one individually it works, however. When first using the single date picker and then navigating to a page with the date range picker, only a single date drop down is shown. Somehow there seems to be a global state that is not reset.

Happens on all browsers and latest angular-daterangepicker version.

Any idea where to start looking for this? as we use the component directly I do not see how this can be coming from any configuration we do, looks like something that is not reset from a global daterangepicker setting?