alongubkin/angular-datepicker

Angular.js Date/Time Picker

angular-datepicker

Warning: This project is no longer maintained. Use at your own risk!

The mobile-friendly, responsive, and lightweight Angular.js date & time input picker. Perfect for Ionic apps!

,

This is basically a pickadate.js fork that completely removes the jQuery dependency and adds Angular.js directives.

Bower

bower install angular-native-picker

Usage

Include build/angular-datepicker.js in your application:

<script src="angular-datepicker.js"></script>

Include CSS files in your application:

<link rel="stylesheet" href="build/themes/default.css"/>
<link rel="stylesheet" href="build/themes/default.date.css"/>
<link rel="stylesheet" href="build/themes/default.time.css"/>

Note: for usage within a modal the default (not classic) CSS files are recommended.

Add the module angular-datepicker as a dependency to your app module:

var myapp = angular.module('myapp', ['angular-datepicker']);

To create a date or time picker, add the pick-a-date or pick-a-time directive to your input tag:

<input type="text" pick-a-date="date" placeholder="Select Date" /> {{ date }}
<input type="text" pick-a-time="time" placeholder="Select Time" /> {{ time }}

You can also provide an options object to the directive which will be passed into the pickadate or pickatime constructor.

// somewhere in your controller
$scope.options = {
  format: 'yyyy-mm-dd', // ISO formatted date
  onClose: function(e) {
    // do something when the picker closes   
  }
}

<input type="text" pick-a-date="date" pick-a-date-options="options" /> {{ date }}
<input type="text" pick-a-time="time" pick-a-time-options="options" /> {{ time }}

If you don't need to provide any callbacks (like onClose) you can specify the options object as an angular expression:

<input type="text" pick-a-date="date" pick-a-date-options="{ format: 'yyyy-mm-dd' }" />

For a full list of available options please refer to the pickadate documentation for datepicker options and timepicker options.

angular-datepicker's Issues

Is this hub dead?

@alongubkin do you still support this project?

Using set kills the datepicker

If I set any property after I have created the date picker, none of the buttons work afterwards.

Default value not handled by the datepicker

Specify a default such as: $scope.myDate = '2015-01-01';

The datepicker is still pointing on today.

Demo

Bests

Cannot open multiple pickers

Hello!

When working with one instance, there's no problem. But when I try to open another instance in another input, I get this error when picking a date and the picker doesn't close: Uncaught TypeError: Cannot read property 'get' of undefined

Thanks

Missing js

Hi,

The instuction use: angular-datepicker.js

I downloaded the zip but this file is not there.

Thanks.

Using datepicker within a popup

