chemerisuk / better-dateinput-polyfill Goto Github PK

View Code? Open in Web Editor NEW

259.0 259.0 58.0 1.13 MB

input[type=date] polyfill

Home Page: http://chemerisuk.github.io/better-dateinput-polyfill/

License: MIT License

JavaScript 81.72% HTML 7.28% CSS 11.00%

better-dateinput-polyfill's People

Contributors

Stargazers

Watchers

Forkers

guizmo lesserj badjer cybernetics ifa6 marcorivm luiz mikemaccana rjanot bertez william-c perturbatio brodanoel briefly valorbreak lc43 hakatashi nnyman shankie-codes gergderkson sergeykish sylvainpolletvillard pgundala thelarkinn jimmygkr greenyouse dydyf05 gavoja avokatech c0achmcguirk vlad15june edernegrete andrew-locklair parthivshah91 brettz9 malbertsc kasseltrankos chrisemoulton jap777 extend1994 juriejan drunkencub dominicfarrington abaranovskii afberg verbeeksteven bizfactorygmbh anbuck jaweesner liazapciroiu fstani programadorcero huantb1812 jeremyblalock tlepcctrg datsenkodmit iq-scm

better-dateinput-polyfill's Issues

Displayed date should default to browser locale settings.

Instead of using a procedure to manually format the date, it might be better to let the Date object's toLocaleDateString method decide how to display it. This will then show the format expected by the user, regardless of locale settings.

Example isn't working at all

Tried to update to the new version, but it doesn't trigger at all, just like the demo.

Disabling

Hey there

Thank you for the great polyfill.

