Sign inDemoInstall


Package Overview
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies



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.

Version published
Weekly downloads
increased by16.43%
Weekly downloads




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.

ngQuickDate Screenshot


  • 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.


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:

date-format"M/d/yyyy"Date Format used in the date input box.
time-format"h:mm a"Time Format used in the time input box.
label-formatnullDate/Time format used on button. If null, will use combination of date and time formats.
placeholder'Click to Set Date'Text that is shown on button when the model variable is null.
requiredfalseMakes the field required. Will set $invalid on the control and the form otherwise
hover-textnullHover text for button.
icon-classnullIf set, <i class='some-class'></i> will be prepended inside the button
disable-timepickerfalseIf true, the timepicker will be disabled and the default label format will be just the date
disable-clear-buttonfalseIf true, the clear button will be removed
on-changenullSet to a function that will be called when the date is changed
default-timenullTime that will be set when you click on a date on the calendar. Must be in 24-hour format.
init-valuenullSet the initial value of the date inline as a string. Will be immediately parsed and set as the value of your model.
date-filternullSet to a function to enable/disable dates. Useful for disabling weekends, etc. See more below


<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'});
all inline optionssee above tableNote that they must be in camelCase form.
buttonIconHtmlnullIf you want to set a default button icon, set it to something like <i class='icon-calendar'></i>
closeButtonHtml'X'By default, the close button is just an X character. You may set it to an icon similar to buttonIconHtml
nextLinkHtml'Next'By default, the next month link is just text. You may set it to an icon or image.
prevLinkHtml'Prev'By default, the previous month link is just text. You may set it to an icon or image.
dayAbbreviations(see below)The day abbreviations used in the top row of the calendar.
parseDateFunction(see below)The function used to convert strings to date objects.

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


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.


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)


Last updated on 06 Nov 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.


Related posts

SocketSocket SOC 2 Logo


  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc