brianblakely/nodep-date-input-polyfill

Automatically adds datepickers to input[type=date] on IE, macOS Safari, and legacy browsers.

nodep-date-input-polyfill's Issues

Firefox 57+ Now Supports the Date Input

Only Safari and IE11 don't support it now.

React integration

Hello guys,
Is this polyfill working on react managed input elements? I get to see the picker but value update in the field never happens when you pick a date

When loaded as AMD module, it's triggered everywhere

Hi all,
I am working on a project based on requireJS and I'm trying to load NDIP only when a date input is present in page.
if(document.querySelector("input[type='date']")!==null) require(["libs/nodep-date-input-polyfill.dist"]);
The problem is: the polyfill is triggered whichever browser I use, duplicating the native behavior.
No problem if I hardcode the script in my page, prior the removal of ('function'==typeof define&&define.amd?define(b): which would trigger a requirejs error). Firefox would show the native interface, IE11 would show the polyfill.
Can you reproduce this problem?

Change event is not bubbling when using modern Event constructor.

Change/input events should be bubbling. This is the case for the legacy way of creating events but not for the modern way which triggers on Safari.

Fixing this would allow fetching al changes on the form element which reduces the amount of change listeners and makes it more easy to implement auto submitting a form.

Importing fails webpack build

Hey Brian,

Thanks for putting your time into this polyfill. Unlike many of the options out there, this project is straightforward and easy to use.

When I was integrating it into my build, via webpack, I am getting a Reference error window is not defined error when bundling. This is contrary to the README that says I can use it with webpack 😢 .

Is it working for you?

Input is not updated after typing

When date is updated first by typing, and then by clicking in the picker it doesnt update anymore. The value attrib in tag input is updated correctly, its just not reflects visually for the user in the input.

Submit the value in RFC 3339 (yyyy-MM-dd) format

It's problematic for it to just submit it using the locale format (MM/dd/yyyy where I live) since that is too ambiguous for the server to reliably parse.

Furthermore, I believe the HTML spec requires it to be submitted in RFC 3339, and that's what modern browsers do.

I tried out https://github.com/chemerisuk/better-dateinput-polyfill, which even claims this as a feature

submitted value always has yyyy-MM-dd [RFC 3339] format

but unfortunately had to abandon that since it didn't work in IE11 (chemerisuk/better-dateinput-polyfill#106).

Wrong date when clicking date

When I click on a day the input field gets set with the clicked day -1, i.e. click 29, but 28 is entered. Same when clicking the 'Today' button.

When using up and down arrows it does get the correct date.

Does this support min and max attributes?

I'm looking to migrate a codebase (well, a few dozen) away from a mix of Pikaday and jQuery UI onto native datepicker elements. One of our main reasons for using a datepicker is to select a date within approximately two weeks from the current date.

In Chrome with the native picker, setting a min and max causes the picker to only allow selection between those dates.

In IE11 with this polyfill, the min and max attributes and properties are seemingly ignored, giving the user free reign to select any date they'd like.

Am I missing something or does this polyfill not support these attributes yet?

WCAG 2.0 accessibility issue. "Label text is empty"

The date-input-polyfill adds two select inputs 'yearSelect' and 'monthSelect' without labels. This triggers an "Label text is empty" error in a WCAG 2.0 accessibility tester.

I was able to fix this by adding - aria-hidden='true' - to the date-input-polyfill element. This hides the date picker from screen readers.

Conflicts with form validation in IE 11

<script src="nodep-date-input-polyfill.dist.js"></script>
<form>
  <input type=date required id=x>
  <button type=button
    onclick="alert(document.getElementById('x').checkValidity())">Submit</button>
</form>

In IE 11, when I pick a date using the polyfill’s picker and click Submit, I get “false”.

If I type something manually into the input and click Submit, I get “true”.

In Firefox, I get “true”.

It seems like IE’s constraint validation doesn’t care if you set the value attribute, only if you set the value property, which the polyfill overrides.

readonly value don't work

code:

result: we can change the input !!!!

