vielhuber/README.MD

## README.MD

      
    Raw
  

              README.MD
            
          
    installation

npm install flatpickr --save-dev
usage

import flatpickr from 'flatpickr';
import { fr } from 'flatpickr/dist/l10n/fr.js';
import { de } from 'flatpickr/dist/l10n/de.js';
flatpickr('input[type="date"]', {
  locale: fr,
  /* ... */
});
@import '../../node_modules/flatpickr/dist/flatpickr.css';

/* override colors */
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
    fill: red;
}
.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
	background: blue;
    border-color: blue;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n + 1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n + 1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n + 1)) {
    box-shadow: -10px 0 0 blue;
}
.flatpickr-day.week.selected {
    box-shadow: -5px 0 0 blue, 5px 0 0 blue;
}

  
## index.html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
    <title>flatpickr</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
    <script src="https://npmcdn.com/flatpickr/dist/l10n/de.js"></script>
    <script>
    document.addEventListener('DOMContentLoaded', function()
    {
        flatpickr('input[type="datetime-local"]', {
            enableTime: true,
            altInput: true,
            allowInput: false, // bugfix: https://github.com/flatpickr/flatpickr/issues/2568
            altFormat: 'd.m.Y H:i',
            dateFormat: 'Y-m-dTH:i:S',
            locale: 'de',
            position: 'auto center',
            time_24hr: true,
            /* bugfix: https://github.com/flatpickr/flatpickr/issues/2040 */
            onChange: function(selectedDates, dateStr, instance) {
                if (dateStr === '') {
                    instance.close();
                }
            },
          	/* this is needed for datetime instances */
            onReady: (selectedDates, dateStr, instance) => {
                $input.nextElementSibling.addEventListener('keyup', (e) => {
                    let val = e.currentTarget.value;
                    if (val === '') {
                        instance.close();
                    }
                });
            }
        });
        flatpickr('input[type="date"]', {
            enableTime: false,
            altInput: true,
            allowInput: true,
            altFormat: 'd.m.Y',
            dateFormat: 'Y-m-d',
            locale: 'de',
            position: 'auto center',
            /* bugfix: https://github.com/flatpickr/flatpickr/issues/2040 */
            onChange: function(selectedDates, dateStr, instance) {
                if (dateStr === '') {
                    instance.close();
                }
            }
        });
    });
    </script>
</head>
<body>

    <input
      type="datetime-local"
      value="2018-01-01T08:00:00"
    />

    <input
      type="datetime-local"
      value=""
    />

    <input
      type="date"
      value=""
    />

</body>
</html>
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1" />
	<title>flatpickr</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
	<script src="https://npmcdn.com/flatpickr/dist/flatpickr.min.js"></script>
	<script src="https://npmcdn.com/flatpickr/dist/l10n/de.js"></script>
	<script>
	document.addEventListener('DOMContentLoaded', function()
	{
	flatpickr('input[type="datetime-local"]', {
	enableTime: true,
	altInput: true,
	allowInput: false, // bugfix: https://github.com/flatpickr/flatpickr/issues/2568
	altFormat: 'd.m.Y H:i',
	dateFormat: 'Y-m-dTH:i:S',
	locale: 'de',
	position: 'auto center',
	time_24hr: true,
	/* bugfix: https://github.com/flatpickr/flatpickr/issues/2040 */
	onChange: function(selectedDates, dateStr, instance) {
	if (dateStr === '') {
	instance.close();
	}
	},
	/* this is needed for datetime instances */
	onReady: (selectedDates, dateStr, instance) => {
	$input.nextElementSibling.addEventListener('keyup', (e) => {
	let val = e.currentTarget.value;
	if (val === '') {
	instance.close();
	}
	});
	}
	});
	flatpickr('input[type="date"]', {
	enableTime: false,
	altInput: true,
	allowInput: true,
	altFormat: 'd.m.Y',
	dateFormat: 'Y-m-d',
	locale: 'de',
	position: 'auto center',
	/* bugfix: https://github.com/flatpickr/flatpickr/issues/2040 */
	onChange: function(selectedDates, dateStr, instance) {
	if (dateStr === '') {
	instance.close();
	}
	}
	});
	});
	</script>
	</head>
	<body>

	<input
	type="datetime-local"
	value="2018-01-01T08:00:00"
	/>

	<input
	type="datetime-local"
	value=""
	/>

	<input
	type="date"
	value=""
	/>

	</body>
	</html>