ngQuickDate

ngQuickDate is an Angular.js Date/Time picker directive. It stresses speed of data entry and simplicity while being highly configurable and easy to re-style.

Download

• Version 1.3.4

• Only compatible with Angular 1.2.x. For a version compatible with Angular 1.0.x, checkout the angular-1.0 branch.

You can also install the package using Bower.

bower install ngQuickDate

Or add it to your bower.json file:

dependencies: {
  "ngQuickDate": "~1.3.0"
}

No dependencies (besides Angular) are required, but its date parsing capabilities can be improved by 3rd party libraries. See Smarter Date/Time Parsing for more info. And it's styling can be improved by using a font icon library like Font Awesome. See the Styling and Configuration sections.

Demo

You can find some basic examples here

The Basics

To use the library, include the JS file, main CSS file, and (optionally, but recommended) the theme CSS file. Then include the module in your app:

app = angular.module("myApp", ["ngQuickDate"])

The directive itself is simply called datepicker. The only required attribute is ngModel, which should be a date object.

<quick-datepicker ng-model='myDate'></quick-datepicker>

• Note: This should just be <datepicker> before version 1.3

Inline Options

There are a number of options that be configured inline with attributes. Here are a few:

Example:

<quick-datepicker ng-model='myDate' date-format='EEEE, MMMM d, yyyy' placeholder='Pick a Date' disable-timepicker='true'></quick-datepicker>

Configuration Options

If you want to use a different default for any of the inline options, you can do so by configuring the datepicker during your app's configuration phase. There are also several options that may only be configured in this way.

app.config(function(ngQuickDateDefaultsProvider) {
  ngQuickDateDefaultsProvider.set('option', 'value');
  // Or with a hash
  ngQuickDateDefaultsProvider.set({option: 'value', option2: 'value2'});
})

Default Day Abbreviations: ["Su", "M", "Tu", "W", "Th", "F", "Sa"]

Default Parse Date Function:

function(str) {
  var seconds = Date.parse(str);
  return isNaN(seconds) ? null : new Date(seconds);
}

Smarter Date/Time Parsing

By default, dates and times entered into the 2 input boxes are parsed using javascript's built-in Date.parse() function. This function does not support many formats and can be inconsistent across platforms. I recommend using either the Sugar.js or Date.js library instead. Of the 2, I recommend definitely Sugar.

If you'd like to use Sugar, you can configure it to work like so:

app.config(function(ngQuickDateDefaultsProvider) {
  ngQuickDateDefaultsProvider.set('parseDateFunction', function(str) {
    d = Date.create(str);
    return d.isValid() ? d : null;
  });
})

And with Date.js:

parseDateFunction: function(str) {
  return Date.parse(str);
}

Of course, you can override this parse function with any code you'd like, so you're also free to swap in another library or write your own parser.

Date Formatting

Note that when displaying dates in a well-formatted manner, Angular's Date filter is used. So if you want to customize these formats, please reference that link to see the formatting syntax. Sugar.js and Date.js have their own formatting syntax that are different from Angular's.

Date Filter Function

If you'd like to prevent the user from choosing certain dates, such as weekends or dates that have already been 'reserved', you can do so with the date-filter attribute. For example, if you want to disable weekends, you can do it like so:

<quick-datepicker ng-model='myDate' date-filter='onlyWeekdays'></quick-datepicker>

$scope.onlyWeekdays = function(d) {
  dayIndex = d.getDay();
  return ((dayIndex != 0) && (dayIndex != 6));
}

You can also set a default date filter function in the configuration options

Styling

There is a very light set of styles that allow the datepicker to function, but isn't particularly pretty. From there you can either use the default theme that's included or you can easily write your own theme.

You can improve it's appearance quite a bit by using a Font Icon library like Font Awesome. To make look like the screenshot above, you'd need Font Awesome 4.0 and the following configuration:

app.config(function(ngQuickDateDefaultsProvider) {
  // Configure with icons from font-awesome
  return ngQuickDateDefaultsProvider.set({
    closeButtonHtml: "<i class='fa fa-times'></i>",
    buttonIconHtml: "<i class='fa fa-calendar'></i>",
    nextLinkHtml: "<i class='fa fa-chevron-right'></i>",
    prevLinkHtml: "<i class='fa fa-chevron-left'></i>"
  });
});

Browser Support

So far, it has only been tested in Chrome.

Contributing

Contributions are welcome. Whenever possible, please include test coverage with your contribution.

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

To get the project running, you'll need NPM and Bower. Run npm install and bower install to install all dependencies. Then run grunt in the project directory to watch and compile changes. And you can run karma start to watch for changes and auto-execute unit tests.

Potential Features down the road

• Optimize for Mobile (It works fine now, but it could be slightly improved)