So, here is an odd issue, I am using the datepicker within a template driven pop-up:
Controller calling the popup:

      templateUrl: 'templates/plantlog.html',
      title: vName,
      scope: $scope, 
      buttons: [
        { 
          text: 'cancel'},
        {
          text: '<b>Plant</b>',
          type: '',
.............

plantlog.html template for popup:

   <label class=" item plantItem" >
    <span class="input-label ">Plant Date</span>
          <input type="text" class="plantArea" pick-a-date="date" pick-a-date-options="options" placeholder="{{todayDate}}" ng-model="data.date"/>                  
    </label>

options controller for the datepicker:

  $rootScope.options = {
  format: 'yyyy-mm-dd', // ISO formatted date
    onClose: function(e) {
      alert('Worked!')   
    }
  }

Everything works as expected, popup pops up, but then when you click on the input field for the datepicker, the datepicker slides in but then you are unable to change the date to anything and the buttons down work. Also, if you touch any dates below the middle it the keyboard pops up and lets you type. Is there some sort of a conflict between them?

Days of month completely backward?

Un sure whats going on here... When I select it, it also appears in a little box which it doesnt fit in very well at the top left of the screen.

Can't set selectYears

Default pickadate set 10 year. But i want set 100 year and error. Please help me, thank u

datepicker isn't working in my ionic app

Hi,

Thank you for developing this. It looks like a great tool. Unfortunately i am having trouble getting it work in my ionic app. The input box appears but the hover image is a circle with a line through it and the input selection is disabled. I expect that i am missing something obvious. Can you help?

This tool is installed in my ionic project directory under www/lib/datepicker.

The app declaration looks like this:

angular.module('myApp', ['ionic',
                         'angular-datepicker',
                         'myApp.controllers',
                         'myApp.services'
                         ])

The HTML header looks like like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>myApp</title>

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="lib/date-picker/themes/default.date.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="lib/d3/d3.min.js"></script>
    <script src="lib/date-picker/angular-datepicker.js"></script>
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>

My HTML page looks like this.

<ion-view title="My App">
    <ion-header-bar class="bar-subheader myapp-header-colors">
        <ion-tabs class="tabs-icon-left"
             delegate-handle="myapp-tabs"
             style="width: 100%">
            <ion-tab title="Date"
                     icon="ion-ios7-compose-outline"
                     on-select="showDate()">
            </ion-tab>
            <ion-tab title="Progress"
                     icon="ion-arrow-graph-up-right"
                     ng-click="showProgress()">
            </ion-tab>
        </ion-tabs>
    </ion-header-bar>
    <ion-content class="has-header padding">
        <div ng-show="show_date">
            Date not enabled yet.
            <p>datepicker</p>
            <!-- user chooses their date here -->
            <input type="text" pick-a-date="date" placeholder="Select Date" />
            <p>other stuff</p>
        </div>
        <div ng-show="show_progress">
            Progress not enabled.
        </div>
    </ion-content>
</ion-view>

Here is the controller:

.controller('MyAppCtrl', function($scope, $state, $rootScope, $ionicTabsDelegate) {
    // This is a complex page with multiple sub tabs.
    $ionicTabsDelegate.$getByHandle('myapp-tabs').select(0);
    $scope.show_date = true;
    $scope.show_progress = false;
    $scope.date = {date: null};

    $scope.showDate = function() {
        $ionicTabsDelegate.$getByHandle('myapp-tabs').select(0);
        $scope.show_date  = true;
        $scope.show_progress = false;
    };

    $scope.showProgress = function() {
        $ionicTabsDelegate.$getByHandle('myapp-tabs').select(1);
        $scope.show_date  = false;
        $scope.show_progress = true;
    };
})

The text shows up properly but I the icon changes to a circle with a line through it when the cursor hovers over the input field and the popup doesn't appear.

No Demos

It would be nice to have some demos to test this out on mobile without having to download.

DatePicker window freezes when $scope.date is set in controller

Hi,

Thanks for such a great DatePicker !!!!!

It seems I have problems getting it to work when presetting the date...

Defining the directive like this:
<input type='text' pick-a-date='date' pick-a-date-options='datePickerOptions''/>

In the controller I have tried the following:
$scope.date = new Date();

And with an option:
$scope.date = {};
$scope.datePickerOptions = {
onRender: function(e) {
$scope.date = new Date();
}
};

In both cases the date picker freezes if I try to change the date after the page has loaded...

If I don't define $scope.date at all, it works fine...

Am I doing something wrong or is there a bug..?

focus errors.

i use ionicframework.

<input type="text" pick-a-date="date" placeholder="Select Date" ng-model="form.from" ng-readonly="true"/> 

this is my code.
datepicker is works well. but iphone remain input focus.

how can i?

No tests!?

0 tests.

How do you prevent regression?

Changing options on the fly. Is it possible?

Hi!

I'm wondering is there any way to change options and give them in to datepicker after it is constructed? Or is there any commands to reconstruct datepicker object?

set setYears true,but the options of years doesn't show when click select

see the code,it seems that in mousedown event callback set event. preventdefault

Build from source doesn't work whereas supplied minified version does.

I built from source but resulting calendar doesn't respond to mouse clicks (i.e. it pops up, but I can't select dates or change months. I can't even close it with the "Close" button).

The supplied minified version does work.

Any suggestions..?

can the datepicker be used with a button?

As I mentioned earlier, I really like this control. It is very clean and fast. However my application needs a button based datepicker and the documentation only shows it being using with text input directive.

I tried the following and it popped up the dialogue correctly but did not store the result in the model.

            <!-- is this supported? -->
            <button class="button button-stable"
                    ng-model="diary.date"
                    pick-a-date="date"
                    pick-a-date-options="{ format: 'yyyy-mm-dd' }"
                    button-stable>
                <i class="icon ion-ios7-calendar-outline"></i>
            </button>

Is that because this idiom is not supported or did i do something wrong?

Thanks.

Tag v1.0.3

Could you please tag the recent commits I've made as v1.0.3 so bower can install it? Thanks

Browser crash on drop down menu

Whenever you select a year of month from the drop down menu (if enabled, obviously) the browser crashes. Tried on the latest build of Chromium, Chrome and Safari on iOS. On iOS, the app crashes to desktop and on the desktop browsers, it seems to just freeze.

Not possible to localize the language

It seems it is not possible to configure the locale for displaying the month and other labels. I checked the guide http://amsul.ca/pickadate.js/date.htm#translations but it did not work with the angular version.

Readonly setting prevents :valid pseudo selector from working

I'm using :focus and :valid pseudo selectors in my css to move my input placeholders from within the input field up above the respective field as a label.

The angular-datepicker sets the field as readonly which prevents the :valid pseudo selector from working as expected. I was able to remove the code setting the input as readonly and confirm that my placeholder/labels worked as expected.

I was wondering if you could suggest another workaround (maybe a preventDefault()?) to prevent the keyboard from popping up though. Any help would be appreciated.

Any API to extend?

I noticed that this datepicker is based on this one(https://github.com/amsul/pickadate.js), and modified to angularjs-based. but there are plenty of api of amsul's pickadate, so I'm wondering if there also are APIs we can use to custom the datepicker. I'm using this datepicker but the only way to change some format is to modify the angular-datepicker.js, it's not that friendly.
Thanks for the work and waiting for your reply

Library is generally buggy and non-functional

I could not get this port to work at all. I spent almost 2 hours and got nothing.
I love how this library looks, so if you should ever restart maintaining this library, please close this issue so I know I can start using it again.

Thanks :)

ionic modal use datepicker has bug

we user ionic modal use a datepicker, when click the input element, the datepicker is not show

Is this still alive?

Great project all in all! I love getting rid of jquery in angular projects which is why I came looking for this. However there are some pretty killer bugs (picker dying with existing model values for one). Are these things going to be fixed?

...

Bower ENOTFOUND

bower install angular-native-datepicker

Command returns
bower ENOTFOUND Package angular-native-datepicker not found

Issue with nativeSplit

I am getting the following error in my console when I try to add anguler-datepicker to my project:

Uncaught RangeError: Maximum call stack size exceeded 

and it then points to VM877 legacy.js:84

Which contains

/*!
 * Cross-Browser Split 1.1.1
 * Copyright 2007-2012 Steven Levithan <stevenlevithan.com>
 * Available under the MIT License
 * http://blog.stevenlevithan.com/archives/cross-browser-split
 */
var nativeSplit = String.prototype.split, compliantExecNpcg = /()??/.exec('')[1] === undefined
String.prototype.split = function(separator, limit) {
    var str = this
    if (Object.prototype.toString.call(separator) !== '[object RegExp]') {
        return nativeSplit.call(str, separator, limit)  // line 84
    }

Any suggestions on what is wrong here?

Exception while switching months

When I'm switching between months without selected date such error appears in console:

TypeError: Cannot read property 'obj' of null
    at http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:28:458
    at Scope.$eval (http://localhost:8888/components/angular/angular.js:12701:28)
    at Scope.$apply (http://localhost:8888/components/angular/angular.js:12799:23)
    at c (http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:28:293)
    at Object.b._.trigger (http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:7:6870)
    at http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:7:5880
    at Array.map (native)
    at q.trigger (http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:7:5860)
    at q.set (http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:7:5284)
    at HTMLDivElement.<anonymous> (http://localhost:8888/components/angular-native-picker/build/angular-datepicker.js:7:1223) 

My setup:

<input type="date" name="fromDate" pick-a-date="form.fromDate" placeholder="Select From Date" class="field" required>

define(function () {
    'use strict';

    return function () {
        var vm = this;
        vm.form = {};
    };
});

any date callback to add a css class to the date cell ?

Hi,

is there any date render callback we can pass to apply something on the item when it's generated ?

like : custom-date on angular-ui datepicker

How to set min date?

I need to set the minimum date so users cannot select dates in the past?

No version tagged, breaks rails-assets.org

Hi @alongubkin, thanks for this great port to angular.

Would it be possible for you to quickly fix the following meta-data issues so that this package will work with https://rails-assets.org/:

1. Make the same the same in bower.json, package.json, README.md, etc
2. Put the same version number in each place
3. IMPORTANT Tag the repository with a semver-compatible version, eg v1.0.0

Thanks!

Doesn't work with Ionic

I tried using the plugin with Ionic, it doesn't work.

When I add an input to a modal, it doesn't open at all. When I add it to a normal view, the plugin opens, but nothing happens when I click on a date.

I read this: #1

and I built the project with grunt picker, as the build didn't include the changes. Still doesn't work.
I then included the src files instead of the build file, but that didn't help either.

I only use

<input type="text" pick-a-date="date" placeholder="Select Date" /> {{ date }}

Time limit of 24 hours

Hi
I dont want my timepicker to start at 00:00 , so I've changed the min to 6:00 and max to 5:45 and it is look fine .
The problem is when I'm trying to select a time after 12am (that means a time from the next day) but the input changed automaticly to the min value .

Months with less than 31 days

I just included this in my projecting and it's having a bunch of issues. The main thing I am noticing is when you select a day in a month with less than 31 days, the date gets moved forward to the next month (ie: selecting "Sep 7th" would return "Oct 7th"). This is really confusing me and I have no idea why or where this is happening.

Click event prevented but required by select inputs and overlay close

title says it all. Cant open select (e.g. select year) and cant close the datepicekr via click on black overlay background.

jQuery needed with container: '#root-outlet'

Hi,

It is stated jQuery is not needed for the datepicker to work. However, when I use

'container: '#root-outlet''

as an option I get an error that selector is not supported by angulars lite version.

Any ideas on how to solve this?

Can i pick month only?

like this: https://rawgit.com/g00fy-/angular-datepicker/master/app/index.html

Close button not available?

Hi! First of all, thanks for sharing your work. This is an awesome datepicker and works wonderful with Angular.
On a side note, I've been trying to implement this and can't get the "Close" button to show. I get the Today and Clear button, but close won't show up.
I looked around a bit, and it seems like in the src files, specifically in picker.date.js, there's no code for the close button.
I added it and tried to build again using the Grunt file, but I keep getting "Warning: Task "default" not found. Use --force to continue."
Did anyone solve this already? If not, can anyone point me in the right direction towards buidling the files again to test if my code works?
Thanks in advance!

Pickadate is appended on body, not after the input

Hi,

With current master files, checkout this example.

As you can see, the datepicker is created at a wrong place.

Bests

Please register your plugin with bower

Uncaught Error: [$injector:modulerr] Failed to instantiate module ng due to: RangeError: Maximum call stack size exceeded

Hello Alon,

I tried to install angular-datepicker, but this is what I get when I run the application.

Would you be able to give me a hint on where this error might come from (if you have seen it before)? Thank you very much!

Bower package not working without replacing angular-datepicker.js from repo

I have noticed that the bower package is not up to date with the latest js in the github repo, replacing the bower-component build/angular-datepicker.js restores expected functionality for example the close:'' property in configuration - is there any plan to fix this? should i create a pull request?

Won't open in a modal

I have read the other issues regarding opening the calendar in a ionic modal.
e.g. #20

I can get it opening ok when NOT in a modal, it isnt clear though whether the issue has been resolved as i can't get it to work?

keyboard navigation makes calendar unresponsive

AngularJS v1.2.27 - maybe this is the problem, but the requirements aren't in the readme, so I'm not sure.

Anyway, when I focus the input and use an arrow key, nothing happens. I can no longer use the mouse to pick a date or clear.

Eventually, Chrome (Version 39.0.2171.71 (64-bit)) says some pages have become unresponsive, Kill Pages or Wait.