New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Moment.js alternatives (date-fns) #816

Open
amkoehler opened this Issue Apr 20, 2018 · 6 comments

Comments

Projects
None yet
6 participants
@amkoehler
Contributor

amkoehler commented Apr 20, 2018

Do you want to request a feature or report a bug?

Feature

This library supports Moment.js and Globalize.js for localization. I was wondering if you had any plans to add other localization libraries, specifically date-fns. Moment is a very powerful library, but it does not offer the same bundle size optimizations as date-fns. There's a great discussion on the differences here. The main benefits of date-fns over Moment are performance and a more optimized bundle.

If this isn't really on your radar, no worries. I may still make an attempt at a PR if that's the case.

@arecvlohe

This comment has been minimized.

Show comment
Hide comment
@arecvlohe

arecvlohe Apr 20, 2018

Collaborator

@amkoehler I think it's a good idea to allow other alternatives like date-fns. I like date-fns as well and use it with this library outside of the initial setup with moment. It will be nice to see a PR on this if you get around to it!

Collaborator

arecvlohe commented Apr 20, 2018

@amkoehler I think it's a good idea to allow other alternatives like date-fns. I like date-fns as well and use it with this library outside of the initial setup with moment. It will be nice to see a PR on this if you get around to it!

@dmitrykrylov

This comment has been minimized.

Show comment
Hide comment
@dmitrykrylov

dmitrykrylov May 31, 2018

@amkoehler @arecvlohe I tried to implement RBC localizer for date-fns v1.29.0. I've found the next issues:

  1. RBC's localizers require parse function with possibility to provide locale argument. Date-fns v1 doesn't support parsing with localization. It seems that it will be added in v2.
  2. startOfWeek function from date-fns v1 doesn't take locale parameter (it can take weekStartsOn value but not an actual locale object). date-fns v2-alpha already has this feature. A possible workaround for v1 is to hardcode mapping between locales and weekStartsOn number.

Therefore probably it's better to wait for date-fns v2. Let's help date-fns community to update locales for v2: https://github.com/date-fns/date-fns/blob/master/outdatedLocales.json

dmitrykrylov commented May 31, 2018

@amkoehler @arecvlohe I tried to implement RBC localizer for date-fns v1.29.0. I've found the next issues:

  1. RBC's localizers require parse function with possibility to provide locale argument. Date-fns v1 doesn't support parsing with localization. It seems that it will be added in v2.
  2. startOfWeek function from date-fns v1 doesn't take locale parameter (it can take weekStartsOn value but not an actual locale object). date-fns v2-alpha already has this feature. A possible workaround for v1 is to hardcode mapping between locales and weekStartsOn number.

Therefore probably it's better to wait for date-fns v2. Let's help date-fns community to update locales for v2: https://github.com/date-fns/date-fns/blob/master/outdatedLocales.json

@dmitrykrylov dmitrykrylov referenced a pull request that will close this issue May 31, 2018

Open

Add date-fns v2.x.x-alpha support #855

@GavinThomas1192

This comment has been minimized.

Show comment
Hide comment
@GavinThomas1192

GavinThomas1192 Jun 13, 2018

I would also really like to see support for different packages. I need to use luxon, which is going to be moment's predecessor. Moment.js is taboo here because of optimization..

GavinThomas1192 commented Jun 13, 2018

I would also really like to see support for different packages. I need to use luxon, which is going to be moment's predecessor. Moment.js is taboo here because of optimization..

@jquense

This comment has been minimized.

Show comment
Hide comment
@jquense

jquense Jun 13, 2018

Member

We aren't likely to support a lot of options out of box, but the API is pluggable specifically so folks can use whatever they want @GavinThomas1192 can you give a Luxon localizer a shot and if there are api failings please report back.

Member

jquense commented Jun 13, 2018

We aren't likely to support a lot of options out of box, but the API is pluggable specifically so folks can use whatever they want @GavinThomas1192 can you give a Luxon localizer a shot and if there are api failings please report back.

@GavinThomas1192

This comment has been minimized.

Show comment
Hide comment
@GavinThomas1192

GavinThomas1192 Jun 13, 2018

Yes, this will be my priority tomorrow! I’ve spent about a week implementing a super custom react big calendar and would really like to be able to use all of my work. So this is a high priority. My company absolutely won’t allow me to use moment

GavinThomas1192 commented Jun 13, 2018

Yes, this will be my priority tomorrow! I’ve spent about a week implementing a super custom react big calendar and would really like to be able to use all of my work. So this is a high priority. My company absolutely won’t allow me to use moment

@ltegman

This comment has been minimized.

Show comment
Hide comment
@ltegman

ltegman Jun 18, 2018

Inspired by some conversation in #118, Here's a first swag at a luxon localizer. Hasn't been tested enough for me to call it bulletproof, but it seems to work so far in a quick smoke test.

