eight04 / angular-datetime Goto Github PK
View Code? Open in Web Editor NEWA directive to add the behavior of datetime input on unsupported browsers.
License: MIT License
A directive to add the behavior of datetime input on unsupported browsers.
License: MIT License
Currently when the model is null, this directive replaces it to a new Date() or something.
So it seems its not possible to have empty input value
We often put validation in parser and formatter function. If validation failed, return undefined. This action let validation control model value directly. If we have to process validation outside parser/formatter function, then we cannot control model value anymore, which is the problem.
Currently I removed return undefined
from min/max validator, which is breaking previous feature.
I'm getting the following error:
It seems the package.json main
property is pointing to a file that requires all the components of this package. Shouldn't this point to a transpiled version of your library? Otherwise I need to have babel and the ng-annotate plugin in order to use this.
If I import "angular-datetime-input/dist/datetime" directly I get this error:
Any way to resolve this?
Hi.
Is there a way to avoid the placeholder?
I tried the following:
appModule.config(function(datetimePlaceholder){ angular.extend(datetimePlaceholder, { year: "", month: "", date: "", hour: "", minute: "" }); });
And I got the following error:
Error: InputMask.digest crashed! Infinite loop on 08:55 at InputMask.digest (http://localhost/tellware/libs/angular-datetime/custom-input.js:470:27) at InputMask.initialize (http://localhost/tellware/libs/angular-datetime/custom-input.js:371:26) at new InputMask (http://localhost/tellware/libs/angular-datetime/custom-input.js:226:23) at Object.linkFunc [as link] (http://localhost/tellware/libs/angular-datetime/datetime.js:114:14) at http://localhost/tellware/Scripts/angular.min.js:16:230 at ia (http://localhost/tellware/Scripts/angular.min.js:81:35) at n (http://localhost/tellware/Scripts/angular.min.js:66:176) at g (http://localhost/tellware/Scripts/angular.min.js:58:429) at g (http://localhost/tellware/Scripts/angular.min.js:58:446) at g (http://localhost/tellware/Scripts/angular.min.js:58:446) <input class="form-control ng-pristine ng-untouched ng-valid" id="fechaMaximo" type="text" name="maximo" ng-class="edited" ng-model="vm.campo.calendario.maximo" ng-pattern="vm.mascarasFecha[vm.campo.calendario.tipo].pattern" placeholder="{{vm.mascarasFecha[vm.campo.calendario.tipo].placeHolder}}" ng-maxlength="vm.mascarasFecha[vm.campo.calendario.tipo].maxLength" datetime="{{vm.mascarasFecha[vm.campo.calendario.tipo].datetime}}">
Setting the focus in an input
element sets its model value to a date object of the current moment. This, however, is wrong when the input
does not show the complete date. For example, I have an input
with datetime="longDate"
. Clicking it will set its model value something like "2016-02-15T20:22:40.808Z". It should, however, be "2016-02-14T23:00:00.000Z" (February 15. minus one hour because my timezone is +1).
Thank you very much for such a useful component! I have the problem though with the speed. Let's say I have such html code:
<input type="text" datetime="yyyy-MM-dd" ng-model="start_date" ng-required="true"/>
When I use arrows to change the date, everything is fine. But let's say I have day "11" and I would like to manually write "21". So I type "21" and this is what happens:
[object Object] angular.min.js (line 117)
e/<()angular.min.js (line 117)
linkFunc/<()datetime.js (line 1177)
Pg</this.$$parseAndValidate()angular.min.js (line 285)
Pg</this.$commitViewValue()angular.min.js (line 284)
Pg</this.$$debounceViewValueCommit/<()angular.min.js (line 286)
vf/this.$get</m.prototype.$eval(a=Object { type="object"}, b=undefined)angular.min.js (line 145)
vf/this.$get</m.prototype.$apply(a=Object { type="object"})angular.min.js (line 145)
Pg</this.$$debounceViewValueCommit(b="input")angular.min.js (line 286)
Pg</this.$setViewValue(a="2016-07-1", b="input")angular.min.js (line 286)
lb/l(a="input")angular.min.js (line 176)
Sf(a=Object { type="object"}, b=Object { type="object"}, d=Object { type="object"})angular.min.js (line 37)
Rf/d(c=Object { type="object"}, d=undefined)angular.min.js (line 36)
hello guys, excellent work, it is just in Samsung browser not working properly, what can I do?
The Demo link on the main info page is dead, i.e.,
https://rawgit.com/eight04/angular-datetime/master/demo.html
I wasn't sure who to contact regarding this so am submitting it as an issue here. Thank you.
It would be nice if you could upload your package to www.npmjs.com.
Unfortunately the name is already taken (there is another package with the same name).
Hi, getting "date.getMonth()" is not a function error when used with angular 1.4.8 any idea?
I'm facing issues while sending Keys to the custom date field via Selenium.
I'm using a Work Around to send fields into the custom date format.. It does not work any other Way!
This works on ALL browsers but facing Intermittent failures using Safari.
The Algo is..
Below is the Code snippet just to send date Keys.
public boolean sendDateKeys(By locator,String date, String msg1, String id, int index ) throws IOException{ //This is browser Sensitive
String msg2 = "Entered";
DebugPauseAfterStep();
String dob;
String srcFormat = "mm/dd/yy" ;
String dstFormat_all = "dd/mm/yyyy";
String elemDob = UtilFunctions.get().getAngVar(id);
System.out.println("the current date is "+ elemDob);
dob = UtilFunctions.convertDateFormat(date , srcFormat, dstFormat_all);
System.out.println("the converted date is "+ dob);
dob = UtilFunctions.convertDateFormat(CL.getTestDataInstance().getDOB(), srcFormat, dstFormat_all);
WebDriver wd = CL.GetDriver();
try {
UtilFunctions.sleepFor(1,"safari date field"); //TODO better is wait for value to be found..
wd.findElement(locator).sendKeys("a");
String currBoxVal = getAngVar(id);
System.out.println(String.format("the target is %s and orignal is %s", dob, currBoxVal));
int i = 0 ;
for (String s : dob.split("/")){
wd.findElement(locator).sendKeys(s);
if (isSafari()){
DebugPauseAfterStep();
wd.findElement(locator).sendKeys("a");
}
wd.findElement(locator).sendKeys("a");
i++;
}
myReport("Pass", msg1 + " " + msg2 + " Value is:"+ b(dob));
// UtilFunctions.get().sendKeys(locator, s, "Date of Birth", "Entered");
return true;
}catch(Exception e){
myReport("Fail", msg1 + " NOT" + msg2 + " Value is:" + b(dob) );
e.printStackTrace();
return false;
}
}
When ng-model binds to a date value other than current date/time, the control displays current date/time instead. If I change it at all, that changed value then overwrites my model. How can I get the view to initialize with the value of ng-model? This does the same on Chrome and IE11.
Hmm. I noticed that in function createParser(format), a property called TP is initialized with the current date. If I change that to an arbitrary date in the code, that is the value that my control uses as the initial value. It should initialize to the value of ng-model (a date object in my code).
Am I doing this wrong? Not supposed to be binding to a date variable perhaps?
The behaviour when entering day of month with a leading zero is wrong. I have an input
with datetime="longDate
. Assume the input
value is "January 1, 2016". When setting the focus to the day of month and press the 0 key, the resulting value is "December 31, 2015".
A probably better behaviour would be to ignore the zero (depending on the format, of course) and after entering one of 1-9 to focus the next format group (in this case the year). So when pressing "02" on "January 1, 2016", the resulting value should be "January 2, 2016" with having the focus on the year.
Very cool extension btw!
Your directive is so cool 😍
I use it on all my angularJS projects, I want to do same on my new projects :-)
return new JsonResult(){Data={new { Data = MYmodel}};
client result : "/Date(1239018869048)/"
[{
"ID": 1,
"PublishedAt": "/Date(1330848000000-0800)/",
"Text": "Best blog post ever",
"Title": "Magical Title"
}, {
"ID": 2,
"PublishedAt": "/Date(1320825600000-0800)/",
"Text": "No, really",
"Title": "You rock"
}]
How can I parse this case ?
Is there any specific reason not to minify dist/datime.js
?
If you guys want it, I can send a PR to do it.
Great module, by the way.
Both Angular 1.2 and 1.5
Firefox Version 49.0a2
Build ID 20160711004013
Chrome is fine.
I've got a timer that updates the model each second, I've found that the view is not being updated when using this directive.
Is it possible to achieve this?
Here's a pen if needed http://codepen.io/Lahikainen/pen/WGmxPo
Thanks for the project, it's awesome!
Hi - Is there a way for me to have this NOT localize the time? I want it to just be used as a string, essentially. I got it to display correctly, but when I save the info, it is reverting to UTC again. I can't figure out a way to have it NOT localize on the save portion.
Thanks in advance.
Hello,
When I run your code I got this error:
TypeError: date.getTime is not a function at offset (datetime.js:767) at DatetimeParser.setDate (datetime.js:802) at Array.<anonymous> (datetime.js:263) at ngModelWatch (ionic.bundle.js:40103) at Scope.$digest (ionic.bundle.js:30230) at Scope.$apply (ionic.bundle.js:30503) at done (ionic.bundle.js:24824) at completeRequest (ionic.bundle.js:25022) at XMLHttpRequest.requestLoaded (ionic.bundle.js:24963)
My html:
<input type="text" placeholder="Birthday" class="textbox-n" datetime="yyyy-MM-dd" ng-model="data.birthday" onfocus="(this.type='date')">
Thanks in advance
angular-datetime/lib/directive.js
Line 8 in 9785c3d
We should also remove this.doc = document
and use $document
instead. Why eslint didn't warn us?
Hi guys,
I'm currently using this module in a small application of mine and I needed to get the date format with the local offset (not the standard UTC output).
I've also made a pull request for the new method:
I don't know if this is a bug or I'm missing something. But I can't get the arrow keys up/down to work properly. When I select the minutes (mm) and press key up it jumps to the end of the input field (after increasing the minute-value by one). The cursor doesnt jump in your demo, it stays and I can increase a value multiple times.
This is what I do:
<input type="text"
ng-model="thingy.timeModel"
datetime="mm:ss">
This directive looks amazing. I wonder if it would be possible to bind the tab/space/enter key to move on to the next part of the date. It seems like that would make it just a little more intuitive.
I am running AngularJS/angular-datetime (latest build) in a legacy ASP.net MVC 5 application. Within the application, all page script management is handled by the MVC ScriptBundle manager.
With ScriptOptimisation turned off, angular-datetime works perfectly, but with the ScriptOptimisation turned on I get the following error when the datetime attribute is referenced in the view:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.15/$injector/unpr?p0=nProvider%20%3C-%20n%20%3C-%20datetimeDirective
I am new to AngularJS, but I am guessing this is a problem related to parameter name changing during the script bundling/minification process?
Finally, thank you for taking the time to build this extension - it addresses my needs perfectly.
ignore
Hey there,
I really like this library
Starting with version 4.0.0, if the input field value is empty, the field value is something like
This behaviour is really strange. Could you please re-check this decision in 4.0.0 again?
Furthermore, in 4.1.0, even if required/ng-required is set to false, after selecting a date and removing it, the form becomes invalid as the current value (empty) cannot be parsed as a date.
I have a input text element with the datetime and ngRequired directives on it. No matter what the value of ngRequired, the ng-valid-required class is added to the element.
I have looked at the source for the datetime directive and could find no obvious place this was being done.
How can I get ngRequired to work in conjunction with the datetime directive?
I need to be able to use your directive along with the angular ui bootstrap (https://angular-ui.github.io) DatePicker Popup. When I try, i get the following error:
(anonymous) @ angular.js:13920
parse @ ui-bootstrap-tpls.js:1239
parseDateString @ ui-bootstrap-tpls.js:3015
parseDate @ ui-bootstrap-tpls.js:3042
$$parseAndValidate @ angular.js:27647
$commitViewValue @ angular.js:27637
(anonymous) @ angular.js:27780
$eval @ angular.js:17682
$apply @ angular.js:17782
$$debounceViewValueCommit @ angular.js:27779
$setViewValue @ angular.js:27751
(anonymous) @ datetime.js:419
defaultHandlerWrapper @ angular.js:3497
eventHandler @ angular.js:3485
Version 2.2.1 can't pass the test (https://github.com/eight04/angular-datetime/blob/master/test/test.js#L170).
I have installed the npm angular-datetime-input package and added it to my component file
`import * as angular from 'angular';
import 'angular-datetime-input';
import { FormModule } from './form/form.module';
export const ComponentsModule = angular.module( 'prospaDynamicForm.components', [
FormModule.name,
'datetime',
]);
When I the use the directive in my template I get a error about a missing
custom-input` module.
Uncaught Error: [$injector:modulerr] Failed to instantiate module prospaDynamicForm due to: Error: [$injector:modulerr] Failed to instantiate module prospaDynamicForm.components due to: Error: [$injector:modulerr] Failed to instantiate module components.form due to: Error: [$injector:modulerr] Failed to instantiate module custom-input due to: Error: [$injector:nomod] Module 'custom-input' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.6.1/$injector/nomod?p0=custom-input at http://localhost:3000/index.js:24443:12 at http://localhost:3000/index.js:26558:17 at ensure (http://localhost:3000/index.js:26482:38) at module (http://localhost:3000/index.js:26556:14) at http://localhost:3000/index.js:29111:22 at forEach (http://localhost:3000/index.js:24732:20)
This module is used and installed with the datetime package so I can't see why I should have to do anything with it.
Anyway, when I import the package myself at the top and inject it, it doesn't resolve the issue.
Any idea what is going on?
Angular 1.5 using Typescript (babel)
If we use this example :
<input type="text" datetime="dd.MM.yyyy" ng-model="myDate" datetime-separator=",.-/">
and if the current month don't have 31 days, it's impossible to set 31 :-)
The placeholder uses the values from datetimePlaceholder, but actually puts them as text in the input, rather than in the placeholder= attribute, and so they are constantly there as a mask. There's also no option to disable this behavior, so anytime the textbox gets cleared, it actually ends up with the tokens there again.
Ideally the placeholder should fill the placeholder attribute, and have an option to turn off the placeholder tokenizing (or at least a attribute to say that the text returned by getText() 'isPlaceholder')
I have a simple date only field using the UK data format dd/MM/yyyy as follows:
<input id="startDate" type="text" name="startDate" datetime="dd/MM/yyyy" ng-model="startDate" required />
If I then add a bound value to the page:
<p>Date: {{ startDate }}</p>
and set the input to '19/5/2015' the reflected value changes to '2015-05-18T23:00:00.000Z' which is one hour behind where I would have expected it to be.
I am not sure if this issue is related to daylight savings (we are currently running British Summer Time GMT+1)?
The date filter in Angular now accept timezone
argument. We should support it as well.
https://docs.angularjs.org/api/ng/filter/date
Maybe something like:
// different timezone will result in different datestring
parser.setDate(new Date);
datestring = parser.getText(timezone);
// if the timezone is not provided, it should look 'Z' token in datestring for the timezone.
parser.parse(datestring, timezone);
date = parser.getDate();
Setting the bound data to an empty string does not clear the date from the input field.
I have an app that allows users to enter dates and times in either EST or UTC but I haven't been showing the timezone in the input field because I found no way to show it as the string instead of +0500.
A design change is needed to show the UTC or EST strings in the input field. Can this be done?
I need the ability to display the time in local time or utc based on a user selection. Is there currently a way to dynamically change the timezone of the input field?
Using the directive, datetime on an input type=text element, the element acts as if it is required and my form won't submit unless the field has a value. I need to be able to support and empty date input field.
Hi! Nice project!
Is there a way to correctly handle the errors thrown by the plugin avoiding the output on the console?
How to do it?
Thanks
place holder is (year)-(month)-(date) now, how can I use datetimePlaceholder to reset it ?
Hi Nice work.
Please add bower support
I have the element <input class="ng-pristine ng-valid ng-touched" type="text" ng-model="arvio.paivamaara" ng-disabled="operationInProgress" datetime="dd.MM.yyyy">
, with the model being a date.
IE 11 displays Fri Jul 06 2018 12:11:02 GMT+0300 (Suomen kesäaika)
, while Firefox and Chrome both format it as specified in the datetime attribute: 06.07.2018
.
I checked the console and it says something like "TypeError: Object does not support property or function values".
I can't get to parse some w3c formatted dates properly,
If the timezone is +01:00, it seems to go wrong and I get the date of the day.
Here is an example :
https://plnkr.co/edit/g2tPcae2mfdp3PHo9HZ1?p=preview
People in my country are used to write date in this format: DD. mm. YYYY
However when I fill days with single digit (eg. 5th November) I have to press right arrow to jump to the month part.
It would be great if I could press a .
(or -
, /
for other locales) to jump to the month part.
I would like to create PR but want to discuss this feature first. These are possible solutions coming to my mind:
Personally I think the easiest and sufficient solution is the 1.
What do you think?
We have a use case where the date value needs to be displayed to the user and editable by the user in the UTC timezone, not in the user's local timezone. An option to enable this behavior would be very useful.
I have input with shortDate format, an initial state it has value 4/27/18 (in model I have "2018-04-27T11:25:43.322Z" at this moment), then I clear 18 (model is undefined now), unfocus from the item, and then I type 20, in model I have "0020-04-27T11:22:49.458Z" instead of "2020-04-27T11:22:49.458Z"
@eight04 could you look at this? Maybe some parsing problems take place
#Object.values is using in datetime.js
Since it is an experimental Object.values, it requires additional polyfil.
I recommend use a polyfil function:
var valuesPolyfill = function values (object) {
return Object.keys(object).map(key => object[key]);
};
var values = Object.values || valuesPolyfill;
I am happy to submit a PR is you like this.
Cheers
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.