monterail / angular-date-range-picker Goto Github PK

View Code? Open in Web Editor NEW

70.0 72.0 50.0 1.02 MB

Pure Angular date range picker, no jQuery

License: MIT License

CoffeeScript 53.15% CSS 37.49% HTML 9.36%

angular-date-range-picker's Introduction

This project has been discontinued and is no longer supported

Please use angular-mighty-datepicker instead. It's superior in every way, you won't regret it.

Pure Angular Datepicker, without jQuery

Install

bower install angular-date-range-picker

Usage

// require dateRangePicker module as dependency
angular.module('myApp', ['dateRangePicker']);

// specify default date range in controller
$scope.dates = moment().range("2012-11-05", "2013-01-25")

<!-- use 'date-range-picker' directive in view -->
<input type="text" date-range-picker ng-model="dates"/>

Customizations

Simple date picker

You can also select only one date:

<!-- use 'date-range-picker' directive in view -->
<input type="text" date-range-picker ranged="false"/>

Select range options

$scope.rangeSelectOptions = [
  {
    label: "This year",
    range: moment().range(
      moment().startOf("year").startOf("day"),
      moment().endOf("year").startOf("day")
    )
  },
  {
    label: "Last year",
    range: moment().range(
      moment().startOf("year").add(-1, "year").startOf("day"),
      moment().add(-1, "year").endOf("year").startOf("day")
    )
  }
]

<input type="text" date-range-picker ng-model="dates" custom-select-options="rangeSelectOptions" />

Angular version compatibility table

Due to usage of track by $index it is impossible to provide one version for both angular < 1.2 and >= 1.2.

Angular version	date-range-picker version
1.2.x	0.3.x
1.1.x	0.2.x
1.0.x	0.2.x

Development

npm install
bower install
grunt watch
open test/index.html

Contributing

Fork it
Create your feature branch (git checkout -b my-new-feature)
Commit your changes (git commit -am 'Add some feature')
Push to the branch (git push origin my-new-feature)
Create new Pull Request

angular-date-range-picker's People

Contributors

Stargazers

Watchers

Forkers

javarome thomaswdean willmcclellan mjquinlan2000 kiurchv jakcharlton dileepd tommy92 lostwarrior jessegavin mehdi-loup shreyass serpsapp relevano hvogit giosg christopheclc scotttrinh malino kichrum mobiquity-networks-forks xilix christofmuc buremba rike422 phaniraag matias-sandell zpzgone jbender nozzle heyflynn brngdsn pkdevbox layershift dinkar bouncelytics postmates mdgunn chhell mylifebob rushithakkar10 lamstutz scssat

angular-date-range-picker's Issues

I have to implement dateLimit how can i set limit to select two dates

its a question Actully

I have to implement dateLimit how can i set limit to select two dates

Thanks in Advance

Demo page

Don't Want Dates Specified Within a Range

I see that you're using the range to automatically select two dates (I'd like to use the multiple calendar view). However, is there a way to pick a range of MONTHS that the calendar can choose dates within, and WITHOUT any dates selected by default?

What I want to do is to have people specify start & end dates within a specific number of months without any dates already populated. Any way to do this?

Thanks in advance for answering it!

Custom 'select range'

Add ability to customize 'select range' options

Any way to update the calendar input box on pressing submit button

Below is the demo of angular dater-ange-picker. There is two option in the calendar:- date start and date end, so if i change date manually by writing date in the input box and if i press enter then it does not update the value on the main text box but it only update the calendar. i want the updated value on the main input box
DEMO

Error: duplicates in a repeater are not allowed

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: day in week, Duplicate key: undefined:undefined minErr/<@http://localhost:3000/assets/angular/angular.js?body=1:61 ngRepeatAction@http://localhost:3000/assets/angular/angular.js?body=1:16566 $watchCollectionAction@http://localhost:3000/assets/angular/angular.js?body=1:9738 Scope.prototype.$digest@http://localhost:3000/assets/angular/angular.js?body=1:9832 Scope.prototype.$apply@http://localhost:3000/assets/angular/angular.js?body=1:10040 done@http://localhost:3000/assets/angular/angular.js?body=1:6543 completeRequest@http://localhost:3000/assets/angular/angular.js?body=1:6727 createHttpBackend/</xhr.onreadystatechange@http://localhost:3000/assets/angular/angular.js?body=1:6685


return logFn.apply(console, args);

angular 1.2.0-rc.1

Using angular-date-range-picker makes all checkboxes on the page unusable

Invalid date (null) if end of range is not selected

STR:

Open demo page (angular-date-range-picker/test/index.html)
Click first date picker.
Single click on any date.
Click on "Apply" button.
Click on date picker again.
Single click on any date again.
Click on "Apply" button.

Expected result: Date range should be single day after actions 4 and 7.

Current result: "Invalid date - Nov 1, 2012", null - "2012-10-31T22:00:00.000Z", Datepicker is crashed.

date range picker set date format

Hello
I want to change the start date and end date format to(MM,DD,YYYY) displayed in the date range picker. by default it is (YYYY,DD,MM). I am not getting API link to explore the possible config options.
please guide me how to do this.

documentation

It would be really cool if there were a little more documentation.
For example, how do I actually capture the dates in my controller? How do I know they've changed?
I tried ng-click="ok($event)" but it does nothing.

[EDIT] The callback is what I was looking for. what would be very helpful if it were in the docs.

Make it respect the .utc() flag

scope.range = moment().range(moment.utc("2012-10-10"), ...);

...

scope.$watch "range", (n, o) ->
  scope.range.start #this is now in local timezone - hour is always set to 12PM, whilst for example in moment.utc("2012-10-10").startOf("day") it is at 1AM in GMT +1