dalelotts / angular-date-time-input

Allows user input of a date/time value. Valid dates are displayed in specified format, but input may be in any supported format.

Hi there 👋

• Software Engineer (Java, JavaScript, React, Angular, Node)
• Extreme Programming coach and mentor.
• Trainer (Java, JavaScript, React, Angular, Node, serverless, cloud architecture, software engineering)
• Public Speaker
• Mentor

About me

I’m an Agile Technical Coach, XP Coach, and Software Architect with over two decades of experience spanning various client, server and cloud infrastructure technologies.

These days I work extensively with the following and more:

• Java
• JavaScript (React, Angular, Node)
• AWS (ECS, Fargate, Lambda, CloudFormation, and more)
• Container technology (e.g. Docker)
• Microservice Architectures
• Serverless Architectures
• Event-driven Architectures

My love for technology is matched only by my passion for travel. I've visited the following countries and more:

• Australia
• Cambodia
• Canada
• Chile
• China
• Costa Rica
• Ecuador
• Germany
• Japan
• Malaysia
• Mexico
• New Zealand
• Panama
• Poland
• Thailand
• Vietnam

angular-date-time-input's Issues

Invalid display of date with modelType of type String

The date is being parsed with the display format instead of the model type format.

Have a look at the following plunker. The first input ("Date 1") should display "01/09/2016" instead of "09/01/2016". The second input ("Date 2") is displayed correctly because moment interpretes it as an invalid format and it fallbacks to the modelType format, which is accepted.

In order to fix this, modelType must precede attrs.dateTimeInput in the inputFormats construction. If I do this, all specs pass, including this special case.

new version please

Could you please advance the version to 0.1.1 so that we get the "latest" changes when installing with bower?

[Question] Is it necessary to bind blur event on input

Is it necessary to bind blur event on input ?

element.bind('blur', function () {
        var viewValue = controller.$modelValue;
        angular.forEach(controller.$formatters, function (formatter) {
          viewValue = formatter(viewValue);
        });
        controller.$viewValue = viewValue;
        controller.$render();
      });

Because:
controller.$parsers.unshift(validateFn);
controller.$formatters.push(formatFn);

Is called automatically when model or view is changed.

On build via grunt the wrong js file linking in index.html

script src="bower_components/angular-date-time-input/src/js/sortableColumn.js"
is getting included instead of
script src="bower_components/angular-date-time-input/src/dateTimeInput.js"

French simple date format

Hello!

You can see my problem on http://plnkr.co/edit/qB39hGTYKQXgE1vIHZJc?p=preview : when I put 25/01/2015 for exemple in the input, the result is not valid (2018-01-01T00:00:00+01:00).

What Am I missing ?

Thanks for you help !

J.-Luc

How to init panel with ngModel value?

How to init panel with ngModel value?

Displaying wrong date

Hi somehow something goes wrong with displaying the dates, the underlying values seem to be the correct date. It looks like every date after this double 30 30 is displayed wrong.

Any idea what the issue might be?

Webpack export module name

Hello!

Currently the webpack export is ui.bootstrap.datetimepicker. Is this intended?

angular-date-time-input/src/dateTimeInput.js

Line 20 in c7fc75b

module.exports = 'ui.bootstrap.datetimepicker'

I expected the export to be ui.dateTimeInput, as the module name is that:

angular-date-time-input/src/dateTimeInput.js

Lines 29 to 31 in c7fc75b

	angular.module('ui.dateTimeInput', [])
	.service('dateTimeParserFactory', DateTimeParserFactoryService)
	.directive('dateTimeInput', DateTimeInputDirective)

I'm gonna go ahead a create a fork that fixes that for our own purposes, do tell me if you would be accepting a PR.

This would probably be a major release, though.

EDIT: done: master...LaBelleAssiette:fix-webpack-export

Please add main to bower.json

please add to .bower.json
"main": "src/datetimeinput.js",
this will help wiredep grab the js file and inject it into our index.html.

thanks from all of us at generator-angular-fullstack :) great components!