I was wondering whether it is possible to disable some Dates (so they can't be picked) based on a List of Dates?
I haven't seen anything on that in the Spec of type="date" but maybe there is a way.

Thanks!
Alessandro

bug on "line-height" calculation

I found a bug on line-height calculation on line 62 :

https://github.com/chemerisuk/better-dateinput-polyfill/blob/master/dist/better-dateinput-polyfill.js#L62

Using some collapsable or hidden elements at start with Bootstrap (like basic collapsed panels or modal) it seems that the line-height calculation is returning a wrong 0 rather than the default Bootstrap value (aka34px).

Commenting line 62 did the trick for me :

//"line-height": offset.height + "px",

but I don't know why / if it has any side effects.

Stéphane

Update docs for version 2

document data-polyfill attribute
document relation to the better-time-element

Specify format for the displayed date

The goal for the task is to specify date format on element level. At present the standard doesn't have any attribute for that, therefore need to use something like data-format:

<input type="date" data-format="dd/MM/yyyy">
<!-- displays "20/01/2014" for instance -->

For localization we have to use <html lang={lang}> because JS in browser relies on browser language that can be different from web page language that driven by the lang attribute.

I was thinking about using capabilities of $Element#l10n:

displayedValue.l10n("{dd}/{MM}/{yyyy}", {dd: "20", MM: "1", yyyy: "2014"})

Possible params (from https://docs.oracle.com/javase/8/docs/api/java/text/SimpleDateFormat.html)

Letter	Date Component	Presentation	Examples
G	~~Era designator~~	~~Text~~	AD
y	Year	Year	1996; 96
Y	~~Week year~~	~~Year~~	~~2009; 09~~
M	Month in year (context sensitive)	Month	July; Jul; 07
L	~~Month in year (standalone form)~~	~~Month~~	~~July; Jul; 07~~
w	Week in year	Number	27
W	Week in month	Number	2
D	Day in year	Number	189
d	Day in month	Number	10
F	Day of week in month	Number	2
E	Day name in week	Text	Tuesday; Tue
u	Day number of week (1 = Monday, ..., 7 = Sunday)	Number	1

Number of letters in the param name specifies form of the output value, for instance:

"M" yields "1"
"MM" yields "01"
"MMM" yields "Jan" (should be result of toHTMLString)
"MMMM" yields "January" (should be result of toHTMLString)

Disable Native Option

Chrome is now using its native date picker. Is there a way to force the polyfill version ? ( I realise that isn't much of a polyfill, but I / my client only wants the native for mobile devices )

May is missing from compact months

May is not included in the compact months in any of the i18n localizations.
https://github.com/chemerisuk/better-dateinput-polyfill/blob/master/i18n/better-dateinput-polyfill.de.js#L28
https://github.com/chemerisuk/better-dateinput-polyfill/blob/master/i18n/better-dateinput-polyfill.fr.js#L28
https://github.com/chemerisuk/better-dateinput-polyfill/blob/master/i18n/better-dateinput-polyfill.ru.js#L28

NPM version?

Nice polyfill! Could you distribute this as a node module on NPM for use with Webpack and Browserify?

Picker not showing on dynamically created input

I create a form dynamically using javascript and I use bootstrap.

input[type=date] is not showing a picker (tested in Firefox and Internet Explorer 11).

use native chrome

Since the repo name says "polyfill" it should only be used if no native support is given.

Chrome has native support for type="date"

Error running contrin documentation

Hi!
I run:
npm install -g gulp
and then
npm start

And I get:

0 info it worked if it ends with ok
1 verbose cli [ 'd:\Program Files\nodejs\node.exe',
1 verbose cli 'd:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info prestart [email protected]
6 info start [email protected]
7 verbose unsafe-perm in lifecycle true
8 info [email protected] Failed to exec start script
9 verbose stack Error: [email protected] start: gulp dev $npm_package_config_gulp
9 verbose stack Exit status 1
9 verbose stack at EventEmitter. (d:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:213:16)
9 verbose stack at EventEmitter.emit (events.js:110:17)
9 verbose stack at ChildProcess. (d:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:14:12)
9 verbose stack at ChildProcess.emit (events.js:110:17)
9 verbose stack at maybeClose (child_process.js:1008:16)
9 verbose stack at Process.ChildProcess._handle.onexit (child_process.js:1080:5)
10 verbose pkgid [email protected]
11 verbose cwd D:\git\clients\better-dateinput-polyfill
12 error Windows_NT 6.1.7601
13 error argv "d:\Program Files\nodejs\node.exe" "d:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "start"
14 error node v0.12.1
15 error npm v2.5.1
16 error code ELIFECYCLE
17 error [email protected] start: gulp dev $npm_package_config_gulp
17 error Exit status 1
18 error Failed at the [email protected] start script 'gulp dev $npm_package_config_gulp'.
18 error This is most likely a problem with the better-dateinput-polyfill package,
18 error not with npm itself.
18 error Tell the author that this fails on your system:
18 error gulp dev $npm_package_config_gulp
18 error You can get their info via:
18 error npm owner ls better-dateinput-polyfill
18 error There is likely additional logging output above.
19 verbose exit [ 1, true ]

Timezone confusion

Issue #9 implies that there has been some confusion over time-zones. We're seeing the exact same issue, but because we're on BST (+01:00), we're not seeing great results.

Helpfully, we're only seeing this on Chromium versions between v46.0.2454.13 and 48.0.2536.0, wheras 48.0.2537.0 and v46.0.2454.13 fail.

For example, if we instantiate a element with max=2015-10-16; then when it comes to run #_changeValue, we call readDateRange. This returns an array with an end point of new Date('2015-10-16') -> Fri Oct 16 2015 00:00:00 GMT+0100 (BST), or 2015-10-15T23:00+00:00.

I've found that if I replace the calls to getUTCMonth/getUTCDate/getUTCFullYear in _formatValue to the non-utc equivalents, then that does mean that the widget does at least then render the correct date. However, I've not invested far enough to tell what other implications this would have.

Input field stripped of ::after pseudo-element

I am using the data-native="mobile" attribute to force desktop to use the polyfill calendar. I have style that places an icon on the ::after psuedo-element of my input field. Upon page load, the ::after pseudo-element and it's relating styles are absent.

Bower Install Failing from github ref

When I attempted to install using:

bower install better-dateinput-polyfill

I got the following error:

bower better-dateinput-polyfill#*          ECMDERR Failed to execute "git ls-remote --tags --heads git://github.com/chemerisuk/better-dateinput-polyfill.git", exit code of #128 fatal: unable to connect to github.com: github.com[0: 192.30.252.130]: errno=Connection refused

Attached below is a copy of the console error.

Dates are missing when fast switching

When you click fast on left or right arrows, bottom panel with dates may disappear and stay hidden until you reload whole page. I was able to replicate this issue on Internet Explorer 11 and Firefox 38.

Installation fails because of better-dateinput-polyfill 1.2.0

Installation using bower fails because better-dateinput-polyfill 1.2.0 is requested, but not available via bower. Only 1.0.0 and then 1.3.0 upwards are available.

Support for input[type=month]

Do you have any plans to support <input type="month">? I naively used this polyfill thinking it would support month fields, but it looks like it doesn't. I think you've done a great job otherwise, but I need to figure out whether we need to switch to a different polyfill with month support.

Minimiced version for bower install

Hi!
Could you (I don't know how its work) add the minimiced version for bower installation?
I mean, when I install the plugin from bower, I should download the min-version.

See you!

How to click to change year & month

Could not click on month or year to change on the calendar popup ?

"value" attribute not used

This can be seen in the demo (at least on my system, regardless of browser):
http://chemerisuk.github.io/better-dateinput-polyfill/

The value attribute is set to "2000-01-01", but the date showing is "Dec 31, 1999".

Don't start on current Chrome

Current Chrome supports input type=date since Chrome 20, but better-dateinput-polyfill will still launch and override the default behavior on Chrome 39 and newer.

http://caniuse.com/#feat=input-datetime

Maybe check

window.navigator.appVersion.match(/Chrome\/\d+/);

And avoid launching on Chrome versions past 20 (or whatever version we consider Chrome's date input to be good enough)

Placeholder doesn't work in Chrome

Hi!
"placeholder attribute works as expected in browsers that support it".
Do Chrome support it? Because, check it:
http://www.catalogovaqueria.com/registro
Look the input left to the "Imagen de Perfil (Seleccionar)".
The placeholder is working well in Firefox, but the native support of Chrome is browking the placeholder.
Could you do something for that?

Don't rely on default browser styles

I suggest that you don't rely on default browser styles because they may vary from browser to browser and many sites use their own global styles, CSS resets, frameworks etc and that breaks the calendar layout. Here's an example using Bootstrap:

I had a hard time trying to find what CSS was overwriting what in order to fix the layout but eventually I got it. Here's the CSS needed in order to play nice with Bootstrap:

.btr-dateinput-calendar-header > a {
  color: inherit;
}
.btr-dateinput-calendar-header > a:hover {
  text-decoration: none;
}

.btr-dateinput-calendar-days td,
.btr-dateinput-calendar-days th {
  padding: 1px;
  box-sizing: content-box;
  text-align: center;
}

Opinions? I can make a pull request if it sounds good.

Is there a way to set the defaultValue?

IE9 & lower not working

Just an FYI on the demo provided, IE9 is throwing a "Unable to get property 'split' of undefined or null reference" on File: better-dom.js, Line: 84, Column: 45. Nothing appears in the input field because of that.

IE8 is throwing a "Object doesn't support property or method 'addEventListener'" on File: better-dom.js, Line: 512, Column: 21, but does display the default date.

selecting a date chooses the previous day

A per live demo link,
select 20th and you get 19th

IE Placeholders disappearing

In IE (tested through browserstack) my placeholders are disappearing. Is that expected?

Trailing period on "MMM" months

The docs don't mention that there is a trailing "." on MMM values, but it's hard coded in main.js. It would be great if there were a way to omit this period.

NPM version?

Could you make a version for NPM for use with Webpack and Browserify?

Open picker in viewport

Seen in Safari 7.0.3:

Would be great to have the plugin detect the edges of the page to make sure the picker is fully onscreen when it opens.

Throw event at change

There is no event to hook on to when (new) date is set, this would be nice.

Error in better-dom when using better-dateinput-polyfill

I'm using the version of both of these apps from github as of the date of the posting of this issue.

In case "["; on line 244 of better-dom an error occurs that says Uncaught TypeError: undefined is not a function (repeated 2 times). This happens upon page load.

Any idea what this may be?

Values divergence when using with React.js

I'm having trouble making the better-dateinput-polyfill work with Facebook's React library. The control doesn't update the input's value for some reason. Also, the programmatic changes to the DOM element's "value" attribute aren't reflected in the date picker widget.

You can see yourself here

Any ideas how to deal with it?

The non-minified source code is here.

Missing documentation to contrib

Please, add documentation about how to contrib to the proyect.
I need to know what I need to run to build the code in the moment that I'm doing changes.
Are you using "grunt", "karma"? something?

My idea is run the command that I need to keep running (watching) and start edit files and that command should create the build after any change, so then I could refresh the index.html file and see the change.

Are you working on that way? Please, add documentation about it.

Fix feature detection for old WebKit engine

http://www.quirksmode.org/blog/archives/2015/03/better_modern_i.html

More reliable way to sync actual and visible values

It looks like triggering change event sometimes is not obvious. Need to investigate if it's possible to use mutation events/propertychange to achieve the same goal.

Related issues:
#34
#14

display:none instead of visible: hidden

Hi @chemerisuk !
I'm looking in you code that when you need to hide something, you are using visible: hidden insted of display: none.
Why did you do that?

The display: none is better to hide tags that "contain" a width and a height...
For example, if you have 3 divs next each other, if you visible: hidden the last 2 divs, the "father" div that contain the 3 blocks will continue having the height as if the 3 blocks are visible...

min and max support

ⓘ min = date NEW
The expected lower bound for the element’s value.
A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.
Example:
1996-12-19
ⓘ max = date NEW
The expected upper bound for the element’s value.
A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.
Example:
1996-12-19
http://www.w3.org/TR/html-markup/input.date.html

Text color stays transparent for hidden inputs

This is extremely specific, but:

If you have a input[type="date"] that is initially hidden and is only revealed after the polyfill has initialized, then the text color will remain transparent upon selecting a date.

Here's a demo of this:
https://jsfiddle.net/mahvfon2/2/

For the real world context: I have a page with tabs that the users can click to show/reveal different panes of content. The input[type="date"]s are within these panes, causing the situation demoed above.

I was able to fix this by listening for the "change" event on these inputs and then changing the color.

(Wonderful polyfill, by the way!)

Make year easier to change

Currently when trying to navigate between years, it's necessary to cycle trough each month until you reach the desired year. This gets pretty tedious.

There should be an easier way to change the current year.

Doesn't help in JavaFX WebView

Hi!

Thanks for a nice library!

I found a minor problem. It seems to be that it does not work for JavaFX's WebView. JavaFX lacks native date-picker, but better-dateinput-polyfill does nothing about it.

Under Java 8 the date input field cannot be edited at all (JavaFX's bug, the dropdown box doesn't open) and under Java 7 a simple text field is displayed. (JavaFX has own versioning, it can that it does not depend directly on the Java version).

Maybe you can do something about it.

Support type=datetime and type=time, too

First let me say a greaaat thank you! You've done a fantastic job!
It's a shame, Firefox still does not support native date and time pickers on desktop yet.

It would be great, if you could support datetime and time as well, because the situation is not better there.

Calendar panel vanishes when changing month quickly

There basically seems to be a race condition in the post-transition handler in

better-dateinput-polyfill/src/main.js

Line 133 in 08b15d5

currenDays.hide(() => { currenDays.remove() });

. So, because the code ends up re-using the same two chunks of dom, swapping them each time you switch month, it's possible to end up with an event sequence roughly like:

Hide calenderDays[0] (with remove on finish)
Hide calenderDays[1] (with remove on finish)
(transitions occur)
Remove calenderDays[0]
Remove calenderDays[1]

Selecting year

Hi,
Thanks for this great polyfill.

So I am using this to let my users pick their dob. Its really hard to navigate to a particular year (eg 1988). The only way you could do that right now is by going through all the months and years.

You also can't just type it out on safari desktop (like chrome).
Would appreciate any help.

Can't select a prev year

Hi.
Look, If I need to select "21-01-1990", I should press the " < " button by 5 years.
Could you add something to change quickly the year (and the month)?

Doesn't fully honor "maxdate" attribute

Despite setting "maxdate" attribute, you're still able to select (future) dates beyond the max date set

Ability to type in values

Since we can't easily change year - the native browser for chrome lets you type in a value (ie. for a birthdate).

Is it possible with the polyfill to allow someone to type in the value ? I tried on Safari desktop and it didn't allow this.

Move date formatting logic into a separate project

https://github.com/chemerisuk/better-time-element

Data Format not applying in AngularJS

I have the following:

<input id="dateStart" type="date" data-format="MM/dd/yyyy" value="2015-01-01" ng-model="..." />

I've also tried setting the value attribute in the JavaScript code using

// $scope.dateQuery.startInput looks like YYYY-MM-dd format
document.getElementById('dateStart').setAttribute('value',$scope.dateQuery.startInput);

At any rate, the formatting is not being applied and was curious if this has been noticed. Anything specific that I can provide? I was thinking about wrapping this datepicker in an Angular directive, but wanted to hold off if I'm doing something obviously wrong.

Thanks!