flatpickr/master

by escapedcat

HTML

<script src="https://gitcdn.xyz/repo/chmln/flatpickr/master/dist/flatpickr.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/repo/chmln/flatpickr/master/dist/flatpickr.css">
<link rel="stylesheet" href="https://gitcdn.xyz/repo/picnicss/picnic/master/picnic.min.css">
<script src="https://rawgit.com/escapedcat/flatpickr/feature/autofocus-plugin/src/plugins/autofocusPlugin/autofocusPlugin.js"></script>
<article>
    <input type="text" class=date autofocus>
</article>

CSS

article {
  padding: 16px;
  width: 50%
}

JavaScript

const fp = flatpickr(".date", {
  dateFormat: 'Y-m-d',
  altInput: true, // 	Show the user a readable date (as per altFormat), but return something totally different to the server.
  altFormat: 'd.m.Y',
  allowInput: true,
  plugins: [
    new autofocusPlugin({}),
  ],
});