import { set } from 'react-big-calendar/lib/formats'
import { set as setLocalizer } from 'react-big-calendar/lib/localizer'
import dates from 'react-big-calendar/lib/utils/dates'

const dateRangeFormat = ({ start, end }, culture, local) =>
  `${local.format(start, 'D', culture)}${local.format(end, 'D', culture)}`

const timeRangeFormat = ({ start, end }, culture, local) =>
  `${local.format(start, 't', culture)}${local.format(end, 't', culture)}`

const timeRangeStartFormat = ({ start }, culture, local) =>
  `${local.format(start, 't', culture)}`

const timeRangeEndFormat = ({ end }, culture, local) => `${local.format(end, 't', culture)}`

const weekRangeFormat = ({ start, end }, culture, local) =>
  `${local.format(start, 'MMMM dd', culture)} - ${local.format(
    end,
    dates.eq(start, end, 'month') ? 'dd' : 'MMMM dd',
    culture
  )}`

export const formats = {
  dateFormat: 'dd',
  dayFormat: 'dd EEE',
  weekdayFormat: 'ccc',

  selectRangeFormat: timeRangeFormat,
  eventTimeRangeFormat: timeRangeFormat,
  eventTimeRangeStartFormat: timeRangeStartFormat,
  eventTimeRangeEndFormat: timeRangeEndFormat,

  timeGutterFormat: 't',

  monthHeaderFormat: 'MMMM yyyy',
  dayHeaderFormat: 'dddd MMM dd',
  dayRangeHeaderFormat: weekRangeFormat,
  agendaHeaderFormat: dateRangeFormat,

  agendaDateFormat: 'EEE MMM dd',
  agendaTimeFormat: 't',
  agendaTimeRangeFormat: timeRangeFormat,
}

export default function(DateTime, { firstDayOfWeek }) {
  const locale = (d, c) => (c ? d.reconfigure(c) : d)

  set(formats)

  return setLocalizer({
    firstOfWeek() {
      return firstDayOfWeek
    },

    parse(value, format, culture) {
      return locale(DateTime.fromFormat(value, format), culture).toJSDate()
    },

    format(value, format, culture) {
      return locale(DateTime.fromJSDate(value), culture).toFormat(format)
    },
  })
}
LuxonLocalizer(DateTime, { firstDayOfWeek: 0 })

ltegman commented Jun 18, 2018

Inspired by some conversation in #118, Here's a first swag at a luxon localizer. Hasn't been tested enough for me to call it bulletproof, but it seems to work so far in a quick smoke test.

import { set } from 'react-big-calendar/lib/formats'
import { set as setLocalizer } from 'react-big-calendar/lib/localizer'
import dates from 'react-big-calendar/lib/utils/dates'

const dateRangeFormat = ({ start, end }, culture, local) =>
  `${local.format(start, 'D', culture)}${local.format(end, 'D', culture)}`

const timeRangeFormat = ({ start, end }, culture, local) =>
  `${local.format(start, 't', culture)}${local.format(end, 't', culture)}`

const timeRangeStartFormat = ({ start }, culture, local) =>
  `${local.format(start, 't', culture)}`

const timeRangeEndFormat = ({ end }, culture, local) => `${local.format(end, 't', culture)}`

const weekRangeFormat = ({ start, end }, culture, local) =>
  `${local.format(start, 'MMMM dd', culture)} - ${local.format(
    end,
    dates.eq(start, end, 'month') ? 'dd' : 'MMMM dd',
    culture
  )}`

export const formats = {
  dateFormat: 'dd',
  dayFormat: 'dd EEE',
  weekdayFormat: 'ccc',

  selectRangeFormat: timeRangeFormat,
  eventTimeRangeFormat: timeRangeFormat,
  eventTimeRangeStartFormat: timeRangeStartFormat,
  eventTimeRangeEndFormat: timeRangeEndFormat,

  timeGutterFormat: 't',

  monthHeaderFormat: 'MMMM yyyy',
  dayHeaderFormat: 'dddd MMM dd',
  dayRangeHeaderFormat: weekRangeFormat,
  agendaHeaderFormat: dateRangeFormat,

  agendaDateFormat: 'EEE MMM dd',
  agendaTimeFormat: 't',
  agendaTimeRangeFormat: timeRangeFormat,
}

export default function(DateTime, { firstDayOfWeek }) {
  const locale = (d, c) => (c ? d.reconfigure(c) : d)

  set(formats)

  return setLocalizer({
    firstOfWeek() {
      return firstDayOfWeek
    },

    parse(value, format, culture) {
      return locale(DateTime.fromFormat(value, format), culture).toJSDate()
    },

    format(value, format, culture) {
      return locale(DateTime.fromJSDate(value), culture).toFormat(format)
    },
  })
}
LuxonLocalizer(DateTime, { firstDayOfWeek: 0 })
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment