luisfarzati / ng-bs-daterangepicker

AngularJS directive for bootstrap-daterangepicker

ng-bs-daterangepicker

Angular directive for Dan Grossman's bootstrap-daterangepicker.

Demo: http://luisfarzati.github.io/ng-bs-daterangepicker

Installation

Using bower:

bower install ng-bs-daterangepicker

Using npm:

npm install ng-bs-daterangepicker

How to use it

You should already have a bunch of scripts and CSS required for bootstrap-daterangepicker:

CSS:

<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="daterangepicker-bs3.css">

JavaScript:

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="moment.min.js"></script>
<script src="daterangepicker.js"></script>
<script src="angular.min.js"></script>

to the list above, you should add:

<script src="ng-bs-daterangepicker.js"></script>

Then, inject ngBootstrap in your application module:

angular.module('myApp', ['ngBootstrap']);

and then just add an input of type daterange:

<input type="daterange" ng-model="myDateRange" />

The result object $scope.myDateRange has a startDate and endDate properties, which are instances of moment().

Implemented features so far:

• startDate, endDate: are taken from the ng-model object;
• minDate, maxDate: mapped from min-date and max-date attributes;
• dateLimit: mapped from limit attribute;
• format: mapped from format attribute;
• separator: mapped from separator attribute.
• enableTimePicker: mapped from timePicker attribute.
• ranges: mapped from ranges attribute. Can be a JSON string or scoped object. (check daterangepicker for formatting)
• opens: mapped from open attribute. Can be right or left.

Example with all above features:

<input
	type="daterange"
	ng-model="dates"
	min-date="2013-09-10"
	max-date="2013-09-25"
	limit="3 days"
	format="L"
	separator="/"
	ranges="{'Special Range':{'startDate': '2013-09-2', 'endDate': '2013-09-5'}}">

The limit attribute lets you specify a number and unit similarly as you would invoke moment.duration().

Features to be implemented:

• Some timePicker*
• show*
• other formatting options like *Class and stuff

Build

You can run the tests by running:

npm install
bower install
grunt

assuming you already have grunt installed, otherwise you also need to do:

npm install -g grunt-cli

ng-bs-daterangepicker's Issues

Adding enabletimepicker=true to <input> generated an error - Error: e is not an object

Add enabletimepicker=true

<input enabletimepicker=true type="daterange" ng-model="dates4" ranges="ranges">

generated an error -
Error: obj is not an object in AngularJS v1.3.15 line 413

This is the workaround ng-bs-daterangepicker v0.0.5

if ($attributes.enabletimepicker) {
    options.timePicker = true;
    //angular.extend(options, $parse($attributes.enabletimepicker)($scope));
    angular.extend(options, $parse($attributes.enabletimepicker)); // enabletimepicker
}

How to submit form

HI
I am use datarange picker

i m getting error when i try to submit form and dates4 value is not pass in another page when submit form

this is my code

xTractApp.controller('TestController', function($scope, $http, $timeout, $location, $state) {
// function to submit the form after all validation has occurred
$scope.user = {};

$scope.submitForm = function(isValid)
{
if (isValid)
{
$scope.loading = true;
$timeout(function() {
$http({
method: 'POST',
url: 'Demo',
headers: {'Content-Type': 'application/json'},
data: $scope.user
}).success(function (data)
{
$scope.loading = false;
$scope.status=data;

                if(($scope.status=data) == "success"){
                   $state.go('Dashboard');
                    $scope.message ="successfully "; 
                }

                else{
                     $scope.loading = true;
                     $scope.message ="Something was wrong please try again";
                }

          });
       }, 1000);
   }
   else{
       $scope.loading = true;
       $scope.message ="invalid username and password";
   }

};
});

Listen for the "$destroy" scope event

Whenever the date range picker is initialized, its node is always appended to the document DOM.

Please update the directive to listen for the event and properly collect it on destroy.

Thanks!

Support "locale" option

locale: (object) Allows you to provide localized strings for buttons and labels, and the first day of week for the calendars