这个插件和angular filter date的区别

请问这个插件和angular filter date 有什么区别呢？谢谢。

Uncaught TypeError: (intermediate value)(intermediate value)(...) is not a function

Tried updating from 1.1.0 to 1.2.0 but it only works in development. It breaks the app in the minified version with the following error:

Uncaught TypeError: (intermediate value)(intermediate value)(...) is not a function

Latest version does not include fix: Add semi-colon at end of IIFE's

Bug Reports

You MUST have a JSBin recreation, or else your issue will be CLOSED without explanation.

Instructions: https://github.com/dalelotts/angular-bootstrap-datetimepicker/wiki/Reporting-Bugs

• Overview of the Issue - Lack of semicolon at the end of the main file causes issue when concatenated with other JS files from other libraries.
• Motivation for or Use Case - This prevents the library from registering with angular, preventing angular from bootstrapping
• angular-bootstrap-date-formats Version(s) - since at least 1.2.1
• Browsers and Operating System - N/A
• Link to a live example - N/A - will submit PR which fixes
• Related Issues - N/A

Update package on bower to version with concatenating support

Hi,

Could you release new version on bower with the fix related to concatenating with other files?

Thanks.

not required

Hi,

My date field is not required. How can I manage this with your plugin?

Greets,
Tom

moment construction falls back to js Date

Get the warning: moment construction falls back to js Date
Is it possible to handle this?

Thanks!

Minified version

Would be nice if there would be minifed version of the library checked in into the repo, so that it can be required easily from bower and used straight away without the need of minifying it yourself.

Apply input Validations for user.

How do I apply validations for input to not enter any thing else than a proper date format?

not sure why, but my bower doesn't pull this in all automagic like....

septugenarian:assets chris$ bower install
bower angular-bootstrap-datetimepicker#*           cached git://github.com/dalelotts/angular-bootstrap-datetimepicker.git#0.1.4
bower angular-bootstrap-datetimepicker#*         validate 0.1.4 against git://github.com/dalelotts/angular-bootstrap-datetimepicker.git#*
bower angular#~1.x                                 cached git://github.com/angular/bower-angular.git#1.2.0-rc.2
bower angular#~1.x                               validate 1.2.0-rc.2 against git://github.com/angular/bower-angular.git#~1.x
bower moment#~2.x                                  cached git://github.com/timrwood/moment.git#2.3.1
bower moment#~2.x                                validate 2.3.1 against git://github.com/timrwood/moment.git#~2.x
bower angular-date-time-input#0.1.0             ENOTFOUND Package angular-date-time-input not found
septugenarian:assets chris$ 

Demo link

How about a demo link in your documentation?

Moment parse issue

When using the control to format input using HH:mm I am getting the wrong date. The date depending on the input is consistent, but wrong. An example would be 1503 parses to 12/31/02 19:00. I have tested the parsing functionality of moment and it parses as expected. Here is a fiddler that has the moment examples.

https://jsfiddle.net/lfolinowjb/spoqfd7y/2/

Missing format when validating

In validateFn moment is created without the format. That causes validation errors when using a certain format (like "L HH:mm:ss") at least in combination with localization (like German). If changing the displayed value in a valid way, the moment date is invalid.

Solution: Create the moment instance using the format:
var momentValue = moment(viewValue, attrs.dateTimeInput);

This directive is not working on my production server.

First of all good work!!

I used this directive along with angular-bootstrap-datetimepicker directive in my project. This all works well in dev environment but not on production server.

Dropdown dateTime picker opens calender but after selecting datetime, format directive is not working. It shows date in inputbox in below format.
Thu Nov 13 2014 10:00:00 GMT+0530 (India Standard Time)

Any help??
Thanks.

missing a ; at the end

On combine with other libs with gulp to deploy enviremoent:

TypeError: (intermediate value)(intermediate value)(...) is not a function

DateTimeInputDirective.$inject = ['dateTimeParserFactory']

http://stackoverflow.com/questions/20307462/js-cant-combine-lib-files