eight04 / angular-datetime Goto Github PK

Hi Nice work.

Please add bower support

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">

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)?

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.

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

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! 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

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

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:

dateparser: baseDate is not a valid date

(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

Plunkr: https://plnkr.co/edit/Wg0kshnbFcMgZ5uKWiFt

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 missingcustom-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)

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 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?

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.

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

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

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

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:

#10

Your directive is so cool 😍
I use it on all my angularJS projects, I want to do same on my new projects :-)

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

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.

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.

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.

We should also remove this.doc = document and use $document instead. Why eslint didn't warn us?

https://docs.angularjs.org/api/ng/type/ngModel.NgModelController#$validators
https://github.com/eight04/angular-datetime/blob/master/src/directive.js#L212-L215

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.

Setting the bound data to an empty string does not clear the date from the input field.

Version 2.2.1 can't pass the test (https://github.com/eight04/angular-datetime/blob/master/test/test.js#L170).

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?

Both Angular 1.2 and 1.5
Firefox Version 49.0a2
Build ID 20160711004013

Chrome is fine.

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'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?

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!

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

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:

1. check for keypresses for all separators regardless user's locale. Means to listen on all keycodes like 190, 189 etc
2. somehow detect separator in the pattern and listen only for that keypress
3. listen for keypress based on user's locale

Personally I think the easiest and sufficient solution is the 1.

What do you think?

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 ?

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.

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

1. Split DD/MM/YYYY into Arr = [DD MM YYYY]
2. Send 'a'
3. Send the ith element of Arr[]
4. Repeat 2 and 3.

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; 
                    }
        }

Hi, getting "date.getMonth()" is not a function error when used with angular 1.4.8 any idea?

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?

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?

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 :-)

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}}">

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:

• some heavy computation starts because there is no visual feedback, i.e. I don't see a number I just typed
• after some time I can see error in console:

[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)

• "2" digit appears in the edit box
• "1" digit (which I typed initially) does NOT appear
• I can now type "1" and the processing of it is done in normal speed without any errors

#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

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.

It is giving me error as shown below.

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();

place holder is (year)-(month)-(date) now, how can I use datetimePlaceholder to reset it ?

hello guys, excellent work, it is just in Samsung browser not working properly, what can I do?

ignore