How to set field to be empty by default?

Need field with range to be empty at first. Later on, when one selects something, then dates could appear. Is it possible?

loads but does not trigger

I've tried everything to get this working but it does not. Installed via bower install, included
script src="public/lib/ng-bs-daterangepicker/dist/ng-bs-daterangepicker.min.js"
in my header and
input type="daterange" ng-model="myDateRange" format="MMM DD" separator="/"
in my html but it does not get picked up.
I load angular and bootstrap beforehand, and there's a dependency on bootstrap-daterangepicker.

The demo src/ng-bs-daterangepicker.html works if I point all the angular/bootstrap js and CSS references to their correct locations (which are several folders away).

No JS console errors, no grunt errors.

This has got to be a pathing issue, but for the life of me I can't find anything amiss.

What exactly is it that triggers the progressive enhancement of the input field?

Stumped.

click on apply event

Hi

Is there a way to trigger event when user click on apply button after selecting dates?

Calendar is not well rendered in firefox

In chrome : http://postimg.org/image/ylrrubua1

In firefox : http://postimg.org/image/4id92dr0p

Date range picker placement option

Can you please provide placement option like : top ,bottom , right or left where to show open calendar .Thanks for your great job .

I am facing this problem in low resolution screen .Help me if it is possible .

Change module name?

Doesn't really make sense to call this "ngBootstrap" if it's just a date range picker, especially because there are probably other modules called "ngBootstrap" that are full ports of twitter bootstrap. Thoughts?

model does not update when selecting current...

... model does not seem to update if you select current date on both calendars, this only happens when you load the page after you select a different date and apply and then try to select current date on both calendars it seems to work just fine.

Support for ngTable

Tried to use this module/plugin with ngTable, but was unsuccessful.

    function getTableParams(data, sortBy)
    {
      return new ngTableParams({
          page: 1,
          count: 5,
          sorting: sortBy
        }, {
          total: data.length,
          getData: function($defer, params) {
            var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
          },
          counts: []
        });
    }

And custom filter like that

    <td data-title="'Date'" filter="{'dob': 'daterange'}">{{row.dob}}</td>
    ...
    <script type="text/ng-template" id="ng-table/filters/daterange.html">
      <div class="input-group date-range-input">
        <input class="form-control" id="input-7a-orig" type="daterange" ng-model="params.filter()[name]" format="DD.MM.YYYY" locale="{applyLabel:'Принять', cancelLabel:'Сбросить', fromLabel:'С', toLabel:'По', customRangeLabel:'Custom', firstDay:1}" value="" />
        <span class="input-group-btn">
          <label class="btn btn-default date" for="input-7a-orig"><i class="glyphicon glyphicon-calendar"></i></label>
        </span>
      </div>
    </script>
   ...

