diff --git a/src/components/BirthdayInput/BirthdayInput.example.js b/src/components/BirthdayInput/BirthdayInput.example.js index 90ad8f56..0b9a0d17 100644 --- a/src/components/BirthdayInput/BirthdayInput.example.js +++ b/src/components/BirthdayInput/BirthdayInput.example.js @@ -33,8 +33,8 @@ const Form = reduxForm({ export const Empty = { component: Form, props: { - onChange: values => { - console.log('birthday changed to:', values.birthday); + onChange: ({ birthday }) => { + console.log('birthday changed to:', birthday ? birthday.toUTCString() : birthday); }, }, }; diff --git a/src/components/BirthdayInput/BirthdayInput.js b/src/components/BirthdayInput/BirthdayInput.js index 90c370a7..3f26e2ef 100644 --- a/src/components/BirthdayInput/BirthdayInput.js +++ b/src/components/BirthdayInput/BirthdayInput.js @@ -29,15 +29,18 @@ const parseNum = str => { // Validate that the given date has the same info as the selected // value, i.e. it has not e.g. rolled over to the next month if the // selected month doesn't have as many days as selected. +// +// Note the UTC handling, we want to deal with UTC date info even +// though the date object itself is in the user's local timezone. const isValidDate = (date, year, month, day) => { - const yearsMatch = date.getFullYear() === year; - const monthsMatch = date.getMonth() + 1 === month; - const daysMatch = date.getDate() === day; + const yearsMatch = date.getUTCFullYear() === year; + const monthsMatch = date.getUTCMonth() + 1 === month; + const daysMatch = date.getUTCDate() === day; return yearsMatch && monthsMatch && daysMatch; }; -// Create a Date from the selected values. Return null if the date is -// invalid. +// Create a UTC Date from the selected values. Return null if the date +// is invalid. const dateFromSelected = ({ day, month, year }) => { const dayNum = parseNum(day); const monthNum = parseNum(month); @@ -49,10 +52,12 @@ const dateFromSelected = ({ day, month, year }) => { return null; }; +// Get the UTC year/month/day info from the date object in local +// timezone. const selectedFromDate = date => ({ - day: date.getDate(), - month: date.getMonth() + 1, - year: date.getFullYear(), + day: date.getUTCDate(), + month: date.getUTCMonth() + 1, + year: date.getUTCFullYear(), }); // Always show 31 days per month