DateInput with MomentUtils has problematic behavior when used in Filters

[zifnab87]

Hi! When DateInput is used in a Filter it sends a complicated Moment object in the backend api

    <Filter {...props}>
        <TextInput label="Search" source="q" alwaysOn />
        <TextInput source="alias" />
        <DateInput source="startDate" options={{ format: 'DD/MM/YYYY' }} providerOptions={{ utils: MomentUtils }} />
    </Filter>
);

export const TaskList = (props) => (
    <List {...props} filters={<TaskFilter />}>
        <Datagrid>
            <TextField source="id" />
            <TextField source="alias" />
            <DateField source="startDate" locales="el-GR" />
            <DateField source="endDate" />
            <EditButton />
        </Datagrid>
    </List>
);

browser url:

http://localhost:3000/#/tasks?filter=%7B%22startDate%22%3A%7B%22_isAMomentObject%22%3Atrue%2C%22_isUTC%22%3Afalse%2C%22_pf%22%3A%7B%22empty%22%3Afalse%2C%22overflow%22%3A-2%2C%22charsLeftOver%22%3A0%2C%22nullInput%22%3Afalse%2C%22invalidFormat%22%3Afalse%2C%22userInvalidated%22%3Afalse%2C%22iso%22%3Afalse%2C%22rfc2822%22%3Afalse%2C%22weekdayMismatch%22%3Afalse%7D%2C%22_locale%22%3A%7B%22_calendar%22%3A%7B%22sameDay%22%3A%22%5BToday%20at%5D%20LT%22%2C%22nextDay%22%3A%22%5BTomorrow%20at%5D%20LT%22%2C%22nextWeek%22%3A%22dddd%20%5Bat%5D%20LT%22%2C%22lastDay%22%3A%22%5BYesterday%20at%5D%20LT%22%2C%22lastWeek%22%3A%22%5BLast%5D%20dddd%20%5Bat%5D%20LT%22%2C%22sameElse%22%3A%22L%22%7D%2C%22_longDateFormat%22%3A%7B%22LTS%22%3A%22h%3Amm%3Ass%20A%22%2C%22LT%22%3A%22h%3Amm%20A%22%2C%22L%22%3A%22MM%2FDD%2FYYYY%22%2C%22LL%22%3A%22MMMM%20D%2C%20YYYY%22%2C%22LLL%22%3A%22MMMM%20D%2C%20YYYY%20h%3Amm%20A%22%2C%22LLLL%22%3A%22dddd%2C%20MMMM%20D%2C%20YYYY%20h%3Amm%20A%22%7D%2C%22_invalidDate%22%3A%22Invalid%20date%22%2C%22_relativeTime%22%3A%7B%22future%22%3A%22in%20%25s%22%2C%22past%22%3A%22%25s%20ago%22%2C%22s%22%3A%22a%20few%20seconds%22%2C%22ss%22%3A%22%25d%20seconds%22%2C%22m%22%3A%22a%20minute%22%2C%22mm%22%3A%22%25d%20minutes%22%2C%22h%22%3A%22an%20hour%22%2C%22hh%22%3A%22%25d%20hours%22%2C%22d%22%3A%22a%20day%22%2C%22dd%22%3A%22%25d%20days%22%2C%22M%22%3A%22a%20month%22%2C%22MM%22%3A%22%25d%20months%22%2C%22y%22%3A%22a%20year%22%2C%22yy%22%3A%22%25d%20years%22%7D%2C%22_months%22%3A%5B%22January%22%2C%22February%22%2C%22March%22%2C%22April%22%2C%22May%22%2C%22June%22%2C%22July%22%2C%22August%22%2C%22September%22%2C%22October%22%2C%22November%22%2C%22December%22%5D%2C%22_monthsShort%22%3A%5B%22Jan%22%2C%22Feb%22%2C%22Mar%22%2C%22Apr%22%2C%22May%22%2C%22Jun%22%2C%22Jul%22%2C%22Aug%22%2C%22Sep%22%2C%22Oct%22%2C%22Nov%22%2C%22Dec%22%5D%2C%22_week%22%3A%7B%22dow%22%3A0%2C%22doy%22%3A6%7D%2C%22_weekdays%22%3A%5B%22Sunday%22%2C%22Monday%22%2C%22Tuesday%22%2C%22Wednesday%22%2C%22Thursday%22%2C%22Friday%22%2C%22Saturday%22%5D%2C%22_weekdaysMin%22%3A%5B%22Su%22%2C%22Mo%22%2C%22Tu%22%2C%22We%22%2C%22Th%22%2C%22Fr%22%2C%22Sa%22%5D%2C%22_weekdaysShort%22%3A%5B%22Sun%22%2C%22Mon%22%2C%22Tue%22%2C%22Wed%22%2C%22Thu%22%2C%22Fri%22%2C%22Sat%22%5D%2C%22_abbr%22%3A%22en%22%2C%22_config%22%3A%7B%22calendar%22%3A%7B%22sameDay%22%3A%22%5BToday%20at%5D%20LT%22%2C%22nextDay%22%3A%22%5BTomorrow%20at%5D%20LT%22%2C%22nextWeek%22%3A%22dddd%20%5Bat%5D%20LT%22%2C%22lastDay%22%3A%22%5BYesterday%20at%5D%20LT%22%2C%22lastWeek%22%3A%22%5BLast%5D%20dddd%20%5Bat%5D%20LT%22%2C%22sameElse%22%3A%22L%22%7D%2C%22longDateFormat%22%3A%7B%22LTS%22%3A%22h%3Amm%3Ass%20A%22%2C%22LT%22%3A%22h%3Amm%20A%22%2C%22L%22%3A%22MM%2FDD%2FYYYY%22%2C%22LL%22%3A%22MMMM%20D%2C%20YYYY%22%2C%22LLL%22%3A%22MMMM%20D%2C%20YYYY%20h%3Amm%20A%22%2C%22LLLL%22%3A%22dddd%2C%20MMMM%20D%2C%20YYYY%20h%3Amm%20A%22%7D%2C%22invalidDate%22%3A%22Invalid%20date%22%2C%22relativeTime%22%3A%7B%22future%22%3A%22in%20%25s%22%2C%22past%22%3A%22%25s%20ago%22%2C%22s%22%3A%22a%20few%20seconds%22%2C%22ss%22%3A%22%25d%20seconds%22%2C%22m%22%3A%22a%20minute%22%2C%22mm%22%3A%22%25d%20minutes%22%2C%22h%22%3A%22an%20hour%22%2C%22hh%22%3A%22%25d%20hours%22%2C%22d%22%3A%22a%20day%22%2C%22dd%22%3A%22%25d%20days%22%2C%22M%22%3A%22a%20month%22%2C%22MM%22%3A%22%25d%20months%22%2C%22y%22%3A%22a%20year%22%2C%22yy%22%3A%22%25d%20years%22%7D%2C%22months%22%3A%5B%22January%22%2C%22February%22%2C%22March%22%2C%22April%22%2C%22May%22%2C%22June%22%2C%22July%22%2C%22August%22%2C%22September%22%2C%22October%22%2C%22November%22%2C%22December%22%5D%2C%22monthsShort%22%3A%5B%22Jan%22%2C%22Feb%22%2C%22Mar%22%2C%22Apr%22%2C%22May%22%2C%22Jun%22%2C%22Jul%22%2C%22Aug%22%2C%22Sep%22%2C%22Oct%22%2C%22Nov%22%2C%22Dec%22%5D%2C%22week%22%3A%7B%22dow%22%3A0%2C%22doy%22%3A6%7D%2C%22weekdays%22%3A%5B%22Sunday%22%2C%22Monday%22%2C%22Tuesday%22%2C%22Wednesday%22%2C%22Thursday%22%2C%22Friday%22%2C%22Saturday%22%5D%2C%22weekdaysMin%22%3A%5B%22Su%22%2C%22Mo%22%2C%22Tu%22%2C%22We%22%2C%22Th%22%2C%22Fr%22%2C%22Sa%22%5D%2C%22weekdaysShort%22%3A%5B%22Sun%22%2C%22Mon%22%2C%22Tue%22%2C%22Wed%22%2C%22Thu%22%2C%22Fri%22%2C%22Sat%22%5D%2C%22abbr%22%3A%22en%22%7D%7D%2C%22_d%22%3A%222018-09-12T21%3A00%3A00.000Z%22%2C%22_isValid%22%3Atrue%7D%7D&order=DESC&page=1&perPage=10&sort=id

