From 70d78427b19f58e3ef76729bb6ad722407d5edde Mon Sep 17 00:00:00 2001 From: Thomas Ruoff Date: Tue, 18 Aug 2020 00:21:39 +0200 Subject: [PATCH] date format --- components/dateSelect.js | 50 +++++++++++++++++++++++++--------------- helpers/date.js | 32 +++++++++++++++++++++---- pages/_app.js | 3 --- styles/index.css | 25 +++++++++++++++++--- 4 files changed, 82 insertions(+), 28 deletions(-) diff --git a/components/dateSelect.js b/components/dateSelect.js index c2edae0..94ebd34 100644 --- a/components/dateSelect.js +++ b/components/dateSelect.js @@ -7,15 +7,21 @@ import { DateUtils } from 'react-day-picker' import DayPickerInput from 'react-day-picker/DayPickerInput' import Required from './required' -import { dateFormat } from '../helpers/date' +import { dateFormatBackend } from '../helpers/date' import { getNextSmaller, getNextBigger } from '../helpers/array' +import MomentLocaleUtils, { + formatDate, + parseDate, +} from 'react-day-picker/moment' +import 'moment/locale/de' + const fetcher = (path) => fetch(path).then((r) => r.json()) export default function DateSelect() { const { state, onChange } = useContext(WizardContext) const [range, setRange] = useState({ - form: state.startDate && new Date(state.StartDate), + form: state.startDate && new Date(state.startDate), to: state.endDate && new Date(state.endDate), }) const { from, to } = range @@ -23,14 +29,17 @@ export default function DateSelect() { '/api/daysbooked', fetcher ) - const prevBookedDay = getNextSmaller(daysBooked, dateFormat(from || to)) - const nextBookedDay = getNextBigger(daysBooked, dateFormat(from || to)) + const prevBookedDay = getNextSmaller( + daysBooked, + dateFormatBackend(from || to) + ) + const nextBookedDay = getNextBigger(daysBooked, dateFormatBackend(from || to)) const fromRef = useRef() const toRef = useRef() function dayBooked(day) { - return daysBooked && daysBooked.includes(dateFormat(day)) + return daysBooked && daysBooked.includes(dateFormatBackend(day)) } function dayDisabled(day) { @@ -38,14 +47,11 @@ export default function DateSelect() { DateUtils.isPastDay(day) || dayBooked(day) || (prevBookedDay && day < new Date(prevBookedDay)) || - (nextBookedDay && day > new Date(nextBookedDay)) + (nextBookedDay && day > new Date(nextBookedDay)) || + day < from ) } - function parseDate(value) { - return new Date(value) - } - useEffect(() => { toRef.current?.getInput().focus() }, [from]) @@ -78,29 +84,32 @@ export default function DateSelect() { setRange({ ...range, from })} /> - + {' - '} setRange({ ...range, to })} /> - diff --git a/helpers/date.js b/helpers/date.js index e62ccd9..57b467b 100644 --- a/helpers/date.js +++ b/helpers/date.js @@ -1,8 +1,11 @@ import moment from 'moment' +const FRONTEND_FORMAT = 'DD.MM.YYYY' +const BACKEND_FORMAT = 'YYYY-MM-DD' + export function getDays({ startDate, endDate }) { let currentDay = moment(startDate) - const days = [dateFormat(currentDay)] + const days = [dateFormatBackend(currentDay)] if (!endDate) { return days @@ -11,15 +14,36 @@ export function getDays({ startDate, endDate }) { const end = moment(endDate) while (currentDay < end) { currentDay = currentDay.add(1, 'day') - days.push(dateFormat(currentDay)) + days.push(dateFormatBackend(currentDay)) } return days } -export function dateFormat(date) { +function dateFormat(date, format) { if (!date) { return null } - return moment(date).format('YYYY-MM-DD') + return moment(date).format(format) +} + +export function dateFormatBackend(date) { + return dateFormat(date, BACKEND_FORMAT) +} + +export function dateFormatFrontend(date) { + return dateFormat(date, FRONTEND_FORMAT) +} + +function dateParse(string, format) { + const date = moment(string, 'MM-DD-YYYY') + if (date.isValid()) { + return date.getDate() + } + + return null +} + +export function dateParseFrontend(string) { + return dateParse(string, FRONTEND_FORMAT) } diff --git a/pages/_app.js b/pages/_app.js index 406e991..0678854 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -4,9 +4,6 @@ import '../styles/index.css' import 'react-day-picker/lib/style.css' -import 'moment' -import 'moment/locale/de' - export default function MyApp({ Component, pageProps }) { return } diff --git a/styles/index.css b/styles/index.css index e7e9826..5d2e2f6 100644 --- a/styles/index.css +++ b/styles/index.css @@ -25,7 +25,7 @@ } .input-text { - @apply appearance-none block bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight; + @apply appearance-none bg-gray-100 text-gray-700 border rounded py-2 px-3 mb-3 leading-tight w-full; } .input-text:disabled { @@ -40,6 +40,18 @@ @apply border-red-500; } +.ibtn { + @apply py-2 px-2 text-gray-400 w-10 h-10; +} + +.ibtn:hover { + @apply text-gray-500; +} + +.ibtn:active { + @apply text-gray-800; +} + .btn { @apply font-bold py-2 px-4 rounded mx-2; } @@ -64,11 +76,18 @@ @apply bg-gray-700; } -/*@screen md { +@screen sm { .fs { @apply w-1/2 mb-0; } -}*/ +} +.DayPickerInput .input-text { + @apply w-full; +} + +.DayPickerInput { + @apply w-1/3; +} .datepicker .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {