Is there a way to incorporate moment-timezone with this? Particularly being able to set the default timezone?

There are no published core packages above 1.2.0 on NPM

It looks like luxon utils does not support an instance being passed into the constructor like dayjs and moment. I am trying to force everything to be UTC and using libInstance on MuiPickersUtilsProvider is how it is done for dayjs and moment and it is not working for luxon.

I would use Dayjs except typing in the time does not work. Date-fns does not have UTC always support and now Luxon doesn't work either. I was trying not to use moment because it is a monolith but it looks like that is my only option.

Hi,

I want to localize dayjs as it's lib I use in project. I tried:
<MuiPickersUtilsProvider utils={DayJsUtils} locale={'de'}>
but no lack.

I tried also (similar to moment example):

import { MuiPickersUtilsProvider } from 'material-ui-pickers'
import dayjs from 'dayjs'
import 'dayjs/locale/de'
import DayJsUtils from '@date-io/dayjs'

dayjs.locale('de')

in this case date picker is still not localized (week days, month names).

Any hint how should I do it?

Thanks in advice!

Hello!

Nice refactor! I'm encountering the following error after updating.

ERROR in /<truncated>/node_modules/@date-io/moment/build/moment-utils.d.ts(2,24):
TS2307: Cannot find module '@date-io/core/IUtils'.
ERROR in /<truncated>/node_modules/material-ui-pickers/_shared/BasePicker.d.ts(1,24):
TS2307: Cannot find module '@date-io/core/IUtils'.
ERROR in /<truncated>/node_modules/material-ui-pickers/_shared/WithUtils.d.ts(1,24):
TS2307: Cannot find module '@date-io/core/IUtils'.

I was able to workaround the issue by manually installing the core package but I was wondering if perhaps it should be included as a dependency of the moment/date-fns/etc. packages instead?

This is where the problem is (which goes away after installing core):
https://github.com/dmtrKovalenko/date-io/blob/master/packages/moment/src/moment-utils.ts#L2

I'm unable to install @date-io to provide utils to material-ui-pickers now that they've been moved. Are you planning to add it to yarn or npm? Is there a workaround in the meantime?

Thank you very much for your time.

#96 introduced typescript as a dependency of date-fns without actually using it at runtime. It should be removed.

var MomentUtils = require("@date-io/moment");

const moment = new MomentUtils({'locale': 'ru'});
console.log(moment.getWeekdays());

Expected:

["пн", "вт", "ср", "чт", "пт", "сб", "вс"]

Actual:

["вс", "пн", "вт", "ср", "чт", "пт", "сб"]

https://runkit.com/embed/k6vhvc5yc9df

On NPM install I`am getting following error:
npm ERR! code E404
npm ERR! 404 Not Found: @date-io/moment@latest

Any changes here? How I can install moment or any other utils?

Regards
Max

From mui/material-ui-pickers#1074 (comment)

I'll work on a PR, I'm going to try a couple of things, but worst case is we need to not publish the type dir in the package as it does not satisfy the compiler.

I am using <MuiPickersUtilsProvider libInstance={moment.utc} utils={MomentUtils}> to always display/use dates and times in UTC. Settings this causes the calendar to fail with this.moment.weekdaysShort is not a function error. This causes the ability to use UTC always to not be possible.

https://codesandbox.io/s/material-ui-pickers-usage-demo-g93c2

in another library https://material-ui-pickers.dev its causing ISO 8601 text strings to be formatted incorrectly.

https://codesandbox.io/s/blue-pond-1qll6

please advise.

When updating from v0.0.2 to 1.0.0 a once working app now errors:

material-ui-pickers.esm.js:1386 Uncaught TypeError: _this.props.utils.getStartOfMonth is not a function
    at new Calendar (material-ui-pickers.esm.js:1386)
    at constructClassInstance (react-dom.development.js:13082)
    at updateClassComponent (react-dom.development.js:14978)
    at beginWork (react-dom.development.js:15845)
    at performUnitOfWork (react-dom.development.js:18879)
    at workLoop (react-dom.development.js:18920)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:18127)
    at renderRoot (react-dom.development.js:19038)
    at performWorkOnRoot (react-dom.development.js:19941)
    at performWork (react-dom.development.js:19851)
    at performSyncWork (react-dom.development.js:19825)
    at interactiveUpdates$1 (react-dom.development.js:20113)
    at interactiveUpdates (react-dom.development.js:2267)
    at dispatchInteractiveEvent (react-dom.development.js:5081)

Looking at the dependency tree using this tool:

http://npm.broofa.com/?q=@date-io/date-fns

Every project that uses this package (for example material-table) will pull all of these with it. Can you please factor out lerna at least, but others can be moved also.

Thank you!

Would it be possible to either relax the version constraint for date library peer dependencies, or publish more often?

The current version of @date-io/date-fns has a peer dependency for [email protected] while the latest version is 2.4.1.

It seems to be a pretty constant issue that this peer dependency isn't met when you strive to keep your dependencies up to date.

Environment

Steps to reproduce

1. Basic setup for date-fns
2. Open Datepicker and choose date, e.g. July 24, 2019

Expected behavior

The translation in the Datepicker header should be in nominative: červenec

Actual behavior

The translation in the Datepicker header is in genitive: července

Live example

https://codesandbox.io/s/material-ui-pickers-usage-demo-29nmv

I found out that getCalendarHeaderText is always called with MMMM yyyy which is formatted and it should be instead standalone LLLL yyyy shouldn't it?

// date-fns/src/date-fns-utils.ts
// this.yearMonthFormat = "MMMM yyyy";

DateFnsUtils.prototype.getCalendarHeaderText = function (date) {
  return format(date, this.yearMonthFormat, { locale: this.locale });
};

Other formats could be fixed as well. I switched the order of month and day to match my language (Czech or Slovak), not sure if it is applicable for other languages as well 🤔🤷🏻‍♂️

I recently updated to 1.3.8 and just importing it into and app which is compiled by webpack breaks it. The compilation passes but the application fails silently.

import DateFnsUtils from "@date-io/date-fns";

// This line is never reached:
console.error(DateFnsUtils);

It would be so much better if we had a CHANGELOG.md to make it easier for users and contributors to see precisely what notable changes have been made between each release.

In order to make it easy override format behavior with class inheritance. Like for date-fns-tz

class DateFnsTzUtils {
  format(date, formatString) {
    return formatTz(date, formatString, {
      timeZone: "America/New_York",
      locale: this.locale
    });
  }
}

Hi,

It seems that for @date-iu/luxon you have setup formats without taking into considearion the token difference .

So i have found the following formats in sources

  public yearMonthFormat = "MMMM yyyy";
  public dateFormat = "LLLL dd";

I would expect the formats

  public yearMonthFormat = "LLLL yyyy"; // standalone token for month as it has no correlation with a day
  public dateFormat = "MMMM dd"; // format token for month as it should correlate with day

Or am I wrong in my expectations?

When compiling with TypeScript, I receive the following error:

Module '"/<truncated>/moment/moment"' has no default export

The moment import appears to be written as import defaultMoment from "moment", but typically in TypeScript this is written as import * as moment from "moment", since moment does not use an ES6 style default export.

try to run yarn add @date-io/date-fns

I am using latest alpha [email protected].

js-joda is an immutable date and time library which is often mentioned alongside the other alternatives to moment.js.

It would be great to include and would allow easy use with Material-UI Pickers.

issue #1 has reappeared and should be reopened

I tried using momentutils for datetimepicker, but it wouldn't allow me to pick another date time.

https://codesandbox.io/s/740ov4m3l0

Steps to reproduce:

Click on date time picker
Select a new date time
Date time display doesn't change to new date time.

Adding getting a time instance as Unix timestamp. I can add the functionality to all libs and send a PR.

my project pulled new npm package #v1.3.12 and received the following upon build

[Container] 2019/12/03 16:32:10 Running command npm install 
npm WARN deprecated [email protected]: One of your dependencies needs to upgrade to fsevents v2: 1) Proper nodejs v10+ support 2) No more fetching binaries from AWS, smaller package size 
npm WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. 
npm WARN deprecated [email protected]: core-js@<3.0 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. 
npm WARN deprecated [email protected]: use String.prototype.padStart() 
npm ERR! code ETARGET 
npm ERR! notarget No matching version found for @date-io/core@^1.3.12 
npm ERR! notarget In most cases you or one of your dependencies are requesting 
npm ERR! notarget a package version that doesn't exist. 
npm ERR! notarget  
npm ERR! notarget It was specified as a dependency of '@date-io/date-fns' 
npm ERR! notarget  
 
npm ERR! A complete log of this run can be found in: 
npm ERR!     /root/.npm/_logs/2019-12-03T16_32_20_969Z-debug.log 

after fixing it back to 1.3.11 it worked

my dependencies:

    "@date-io/date-fns": "^1.3.11",
    "@material-ui/pickers": "^3.2.6",
    "axios": "^0.18.0",
    "date-fns": "^2.2.1",
    "jss-rtl": "^0.2.3",
    "prop-types": "^15.7.2",
    "react-select": "^3.0.8",
    "styled-components": "^4.3.2",
    "yup": "^0.27.0"

Thanks

Hi,

When I try to install @date-io/date-fns ($ npm i @date-io/date-fns) I got an error
npm ERR! 404 Not Found: @date-io/core@^1.3.6. What am I doing wrong?

Module not found: Can't resolve 'date-fns/addDays' in '/home/tristan/Documents/github/ui/node_modules/@date-io/date-fns/build'

"@date-io/moment": "^1.1.0"

work well with yarn, not with npm

In @date-io/date-fns getWeekdays returns an array of weekdays with respect to user locale:
https://github.com/dmtrKovalenko/date-io/blob/master/packages/date-fns/src/date-fns-utils.ts#L227

In @date-io/dayjs getWeekdays returns an array of weekdays always starting with sunday.
https://github.com/dmtrKovalenko/date-io/blob/master/packages/dayjs/src/dayjs-utils.ts#L209
This happens, because in dayjs `set('day', 0) always yields sunday (source: dayjs docs)

Possible solution to this is to use dayjs().startOf('week'), which results in correct week start for the given locale

I am getting the following error with typescript

ERROR in /home/cescoferraro/go/src/github.com/onnidev/dash/node_modules/@date-io/moment/build/moment-utils.d.ts(8,22):
TS2420: Class 'MomentUtils' incorrectly implements interface 'IUtils'.
Property 'getStartOfMonth' is missing in type 'MomentUtils' but required in type 'IUtils'

Hi,

The date format listed in DateIOFormats hasnt got one I need. I need dd/MM/yyyy or similar. How do I implement it?

So if I use

<MuiPickersUtilsProvider utils={DateFnsUtils}>
            <React.Fragment>
                <FormControl fullWidth={full}>
                    <KeyboardDateTimePicker 
                        value={value ? parse(value, dateFormat, new Date()) : null}
                        placeholder={placeholder}
                        format={"dd-MM-yyyy"}
                        onChange={(date) => {
                        }}
                    />
                </FormControl>
            </React.Fragment>
</MuiPickersUtilsProvider>

I get RangeError: Format string contains an unescaped latin alphabet character n`` error.
Only works if I use fullDate or one of the format listed in DateIOFormats

<MuiPickersUtilsProvider utils={DateFnsUtils}>
            <React.Fragment>
                <FormControl fullWidth={full}>
                    <KeyboardDateTimePicker 
                        value={value ? parse(value, dateFormat, new Date()) : null}
                        placeholder={placeholder}
                        format="fullDate"
                        onChange={(date) => {
                        }}
                    />
                </FormControl>
            </React.Fragment>
</MuiPickersUtilsProvider>

Any idea?

After including npm i @date-io/date-fns

Hi, fix please:

import * as defaultMoment from "moment";

instead

import defaultMoment from "moment";

Actually I'm doing it manually because the app crash when try compile.

#27

I'm getting the error Module ''date-fns/locale/en-US'' has no default export at node_modules/@date-io/date-fns/build/date-fns-utils.d.ts.

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "react",
    "lib": ["esnext", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "target": "es5"
  },
  "exclude": ["node_modules", "**/*.spec.ts"]
}

Environment:
@date-io/date-fns: "0.0.2"
date-fns": "2.0.0-alpha.25"

I see that material-ui-pickers does the following:

import { IUtils } from '@date-io/core/IUtils';

I had never seen @ before. It looks to me like something that works only with babel & webpack since it's not part of the ecmascript spec?

It might be useful to document the ways of including date-io in a project

It looks like this is a great way to avoid requiring a specific date lib as a dep/peer dep.

material-ui-pickers is implemented with something like:

import MomentUtils from '@date-io/moment';
import DateFnsUtils from '@date-io/date-fns';
import LuxonUtils from '@date-io/luxon';
import { MuiPickersUtilsProvider } from '@material-ui/pickers';

function App() {
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <Root />
    </MuiPickersUtilsProvider>
  );
}

render(<App />, document.querySelector('#app'));

Is there any way to auto-register the various utils to global to avoid requiring context? Or is this pattern with react context the best we can do?

Issue

The best way for other libraries to work with this library should be documented.

Eg. for date-fns.

  "peerDependencies": {
    "date-fns": "2.6.0"
  },

It would be more convenient for consumers to have a range such as ^2.6.

Thank you for great work.

Calling isEqual with a DateTime value and a null comparing (utils.isEqual(<DateTime>, null)) throws an error. This occurs whenever the value changes on a picker with an initial value of null.

Release versioning seems to be out of whack.

r1.3.7 -> 3.1.8 according to the releases page.

I assume this was a typo?

Hello everyone,

I'm using the latest version available on npm, it's 1.3.6. As stated in #42 it should be fixed, but isn't.
tsconfig.json has the following in it:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

Full error (with stripped paths)

......./node_modules/@date-io/moment/build/moment-utils.d.ts
TypeScript error in ....../node_modules/@date-io/moment/build/moment-utils.d.ts(2,24):
Cannot find module '@date-io/core/IUtils'.  TS2307

    1 | import defaultMoment from "moment";
  > 2 | import { IUtils } from "@date-io/core/IUtils";
      |                        ^
    3 | interface Opts {
    4 |     locale?: string;
    5 |     instance?: typeof defaultMoment;

Versions:

    "@date-io/moment": "^1.3.6",
    "@material-ui/core": "^4.0.2",
    "@material-ui/pickers": "^3.1.0",
    "moment": "^2.24.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "tslint": "^5.17.0",
    "tslint-react": "^4.0.0",
    "typescript": "^3.5.1"

Cheers

We've been discussing the need for just such a library over at Chart.js where our users are complaining about our usage of moment making the download size too large.

I scanned our code and it looks like we would need the following methods in order to use date-io:

luxon?: any
fromMillis(millis): TDate
fromJSDate(jsDate): TDate
TDuration.as(unit: string) or getDiff(TDate, TDate, unit: string)
TDate.startOf(unit: string)
TDate.endOf(unit: string)

Im am using date-ioin combination with @material-ui/pickers and @date-io/date-fns. I came across some error which is caused by the class based implementation of https://github.com/dmtrKovalenko/date-io/blob/master/packages/date-fns/src/date-fns-utils.ts

Here is what I was trying to do:

import { useUtils } from '@material-ui/pickers';

const MyComponent = () => {
    const { isSameDay, isValid } = useUtils();

    isValid(someDate);
}

The error occured in the isValid call, because it uses internally this.date() and I suspect that this is not the right context when the method was destructured.

Maybe that this usage is not what you intended. But working with a factory function could lead to a better developer expierience.

Example:

// ...

const ensureDate = date(value?: any) {
    if (typeof value === "undefined") {
        return new Date();
    }

    if (value === null) {
        return null;
    }

    return new Date(value);
}

// ...

export default function createDateFnsAdapter(locale): IUtils<Date> {
    // ...
    const getDatePickerHeaderText = (date: Date) => format(date, "EEE, MMM d", { locale });
    const isValid = (value: any) => isValid(ensureDate(value));
    // ...

    return {
        // ...
        getDatePickerHeaderText,
        isValid,
        // ...
    }
}

Migrate to the curried functions to make it easier use of pipeline operator.

There are a number of dependencies declared:
https://github.com/dmtrKovalenko/date-io/blob/master/package.json#L23

These look like they should all be devDependencies as they look like things that would only be used at development time