url decoded:

http://localhost:3000/#/tasks?filter={"startDate":{"_isAMomentObject":true,"_isUTC":false,"_pf":{"empty":false,"overflow":-2,"charsLeftOver":0,"nullInput":false,"invalidFormat":false,"userInvalidated":false,"iso":false,"rfc2822":false,"weekdayMismatch":false},"_locale":{"_calendar":{"sameDay":"[Today at] LT","nextDay":"[Tomorrow at] LT","nextWeek":"dddd [at] LT","lastDay":"[Yesterday at] LT","lastWeek":"[Last] dddd [at] LT","sameElse":"L"},"_longDateFormat":{"LTS":"h:mm:ss A","LT":"h:mm A","L":"MM/DD/YYYY","LL":"MMMM D, YYYY","LLL":"MMMM D, YYYY h:mm A","LLLL":"dddd, MMMM D, YYYY h:mm A"},"_invalidDate":"Invalid date","_relativeTime":{"future":"in %s","past":"%s ago","s":"a few seconds","ss":"%d seconds","m":"a minute","mm":"%d minutes","h":"an hour","hh":"%d hours","d":"a day","dd":"%d days","M":"a month","MM":"%d months","y":"a year","yy":"%d years"},"_months":["January","February","March","April","May","June","July","August","September","October","November","December"],"_monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"_week":{"dow":0,"doy":6},"_weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"_weekdaysMin":["Su","Mo","Tu","We","Th","Fr","Sa"],"_weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"_abbr":"en","_config":{"calendar":{"sameDay":"[Today at] LT","nextDay":"[Tomorrow at] LT","nextWeek":"dddd [at] LT","lastDay":"[Yesterday at] LT","lastWeek":"[Last] dddd [at] LT","sameElse":"L"},"longDateFormat":{"LTS":"h:mm:ss A","LT":"h:mm A","L":"MM/DD/YYYY","LL":"MMMM D, YYYY","LLL":"MMMM D, YYYY h:mm A","LLLL":"dddd, MMMM D, YYYY h:mm A"},"invalidDate":"Invalid date","relativeTime":{"future":"in %s","past":"%s ago","s":"a few seconds","ss":"%d seconds","m":"a minute","mm":"%d minutes","h":"an hour","hh":"%d hours","d":"a day","dd":"%d days","M":"a month","MM":"%d months","y":"a year","yy":"%d years"},"months":["January","February","March","April","May","June","July","August","September","October","November","December"],"monthsShort":["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],"week":{"dow":0,"doy":6},"weekdays":["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],"weekdaysMin":["Su","Mo","Tu","We","Th","Fr","Sa"],"weekdaysShort":["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],"abbr":"en"}},"_d":"2018-09-12T21:00:00.000Z","_isValid":true}}&order=DESC&page=1&perPage=10&sort=id

it should have been just http://localhost:3000/#/tasks?filter={"startDate":"string in original parsed date format"}

[dlerman2]

Yep, I have the same problem.

[dlerman2]

I was able to fix this by using parse to convert the input back into a string:

<DateInput source="end" parse={v => v && v.toISOString()} providerOptions={{ utils: MomentUtils }} />

[ghost]

Hello, i have the same issue ! Any idea of a date to a fix ! ;)