alongubkin / angular-datepicker Goto Github PK
View Code? Open in Web Editor NEWAngular.js Date/Time Picker
License: MIT License
Angular.js Date/Time Picker
License: MIT License
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.
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..?
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?
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 :)
0 tests.
How do you prevent regression?
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.
Default pickadate set 10 year. But i want set 100 year and error. Please help me, thank u
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?
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
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.
It would be nice to have some demos to test this out on mobile without having to download.
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..?
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?
title says it all. Cant open select (e.g. select year) and cant close the datepicekr via click on black overlay background.
see the code,it seems that in mousedown event callback set event. preventdefault
Hi,
With current master files, checkout this example.
As you can see, the datepicker is created at a wrong place.
Bests
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?
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 }}
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.
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 .
I need to set the minimum date so users cannot select dates in the past?
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.
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?
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.
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?
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/:
bower.json
, package.json
, README.md
, etcv1.0.0
Thanks!
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
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)
<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 = {};
};
});
Specify a default such as: $scope.myDate = '2015-01-01';
The datepicker is still pointing on today.
Bests
If I set any property after I have created the date picker, none of the buttons work afterwards.
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.
Could you please tag the recent commits I've made as v1.0.3 so bower can install it? Thanks
@alongubkin do you still support this project?
bower install angular-native-datepicker
Command returns
bower ENOTFOUND Package angular-native-datepicker not found
we user ionic modal use a datepicker, when click the input element, the datepicker is not show
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?
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!
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
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?
Hi,
The instuction use: angular-datepicker.js
I downloaded the zip but this file is not there.
Thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.