(bonus, i translated in french:
"fr":{days:["Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam"], months:["Janvier", "Fevrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Decembre"], today:"Aujourd'hui", format:"D/M/Y"} )

How to make it work in a simple form

When I first tried the demo and played around with this polyfill in my own form, my impression was "it doesn't work at all" and was about to look for another datepicker. The problems were:

• When submitting the form, the date value was in the wrong format (localized instead of yyyy-mm-dd)
• when trying to change the date in the input field manually, the displayed date value is not updated by the picker any more
• When trying the demo in a browser with a native date picker (Chrome) both pickers interfere badly

But after looking through previous tickets and the source code, I found that this is mainly a documentation problem. Such problems a new user stumbles upon when trying the demo should be mentioned in the README.

So, for the records, here is what I needed to do to make it work as expected:

• In order to not create the polyfilled datepicker in browsers that support date inputs natively, remove the data-nodep-date-input-polyfill-debug attribute from the script tag in the demo HTML page.

• In order to prevent manual typing in the input field, and submit the date in the standard format when submitting the form via the classic submit button, add the following Javascript somewhere in the end of your page:

var dateinputs = document.querySelectorAll('input[type="date"]');
for (var i=0; i<dateinputs.length; i++) {
     var el = dateinputs[i];
     el.addEventListener('keydown', function(e) {
         if (el.hasAttribute('data-has-picker')) e.preventDefault();
     });
     if (el.form) {
         el.form.addEventListener('submit', function(e) {
              if (el.hasAttribute('data-has-picker')) el.setAttribute('value', el.value);
         });
     }
}

locale en-GB doesn't work

getLocaleText() changes the locale to lower case which means that it won't match a key on the locales object.

Then, because 'en_en-US' appears before 'en-GB' in the keys, and the match checks against the first two characters, en_en-US is always returned if looking for 'en-GB'

Safari doesn't submit correct values

In a form with a GET request, I am seeing the value 09/19/2016 instead of 2016-09-19

Firefox doesn't submit correct value

Similar to #21, on Firefox 49.0.2, the value 09/19/2016 is submitted instead of 2016-09-19. I'm not sure if I got what you meant by the browser submitting the input text instead of the underlying value, but if I inspect the element on Firefox, the underlying value is on the format 09/19/2016 as well (differently than on Chrome without the polyfill, where it's the expected 2016-09-19).

You can see where it's breaking by going on https://fda.opentrials.net with Firefox and adding the start date/end date filters.

Chrome Native Date Picker Conflict

When I test this in Chrome 55+, the native date picker overlaps with this script's version (depending on where I click in the input box), and only the native picker will let me choose a date.

Is this expected behavior? If so, do I need to detect the user's browser and only load this library if the browser is IE, Firefox, or Safari?

Updated value not displaying in IE11

My users have reported that when they update an field in IE11 that the updated value isn't displaying when leaving the field, the previous value is displayed instead. The code works in other browsers, particularly in Safari which doesn't support that input type natively.

I can see in my debugger that the value is being set when onChange is called and that when that part of the form is rerendered that the updated value is set on the value= field.

My app is a React app with redux and react-bootstrap but the generated html looks good. I'll attach a screenshot showing where I'd changed the value to 1974-11-13 but the value in the field is still showing the previous value 1974-11-08.

I wondered if perhaps there's a different polypill that's missing which is needed to make the code work. I'm using babel-polyfill to load them.

Run on dynamically added inputs before user clicks?

Currently, if a date field is added to the DOM with an existing value, the picker does not format the date until the user clicks on it. Since the picker requires the format of 'yyyy-MM-dd', the value jumps from that format to whatever the local version is (in my case it's MM/dd/yyyy). This is a bit confusing for users. Is there anyway to initialize the polyfill on elements before they're added to the DOM or immediately after?

I'm also using jQuery if that matters.

Picker shows wrong month calendar.

Steps to reproduce:

1. Wait until the 31st of a month (eg. today) whose successor has less than 31 days.
2. Open the demo link: https://brianblakely.github.io/nodep-date-input-polyfill/
3. Click on the first field.
4. Select the next month.
   The month selector will show the next month, but the picker will show a calendar for the month after that.

This is caused by the following code in picker.js:
this.month.addEventListener(change, ()=> { this.date.setMonth(this.month.value); this.refreshDaysMatrix(); });
setMonth will update the month, but the next month has only 30 days. The Date object will now represent the first of the month after the next month.
An easy fix is:
this.month.addEventListener(change, ()=> { this.date.setMonth(this.month.value, 1); this.refreshDaysMatrix(); });
This makes sure that setMonth sets the Date object to the first of the next month. See also https://stackoverflow.com/questions/14680396/the-date-getmonth-method-has-bug
Apparently the problem does not happen in Chrome. It does happen in Safari.

Initialization skipped if script loaded dynamically

The initialization of this script assumes the document.DomContentLoaded or window.load events will fire after it has been loaded, never before. I think this is supposed to be true if this is included as a <script> element in the HTML (barring old browsers), but it does not work if this script is dynamically added, such as with WebPack chunks, AMD or other loader mechanisms. This is useful if you want to only include the polyfill where you actually have date input types.

The fix is very basic, just first check if the document is already loaded and either initialize right away or add the event listeners.

Days are one day off if reselect date

Hi,

I think I experience similar issues as #6 and #13.

The concrete problem is that the Picker results in a wrong date, for me -2h off the date selected (so displayed as one day off). I think it's a time zone issue, as I'm UTC+1, currently with DST, so that matches perfectly (UTC+1 w/ DST is +1h so UTC is -2h).

I did some "debugging" (added some console.logs) and discovered your Picker.absoluteDate is called w/ valueAsDate when you open it (clicking into a polyfilled date input).

So the problem seems to be that the valueAsDate is already UTC (was stored as UTC previously) and absoluteDate makes it UTC-x (UTC-2 for me).

Steps to reproduce (at least for FF 45.2.0 (ESR)):

1. Have a polyfilled, empty <input type="date">
2. Click into it (this calls Picker.absoulteDate twice with null)
3. select any date, i.e. Aug 8 2016
4. Exit ´<input>´ by clicking somewhere else (but stay on the page ;D)
5. Re-Enter (this calls Picker.absoluteDate twice with the selected date, i.e. Aug 8 2016 and returns Aug 7 2016 22:00h!)
6. Select any date, i.e. again Aug 8 2016
7. Be impressed input value now is Aug 7 2016!

For me it seems to work if I disable Picker.absoluteDate (so it returns the date w/o touching it), but I think you had your thoughts about the function.

tl;dr
Reselecting a date results in a date "one day off", because it UTC-fies already UTC-fied valueAsDate w/ Picker.absoulteDate.

Thank you.

Link to demo page

• Update README
• Merge into gh-pages
• Fix for NPM formatting

z-index of "date-input-polyfill"

Hi @brianblakely,

First of all, thank you, this is quite useful.

It has a problem that it could be covered by other controls. like this:

If change the z-index to 10000, it works fine. What do you think about this issue?
(Environment: IE11)

Thanks,
Joey

Option to avoid inline <style>

Hi,

It doesn't appear to be possible to avoid the inline <style> append.

I'd like to move all styling into my own Sass build. Can the built-in one be turned off?

Thanks

date input, when posted as part of form content, has invalid date format (expecting ISO yyyy-MM-dd)

When I use this on IE 11, I'm seeing that the form post data is different to other browsers that have a native support for the HTML 5 date input type - they post the date value as yyyy-MM-dd while this polyfill posts the value as MM/dd/YYYY. Is there some way to control this?

Thanks

e.g - element in IE 11

<input name="PolicyStartDate" class="text-box single-line" id="PolicyStartDate" type="date" value="05/18/2017" data-has-picker="">

Under Chrome/Opera/Edge:

<input name="PolicyStartDate" class="text-box single-line" id="PolicyStartDate" type="date" value="2017-05-18" data-has-picker="">

Throws when included in the head of the document

Cannot read property 'appendChild' of null

If it's a requirement that the user puts this at the bottom of the body, or if users should wait for DOMContentLoaded, it should probably at least be documented.

Nice work, btw. Nice to have a minimal polyfill for this.

Value is not set if date is typed in manually

In Firefox, if I type in the date manually instead of using the picker, the <input> value is not updated regardless of whether or not the typed-in date is in valid yyyy-MM-dd format.

german date format

I need german date formats like dd.mm.YYYY - how could I change your code to this date-format?

Validate input

Do not allow submission of form with invalid date typed in.

Date does not appear if you have previously deleted it manually

Hi! I have noticed that if you manually delete the date in the input (when all the text inside the input is deleted), after that, even if you select a specific date in the calendar, the date does not appear in the input... Is it a normal behavior or is it a bug? Awesome scripts, thanks a lot !!

IE11 clear button breaks value imprint

When an input's native clear button is clicked, that field's value can no longer be set by JavaScript. That functionality must be disabled.

Snippet to do this (nest in SCSS):

::-ms-clear {
  display: none;
}

No date picker in Firefox and Safari

Hi, I cloned your project and built it. I ran the index.html file that is supplied and i do not get any date picker in Firefox or Safari. Am I missing something?

day is always 1 off

If a day is selected via picker, the inputs value is always 1 day before the selected day.

Otherwise awesome work!!

TypeError on focus

There's a javascript error on focus of the input field.

TypeError: undefined is not an object (evaluating 'c.thePicker.attachTo')

This error is present regardless of browser. It exists in your package's index file.

Feature: Displaying only the month

Hey,
I like this project so far. But I now need the possibility to add a picker where one can only choose between month and year.

Ability to unset the date

I'd like to be able to set a blank date, e.g

dateElement.value = null;

Looking at the spec at https://www.w3.org/TR/html5/forms.html#date-state-(type=date), it says "The value attribute, if specified and not empty, must have a value that is a valid date string", and "If the value of the element is not a valid date string, then set it to the empty string instead." So, I think adding the extra this.element.value = ``; above would fix that.

Code in input.js would be something like:

set: val=> {
   if(!/^\d{4}-\d{2}-\d{2}$/.test(val)) {
              this.element.polyfillValue = ``;
              this.element.value = ``;
              return;
            }

etc

Popup behind other elements

The date picker will fall behind another date field that is placed below.

date_field1
date_field2
...

The popup for field one will fall behind field2.

use browser languages preferences to set date value

Thank you for the library - great effort & very much appreciated.

I think the few browsers left which do not have a native date type input will be soon gone, so I am not sure how much longer this library will be maintained for. Nevertheless, I have made some changes in a fork which I am happy to put a pull request for if wanted. Heavily tested in IE 11 but NOT old versions of Safari.

The changes are:

1. update Rollup & Babel versions - I couldn't run a transpile and minify without this step on any of my machines.
2. use the browser prefered language and only use the lang attribute if the browser languages are not found (using let preferredLocales = window.navigator.languages || [ window.navigator.userLanguage || window.navigator.language ];). This more closely emulates most native date input behaviour.
3. add a placeholder according to the selected localeText.format e.g. dd/mm/yyyy. This more closely emulates most native date input behaviour.
4. add a few more cultures (en-AU, en-NZ, en-CA, fr-CA). Default en is en-CA as that is ISO 8601

UK Date Format

Saw that UK Date format is not yet supported.

Is there a way to change the date format from US to UK date format (dd-mm-yyyy).

How can i overidde the zindex of the popup date selector?

I would like to change the z-index of the popup date picker ..
when i do

the zindex for the picker remains the same

Italian localization

Brian, I am not able to create a pull request and I have just 2 minutes of time.
FYI, in Italy the week start with monday. I don't know if the control take care of this.
best regards, Sala

These are the data :
'it_it-IT': {
days: [
Dom,
Lun,
Mar,
Mer,
Gio,
Ven,
Sab
],
months: [
Gennaio,
Febbraio,
Marzo,
Aprile,
Maggio,
Giugno,
Luglio,
Agosto,
Settembre,
Ottobre,
Novembre,
Dicembre
],
today: Oggi,
format: D/M/Y
}

Use the fields value if it exist

I have an error when using the polyfill in Safari (probably other browsers as well but only looking in Safari). If the date input has a value on page load the polyfill ignores it.

In my situate someone comes to the form to edit the info and the currently saved info is there for them to edit. if they do not touch the date inputs and hit save then empty date fields are saved and the default date is blown away.

javascript error

Since the update to 4.0.1 I've been getting this error in the console:

TypeError: b.data(c).split is not a function. (In 'b.data(c).split(" ")', 'b.data(c).split' is undefined)

Happening in firefox 48.0 on mint and safari 9.1.2. Will check to make sure it's not the build process causing problems with the javascript, just wanted to check if others have come across a similar issue? The error causes the selected date to not display in the input element, but the correct value and format (yyyy-MM-dd) is being selected.

valueAsDate off by one

My previous off by one comment was wrong, but it appears that the .valueAsDate returns a date that is a single day earlier than the date entered into the input.

Add week start day to locale configurator

A bool to start on Sun or Mon

Unable to onboard a local build environment (npm dependencies outdated or broken)

Environment:

• Windows 10, version 1809, x64
• NodeJS 13.12.0
• npm 6.14.4

Steps taken:

1. git clone https://github.com/brianblakely/nodep-date-input-polyfill.git
2. cd nodep-date-input-polyfill
3. npm install
   1. This errors-out because rollup-plugin-sass: "^0.5.3" depends on a specific sub-release release of node-sass (4.5.3 - win32-x64-72_binding.node ) that has been removed from their Github releases listings (so then npm downloads the Dart/C/C++ source-code for sass and tries to build it by itelf and it fails with a megabyte-sized error log... joy).
   2. I've seen some people say this is because this old version of node-sass is incompatible with NodeJS higher than version 10.0 - but that doesn't explain the HTTP 404 error and the fact the binding.node file is absent from GitHub.
   3. I was able to workaround this by manually installing a more recent version of rollup-plugin-sass.
4. npm run build
   1. Fails because the more recent version of rollup-plugin-sass that I'm using doesn't support the rollup.config.js file included in the project. I get this error:

me@mine MINGW64 /c/git/clones/nodep-date-input-polyfill (master)
$ npm run build

> [email protected] build C:\git\clones\nodep-date-input-polyfill
> rollup -c

(!) Some options have been renamed
https://gist.github.com/Rich-Harris/d472c50732dab03efeb37472b08a3f32
entry is now input
format is now output.format
dest is now output.file

nodep-date-input-polyfill.js → nodep-date-input-polyfill.dist.js...
[!] Error: You must specify options.format, which can be one of 'amd', 'cjs', 'es', 'iife' or 'umd'
https://rollupjs.org/#format-f-output-format-
Error: You must specify options.format, which can be one of 'amd', 'cjs', 'es', 'iife' or 'umd'
    at error (C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\dist\rollup.js:170:15)
    at checkOutputOptions (C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\dist\rollup.js:18792:9)
    at generate (C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\dist\rollup.js:18848:17)
    at Object.write (C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\dist\rollup.js:18880:28)
    at C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\bin\rollup:20989:27
    at next (C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\bin\rollup:20946:32)
    at C:\git\clones\nodep-date-input-polyfill\node_modules\rollup\bin\rollup:20949:53

At this point I just gave up and I'll use a different <input type="date" /> polyfill. Sorry.

Update:

I found that I'm able to successfully npm install and npm run build this fork: https://github.com/mcshaz/nodep-date-input-polyfill

Date value not change on Angular

Hi, I have installed nodep-date-input-polyfill on an angular app and works well but the date is not updated (from 2017-08-08 to 2017-08-28) I see that the input have a correctly updated value but on the browser is wrong:

How I can solve this?

Thanks and best regards

I use Angular version 1.3.8