And in getData I tried to look, what comes in as filter, but immediately I got an error like

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["params.$params; newVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}; oldVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}"],["params.$params; newVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}; oldVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}"],["params.$params; newVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}; oldVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}"],["params.$params; newVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}; oldVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}"],["params.$params; newVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}; oldVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\"2014-08-21T21:00:00.000Z\"}},\"sorting\":{},\"group\":{},\"groupBy\":null}"]]
http://errors.angularjs.org/1.2.18/$rootScope/infdig?p0=10&p1=%5B%5B%22para…B%7D%2C%5C%22group%5C%22%3A%7B%7D%2C%5C%22groupBy%5C%22%3Anull%7D%22%5D%5D
    at http://eugene-nortal:9001/bower_components/angular/angular.js:78:12
    at Scope.$digest (http://eugene-nortal:9001/bower_components/angular/angular.js:12434:19)
    at Scope.$apply (http://eugene-nortal:9001/bower_components/angular/angular.js:12660:24)
    at http://eugene-nortal:9001/bower_components/angular/angular.js:14167:36
    at completeOutstandingRequest (http://eugene-nortal:9001/bower_components/angular/angular.js:4337:10)
    at http://eugene-nortal:9001/bower_components/angular/angular.js:4638:7 angular.js:9937
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["params.$params; newVal: {\"page\":1,\"count\":5,\"filter\":{\"dob\":{\"startDate\":\"2014-08-21T21:00:00.000Z\",\"endDate\":\...<omitted>...5D angular.js:78

or simply https://docs.angularjs.org/error/$rootScope/infdig?p0=10&p1=%5B%5B%22params.$params;%20newVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D;%20oldVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D%22%5D,%5B%22params.$params;%20newVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D;%20oldVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D%22%5D,%5B%22params.$params;%20newVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D;%20oldVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D%22%5D,%5B%22params.$params;%20newVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D;%20oldVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D%22%5D,%5B%22params.$params;%20newVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D;%20oldVal:%20%7B%5C%22page%5C%22:1,%5C%22count%5C%22:5,%5C%22filter%5C%22:%7B%5C%22dob%5C%22:%7B%5C%22startDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22,%5C%22endDate%5C%22:%5C%222014-08-21T21:00:00.000Z%5C%22%7D%7D,%5C%22sorting%5C%22:%7B%7D,%5C%22group%5C%22:%7B%7D,%5C%22groupBy%5C%22:null%7D%22%5D%5D

ng-bs-daterangepicker.min.js is broken

Somehow if ng-bs-daterangepicker.min.js is loaded the daterangepicker's predefined range selector would not show( today, custom etc, demo can be found on original bs version). Current workaround is using ng-bs-daterangepicker.js instead of the .min one.

ability to fast jump through years and months

hi,
right now it is really tedious if i want to go from year 2013 to to year 1980, i have to keep pressing the previous button until i reach it, i think you would agree with me that it is not user friendly, and sorry if i sound harsh :)

here is an example where you get a menu to select a year

http://demos.kendoui.com/web/calendar/index.html

thanks in advanced.

Bower package is messed up

For some reason, pulling via bower is giving me version 0.0.1. Does something need to be updated?

modelValue.startDate and modelValue.endDate doesn't support string values

As mentioned on the subject, modelValue.startDate and modelValue.endDate doesn't support string values.
This is the case when a date is received from a JSON via AJAX.

This could be easily solved replacing

$element.data('daterangepicker').startDate = modelValue.startDate;
$element.data('daterangepicker').endDate = modelValue.endDate;

with

$element.data('daterangepicker').startDate = moment(modelValue.startDate);
$element.data('daterangepicker').endDate = moment(modelValue.endDate);

Error: [$compile:ctreq] Controller 'ngModel', required by directive 'input', can't be found!

according to the readme file, then come will this error, why

Timezones issue

Daterangepicker uses 00:00:00 and 23:59:59 time marks for start and end dates, and uses browser timezone to represent them. String (JSON) representation of these dates are in UTC. And this leads to a problem when timezone is different between clients (or event client/server)

For example, start and end dates are '2015-08-01' and '2015-08-05'. In case of tz to be GMT-4, JSON representation of dates will be "2015-08-01T04:00:00.000Z" and "2015-08-06T03:59:59.999Z". Say, we store this timestamps and display to client. If client has browser in the same timezone, he is ok. But if not, and his timezone is, let's say, GMT/UTC, he will get '2015-08-01 - 2015-08-06' date range instead of correct '2015-08-01 - 2015-08-05'.

Probably date range should explicitly converted to UTC, because we don't deal with time here, only with date ranges.

Also this problem occurs when backend code wants to store date range as dates (not as timestamps) and need to convert it from browsers' timezone, but there is no info about it.

Any thoughts?

$element.daterangepicker is not a function

.link@http://localhost:3000/lib/ng-bs-daterangepicker-plus/src/ng-bs-daterangepicker.js:54
nodeLinkFn@http://localhost:3000/lib/angular/angular.js:6753
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:6146
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:6149
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:6149
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:6149
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:6149
compositeLinkFn@http://localhost:3000/lib/angular/angular.js:6149

How get when selected?

Looking for maintainer

We've had outstanding PR's for half a year. No commits to the repo for nearly a year. I've tried contacting the author over email with no response. A shame..

Best Practices and Anti-Patterns

You guys should see if you fall into them https://github.com/angular/angular.js/wiki/Best-Practices, https://github.com/angular/angular.js/wiki/Anti-Patterns

particularly this:

The ng- is reserved for core directives. STOP USING IT

and this:

Stop releasing the same plugin 8 other people released. Learn to fork and pull request instead.

p.s. cool project, but have you seen http://angular-ui.github.io/bootstrap/#/datepicker

Date reset to "today" on first click on "cacel" button

Hi!
As stated by issue #40, daterange reset to today date when I open it the first time and click on "cacel" button.

I solved it modifying the code in the change watcher this way:

            $scope.$watch($attributes.ngModel, function (modelValue) {
                if (!modelValue || (!modelValue.startDate)) {
                    ngModel.$setViewValue({ startDate: moment().startOf('day'), endDate: moment().startOf('day') });
                    return;
                }
                $element.data('daterangepicker').setStartDate(modelValue.startDate);
                $element.data('daterangepicker').setEndDate(modelValue.endDate);

                $element.data('daterangepicker').updateView();
                $element.data('daterangepicker').updateCalendars();
                $element.data('daterangepicker').updateInputText();
            });

setStartDate and setEndDate in fact also replace the "old" stored value.
Is it the right way? Maybe the change could be integrated in a new source version?

Update to 0.0.4 or 0.1.0

There are some features that have been added to master that are not currently part of 0.0.3. It looks like it has also been over a year since the version number was updated so I'm guessing at some point it was intended to be.

For example, locale as part of the options is now supported, but the master branch containing this has not been tagged.

https://github.com/luisfarzati/ng-bs-daterangepicker/blob/master/src/ng-bs-daterangepicker.js#L23

Do you know when you are releasing 0.0.4 or 0.1.0? I don't know which version you consider more apt.

minified version use requires: 'ngModel' will cause an issue with checkbox

Need to change requires: 'ngModel' to requires: '?ngModel' in the minified version, otherwise will cause this issue angular/angular.js#7062 .

$element.data('daterangepicker').startDate throwing Cannot read property 'startDate ' of undefined

When the page has loaded the line $element.data('daterangepicker').startDate within the $scope.$watch statement is throwing a "Cannot read property 'startDate ' of undefined" error.

Has anyone seen this error before or have an idea what might be causing it?

Tag for a version with locale support

When will be a tag added for a version with locale support?

Thank you.

cannot change date format

I found this module very handy in my project, but I have a difficult time changing the format. Below is what I tried to change the date format, but it does not work. The date still shows as '10/02/2015 - 11/04/2015' in the datepicker. I am using the latest version as of today. Thanks

<input type="daterange" id="updated_daterange" format="dd MMM yyyy" separator="/" class="form-control" placeholder="Date range for update"
                           ng-model="myDateRange"/>

Calling REST service after data range was updated by the user

I'd like to call a REST service after the user has made changes but not after the initial load.
Therefore, I've added somthing like this into my controller.
However, the function is called after initial load. How could I prevent this?

$scope.$watch('vm.daterange', function(){
            if(vm.daterange.startDate) {
                console.log(vm.daterange.startDate.format('YYYY-MM-DD'), vm.daterange.endDate.format('YYYY-MM-DD'));
            }
        });

dist and src versions are out of sync

For example, installing 0.0.3 with bower yields (I think?) 0.0.1 in dist, missing e.g. the 'ranges' functionality.

Changing the range to 'Today' the very first time does not trigger a model update

Please see this plnkr to reproduce the error. http://plnkr.co/edit/vyeq5W
When you run it, and click within the input box, the dropdown will be in 'Last 365 days'.
When you change your selection to 'Today', the model is not updated.
If you change it to 'Yesterday', the model is updated. Later if you change to 'Today' the model is updated. It is the very first time when 'Today' is selected, that the model does not get notified.

I debugged the code and found that Dan Grossman's code initializes the oldStartDate to be equal to startDate but ng-bs-daterangepicker does not initialize the startDate and endDate.

You can initialize the start and end date in the link method somewhere after line 27.

        options.startDate = $parse($attributes.ngModel)($scope) && $parse($attributes.ngModel)($scope).startDate;
        options.endDate = $parse($attributes.ngModel)($scope) && $parse($attributes.ngModel)($scope).endDate;

I also have a plnkr to play with Dan Grossman's code. http://plnkr.co/edit/FD56Xd

Thank you for contributing the code.

docs at npm update

Overall thanks for the product first :-)

Would it be wise to update the steps here https://www.npmjs.com/package/ng-bs-daterangepicker to ui.bootstrapinstad of ngBootstrap in the modules entry (and make a quick note there "or whatever module your loading bootstrap with")? I am fairly new to angular and getting more used to the whole naming conventions, and way that angular loads modules as a whole, and this set me way back for days, i just discovered that i was loading bootstrap wrong.

Does not display Date in Input if using view-controller-model angular structure and not scope

I use View-Model-Controller for my angular project

In controller:

angular
    .module('ngBootstrap')
    .controller('SampleCtrl', SectionController);

SectionController.$inject = ['$scope', 'sectionModel'];

function SectionController(scope, sectionModel) {
    var vm = this;
    vm.prop = sectionModel.prop;
    scope.myDate = { "startDate": '2013-09-20', "endDate": '2013-09-25' };

In model:
angular.module('ngBootstrap')
.factory('sectionModel', sectionModel);

function sectionModel() {
    var instance = {
        prop: {
            date: {
                "startDate": '2013-09-20',
                "endDate": '2013-09-25'
            }
        }
    };
    return instance;

in view:

        <div>
            <input type="daterange" ng-model="myDate"> <code>{{myDate}</code>
        </div>
        <div>
            <input type="daterange" ng-model="ctrl.prop.date"> <code>{{ctrl.prop.date}}</code>
        </div>

Result

As you can see, it works fine if I use scope myDate. But the ctrl.prop.date doesn't work. So I change the 2nd input ng-model to myDate

Result

It proves that ctrl.prop.date does have the correct value. Just that if I put it in the ng-model, somehow it got reset to the today's date.

Thanks,

Tan

Cancel resets to today's date

Hi! Thx for your work-- it's certainly appreciated. I've noticed that if you click 'cancel' the first time the picker loads, the dates will reset (in the picker) to today's date -- you can reproduce it in your demo to see what I mean. I'd like to help solve this issue but not sure how to go about it.

Add 0.0.2 tag

I saw you updated your bower config to 0.0.2 but forgot to add the tag. When you have a chance if you could add this it would be greatly appreciated. Thanks!

TimeRangeSelect

Please add a time range select option
thanks~

Fix naming of module and directive so that it can be used in more complex projects

I like what I'm seeing so far but there are a few things that make it impossible for me to use it in a project i'm working on. These are things that I wouldn't want to change on my own since they are the identify of the project.

A few naming changes need to be made in order for this module to be production ready.

1. The name of the module itself is ngBootstrap it is neither a google module nor represents bootstrap.

2. 20 show the directive being to greedy and attempting to bind to every input (even though it does try to bail on the binding) you can make it bind to type of daterange and restrict it to input

return {
require: ['?:input'],
restrict: 'A',
};

Ranges attribute not working

I have something like this <input type="daterange" format="ddd. MMM Do, YYYY" ng-model="myDateRange" ranges="ranges"> and in my controller this:

 $scope.ranges =
    Today: [moment(), moment()]
    Yesterday: [moment().subtract("days", 1), moment().subtract("days", 1)]
    "Last 7 days": [moment().subtract("days", 7), moment()]
    "Last 30 days": [moment().subtract("days", 30), moment()]
    "This month": [moment().startOf("month"), moment().endOf("month")]

But these ranges don't actually appear in the datepicker. How can I get them to show up?

Bootstrap 3

hi,
awesome directive, thanks for it, may i ask if it supports bootstrap 3 ?

thanks in advanced

Conflict with ui-select

When I use ng-bs-daterangepicker, all my ui-selects throw ngModel, required by directive 'input', can't be found! See this issue: angular-ui/ui-select#526

onFocus event on the text field does not popup the date range.

Hi,
In my UI I have a calendar icon on which on-click event should popup the date range popup. I tried the onFocus on the date textfield when clicked on the icon but it does not popup the calendar.
Please help.

Thanks
Ajith

it is not updating start date and end date in input text while updating model manually. it seems $watch on model is not working. angular version 1.4.3 i am using.

Causes errors on non angular inputs

I'm using this with django, when I enable it I get lots of errors like this

    at http://192.168.56.101:8000/static/angular/angular.js:78:12
    at getControllers (http://192.168.56.101:8000/static/angular/angular.js:6141:19)
    at nodeLinkFn (http://192.168.56.101:8000/static/angular/angular.js:6312:35)
    at compositeLinkFn (http://192.168.56.101:8000/static/angular/angular.js:5722:15)
    at nodeLinkFn (http://192.168.56.101:8000/static/angular/angular.js:6305:24)
    at compositeLinkFn (http://192.168.56.101:8000/static/angular/angular.js:5722:15)
    at compositeLinkFn (http://192.168.56.101:8000/static/angular/angular.js:5725:13)
    at publicLinkFn (http://192.168.56.101:8000/static/angular/angular.js:5627:30)
    at http://192.168.56.101:8000/static/angular/angular.js:1343:27
    at Scope.$eval (http://192.168.56.101:8000/static/angular/angular.js:12075:28) <input type="hidden" name="csrfmiddlewaretoken" value="3JbQh7yANXJmrYWCA8ZeiI4ocKOk1yki"> 

That other input is nothing to do with the one I want the datepicker on.

Support "opens" option

opens: (string: 'left'/'right') Whether the picker appears aligned to the left or to the right of the HTML element it's attached to

See https://github.com/dangrossman/bootstrap-daterangepicker

How to use ranges?

Hi,

I want to use 'ranges' functionality and there is seems to be some mismatch in docs on format of ranges json. In README sample ranges looks like:

ranges="{'Special Range':{'startDate': '2013-09-2', 'endDate': '2013-09-5'}}">

while on the demo page it's

ranges = {
    'Today': [moment(), moment()],
    'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
    'Last 7 days': [moment().subtract('days', 7), moment()],
    'Last 30 days': [moment().subtract('days', 30), moment()],
    'This month': [moment().startOf('month'), moment().endOf('month')]
}

So, range should be specified as an array or as an object?

Moreover, in README it's written that ranges specified via 'ranges' attr, but in the demo, "options='range'" is used. Which one is correct?

Anyway, I can't make it work (ranges displayed, but on selection I always get today-today pair), but before digging deeper, I want to understand how is it supposed to work in the first place.

Thanks in advance.

Not working with the latest version f daterangepicker.js

I needed the ability to use singleDatePicker and found that version it's currently using doesn't support it. However, when I upgraded the daterangepicker.js to the latest, it stopped working.

Support manual, via input text, date manipulation.

Taking a look at Dan's original Bootstrap version, you can see the input field allows for manual date alteration.

This seems particularly useful if you commonly need large ranges, spanning several years.

How to init values to null or empty

Hi, I have a date filter on a table, and on init, I want this filter not to be active, but the daterangepicker init itself with today dates. Is there a way to init values with null or empty to disable it ?

"opens" attribute

The current implementation of support for the "opens" option is this:

options.opens = $attributes.opens && $parse($attributes.opens)($scope);

This implies that the attribute's value must be a scope variable; simply adding opens="left" resolved to undefined and is silently ignored by the datepicker plugin.

I think it should be:

options.opens = $attributes.opens || "right";

This allows the use of a simple string, defaulting to "right".

how do you a bootstrap styled input?

the input field is not bootstrap styled. no rounded corners...

am I missing something?