Datepicker shortens long form fields

[benlevydesign]

I have a strange issue...

You can see it live here. What would I do to resolve this issue as this datepicker is awesome!

Also how can I get it to show/open to an echoed date(pulled from a db) when the datepicker is open.

Thanks.

[wwilsman]

Hey @benlevywebdesign, sorry it took me a bit to respond, for some reason I'm not getting notifications for issues on this repo.

The datepicker is inline-block by default, to fix this in your use-case, you can add the following CSS:

.datepicker { 
  display: block;
}

You could also do width: 100% instead of display: block, but either will fix the field on the form you've linked.

As to getting it to show/open to the echoed date, I'm assuming you're echoing the date into the value of the input via PHP or some other backend language? There should be support for initializing the datepicker with a value already defined. If you're finding this isn't the case, could you provide a sample output from the echo? It could be a date formatting issue.

[benlevydesign]

@wwilsman Changing the css worked!

Here you can check out the birthday input and I may not be initializing the datepicker with a value already defined.

Also I'm not sure why I didn't catch this error I get from the js when echoing the value into the input. It shows the datepicker on the birthday input and should show it on the rest of the inputs asking for a date but I'm thinking the error is whats causing it not to show.

Here is the error:

Uncaught TypeError: e.toLocaleDateString is not a function
    at e.serialize (datepicker.js:1)
    at Array.map (<anonymous>)
    at e.value (datepicker.js:1)
    at new e (datepicker.js:1)
    at datepicker.js:1
    at Array.map (<anonymous>)
    at new e (datepicker.js:1)
    at staffedit_test.php?id=5:370

Side Note: I'm guessing a mini version of dropkick is something that could be possibly used on the select elements for the month and year picking? Is this even a thought because this would round out your already awesome looking datepicker nicely. :)

[benlevydesign]

Also reading into more about data:image/svg+xml;... for the arrow "icons", it looks like its not working in ie11 and google suggested adding charset=utf8 or charset=utf-8 but that did nothing. 4-5/10 of my users might open the page in ie and I might just have to make pngs or something to solve the issue.