luxon | A library for working with dates and times in JS | Date Time Utils library

by moment JavaScript Version: Current License: MIT

Download this library from

kandi X-RAY | luxon Summary

luxon is a JavaScript library typically used in Utilities, Date Time Utils applications. luxon has no bugs, it has no vulnerabilities, it has a Permissive License and it has medium support. You can install using 'npm i @vizual/luxon' or download it from GitHub, npm.

Luxon is a library for working with dates and times in JavaScript.

Support

Quality

Security

License

Reuse

kandi-support Support

luxon has a medium active ecosystem.
It has 12355 star(s) with 604 fork(s). There are 103 watchers for this library.
It had no major release in the last 12 months.
There are 92 open issues and 709 have been closed. On average issues are closed in 26 days. There are 9 open pull requests and 0 closed requests.
It has a neutral sentiment in the developer community.
The latest version of luxon is current.

luxon Support

Best in #Date Time Utils

Average in #Date Time Utils

luxon Support

Best in #Date Time Utils

Average in #Date Time Utils

quality kandi Quality

luxon has 0 bugs and 0 code smells.

luxon Quality

Best in #Date Time Utils

Average in #Date Time Utils

luxon Quality

Best in #Date Time Utils

Average in #Date Time Utils

security Security

luxon has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
luxon code analysis shows 0 unresolved vulnerabilities.
There are 0 security hotspots that need review.

luxon Security

Best in #Date Time Utils

Average in #Date Time Utils

luxon Security

Best in #Date Time Utils

Average in #Date Time Utils

license License

luxon is licensed under the MIT License. This license is Permissive.
Permissive licenses have the least restrictions, and you can use them in most projects.

luxon License

Best in #Date Time Utils

Average in #Date Time Utils

luxon License

Best in #Date Time Utils

Average in #Date Time Utils

build Reuse

luxon releases are not available. You will need to build from source code and install.
Deployable package is available in npm.
Installation instructions are not available. Examples and code snippets are available.
luxon saves you 87 person hours of effort in developing the same functionality from scratch.
It has 71 lines of code, 0 functions and 93 files.
It has low code complexity. Code complexity directly impacts maintainability of the code.

luxon Reuse

Best in #Date Time Utils

Average in #Date Time Utils

luxon Reuse

Best in #Date Time Utils

Average in #Date Time Utils

Top functions reviewed by kandi - BETA

kandi has reviewed luxon and discovered the below as its top functions. This is intended to give you an instant insight into luxon implemented functionality, and help decide if they suit your requirements.

Convert a given token to a unit .

Define example .

Get the date from an array of tokens .

Creates a new DateTime instance

Returns a string representation of known formats .

Rollup input options

Converts an IO time to a string .

Format relative time for relative units .

Computes the high order of the week for the specified date .

Build a Babel library

Get all kandi verified functions for this library.

luxon Key Features

DateTime, Duration, and Interval types.

Immutable, chainable, unambiguous API.

Parsing and formatting for common and custom formats.

Native time zone and Intl support (no locale or tz files).

luxon Examples and Code Snippets

See all related Code Snippets

Luxon

Copy

Download

DateTime.now().setZone("America/New_York").minus({ weeks: 1 }).endOf("day").toISO();

i18next undefined is not an object (evaluating '_i18next.default.services.formatter.add')

Copy

Download

interpolation: {
  escapeValue: false, // not needed for react as it escapes by default
  format: (value, format, lng) => { // legacy usage
    if (value instanceof Date) {
      return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
    }
    return value;
  }
},

i18next backend loadPath fails to map the data

Copy

Download

// ...
loadPath: `http://localhost:5000/{{lng}}',
request: function (options, url, payload, callback) {
  axios.get(url).then((res) => {
      callback(null, { status: 200, data: res.data });
  }).catch((err) => callback(err));
},
// ...

React tabulator ref becomes null on rerendering

Copy

Download

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    const staffCompetencyTableRef = useRef(null);

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
    }

    /***
     * ALL OTHER CODE
     */

    return (
        <>
            <h3 className="text-center"> Staff Competency </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <ReactTabulator
                onRef={(r) => (staffCompetencyTableRef.current = r.current)}
                columns={staffCompetencyTableCoumns}
                options={staffCompetencyTableOptions}
            />
            <ChangeStaffCompetency
                show={state.changeStaffCompetencyShow}
                onHide={() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
                staffID= {state.staffID}
                workflowName= {state.workflowName}
                competentTasks= {state.competentTasks}
                api={props.api}
                parentCallback = {handleCallback}
            />
        </>
    );
}

Migrating from Moment to Luxon - (t) => moment(t).format('hh:mm') equivalent

Copy

Download

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

const day = moment(1318781876406);

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

Chart.js sum y values depending on time unit

Copy

Download

const ctx = document.getElementById("tests-chart");
const data =[
  { x: "24/03/2022", y: 20 },
  { x: "25/03/2022", y: 5 },
  { x: "24/06/2022", y: 10 },
  { x: "25/06/2022", y: 5 }
 ];

let updatedData =[];
let tempDateCollection =[];

data.map((yData , index)=> {

  const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');

  if(tempDateCollection.includes(formatedDate)){
    const index = tempDateCollection.indexOf(formatedDate);
    const element = updatedData[index];
    updatedData[index] = {...element, y: element.y + yData.y}
  } else{
    tempDateCollection.push(formatedDate);
    updatedData.push(yData);
  }
  
})

const testsChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: 'Dataset 1',
                data:updatedData,
                backgroundColor: 'rgb(255, 99, 132)',
              },
        ],
    },
    options: {
        scales: {
            x: {
                type: "time",
                time: {
                    parser: "dd/MM/yyyy",
                    unit: "month",
                    // Luxon format string
                    tooltipFormat: "MM",
                    round: 'month'
                },
            },
        },
    },
})

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>

<div>
  <canvas id="tests-chart"></canvas>
</div>

const ctx = document.getElementById("tests-chart");
const data =[
  { x: "24/03/2022", y: 20 },
  { x: "25/03/2022", y: 5 },
  { x: "24/06/2022", y: 10 },
  { x: "25/06/2022", y: 5 }
 ];

let updatedData =[];
let tempDateCollection =[];

data.map((yData , index)=> {

  const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');

  if(tempDateCollection.includes(formatedDate)){
    const index = tempDateCollection.indexOf(formatedDate);
    const element = updatedData[index];
    updatedData[index] = {...element, y: element.y + yData.y}
  } else{
    tempDateCollection.push(formatedDate);
    updatedData.push(yData);
  }
  
})

const testsChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: 'Dataset 1',
                data:updatedData,
                backgroundColor: 'rgb(255, 99, 132)',
              },
        ],
    },
    options: {
        scales: {
            x: {
                type: "time",
                time: {
                    parser: "dd/MM/yyyy",
                    unit: "month",
                    // Luxon format string
                    tooltipFormat: "MM",
                    round: 'month'
                },
            },
        },
    },
})

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>

<div>
  <canvas id="tests-chart"></canvas>
</div>

How to make 'ref' work for ReactTabulator

Copy

Download

import React, { useState, useEffect, Suspense, useRef } from "react";
import PropTypes from "prop-types";

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import { Button } from "react-bootstrap";
import { ReactTabulator } from "react-tabulator";

const luxon = require("luxon");
window.DateTime = luxon.DateTime;

const FetchWorkloads = (props) => {
  // Possible Task Status Options (for display purpose)
  const taskStatusOptions = [
    { id: "N", label: "New" },
    { id: "P", label: "In Progress" },
    { id: "C", label: "Completed" }
  ];

  // Variable to hold the workloads data
  const [workloadData, setWorkloadData] = useState([]);

  let workloadsTableRef = useRef(null);

  // Action to download workloads data as 'JSON'
  const downloadAsJSON = () => {
    workloadsTableRef.current.download("json", "RTP_Workloads.json");
  };

  // Action to download workloads data as 'CSV'
  const downloadAsCSV = () => {
    // action
  };

  // Action to download workloads data as 'PDF'
  const downloadAsPDF = () => {
    // action
  };

  // Fetch the workloads from DB
  const getWorkloadData = async () => {
    // API Call
  };

  // Workload Table Column Setup
  const workloadsTableCoumns = [
    // column setup
  ];

  // Workload Table Options Setup
  const workloadsTableOptions = {
    index: "id",
    layout: "fitColumns",
    pagination: true,
    paginationSize: 20,
    placeholder: "No Workload Available"
  };

  // useEffect call the actions inside it after rendering
  useEffect(() => {
    getWorkloadData();
  }, []);

  return (
    <>
      <h3 className="text-center"> Radiotherapy Physics Workloads </h3>
      <div>
        <Button variant="dark" onClick={() => downloadAsJSON()}>
          Download JSON
        </Button>{" "}
        <Button variant="dark" onClick={() => downloadAsCSV()}>
          Download CSV
        </Button>{" "}
        <Button variant="dark" onClick={() => downloadAsPDF()}>
          Download PDF
        </Button>
      </div>
      <div style={{ clear: "both" }}></div>
      <br></br>
      <Suspense fallback={<p>Fetching workloads...</p>}>
        <ReactTabulator
          onRef={(r) => (workloadsTableRef = r)}
          columns={workloadsTableCoumns}
          data={workloadData}
          options={workloadsTableOptions}
        />
      </Suspense>
    </>
  );
};

FetchWorkloads.propTypes = {
  api: PropTypes.object
};

export default FetchWorkloads;

Obtain Duration of a quarter in Luxon

Copy

Download

const startDateOfQuarter = DateTime.fromFormat('3', 'q');
const endDateOfQuarter = startDateOfQuarter.endOf('quarter')

Date Unit test passed locally but failed in Gitlab CD/CI pipeline

Copy

Download

const toDateString = 'Mon Feb 07 2022 00:00:00 GMT+0200 (Eastern European Standard Time)'
// ...
describe('formatTime', () => {
  it('Should return 00:00 when there is no time', () => {
    expect(formatTime(toDateString)).toBe('00:00')
  })

Expected: "00:00"
Received: "22:00"

const toDateString = 'Mon Feb 07 2022 00:00:00 GMT+0200 (Eastern European Standard Time)'
// ...
describe('formatTime', () => {
  it('Should return 00:00 when there is no time', () => {
    expect(formatTime(toDateString)).toBe('00:00')
  })

Expected: "00:00"
Received: "22:00"

Typescript undefined date validation

Copy

Download

export const dateToISOString = (date: Date | string | undefined): string => {
  if (!date) {
    /**
     * handle the case when the caller passes undefined explicitly.
     * Dependent on your use-case you may want to 
     * - return a default text: e.g. "", "-", etc.
     * - or throw Error('undefined date!');
     */
    return '-';
  } else if (typeof date === "string") {
    // then check if the input is a string
    return date;
  } else {
    /**
     * now typescript knows that the input is of type Date
     * because you defined the input type as:  Date | string | undefined
     * and you have already handled the undefined and string cases
     */
    return dateToStrings(date).toFormat(ISO_DATE_FORMAT);
  }
};

Difference between date-fns' isValid and luxon's isValid

Copy

Download

DateTime.fromJSDate(dateString).isValid

See all related Code Snippets

Community Discussions

Trending Discussions on luxon

i18next undefined is not an object (evaluating '_i18next.default.services.formatter.add')
i18next backend loadPath fails to map the data
ERROR in ./ordenesPago.js Module not found: Error: Can't resolve 'vue-confirm-dialog' in '/resources/js/administracion'
Tsx luxon type of DateTime
React tabulator ref becomes null on rerendering
Migrating from Moment to Luxon - (t) => moment(t).format('hh:mm') equivalent
Chart.js sum y values depending on time unit
How to make 'ref' work for ReactTabulator
Obtain Duration of a quarter in Luxon
Date Unit test passed locally but failed in Gitlab CD/CI pipeline

Trending Discussions on luxon

QUESTION

i18next undefined is not an object (evaluating '_i18next.default.services.formatter.add')

Asked 2022-Mar-29 at 16:06

why I get this error message:

undefined is not an object (evaluating '_i18next.default.services.formatter.add')

Code:

import i18next from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from 'i18next-browser-languagedetector';
import HttpApi from 'i18next-http-backend';
import { DateTime } from 'luxon';

i18next
  .use(HttpApi)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    react: {
      useSuspense: true
    },
    fallbackLng: 'en',
    compatibilityJSON: 'v3',
    lng: 'de',
    debug: process.env.NODE_ENV === 'development',
    backend: {
      loadPath: `http://192.168.0.249:4000/public/locales/{{lng}}/translation.json`,
    },
    interpolation: {
      escapeValue: false,
    },
    keySeparator: '.'
  });

// new usage
i18next.services.formatter.add('DATE_HUGE', (value, lng, options) => {
  return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime.DATE_HUGE)
});

export default i18next;

Can anyone help me to solve this issue ?

I get it from there:

https://dev.to/adrai/how-to-properly-internationalize-a-react-application-using-i18next-3hdb#formatting

ANSWER

Answered 2022-Mar-29 at 16:06

You're probably not using i18next >= 21.3.0

in that case use the legacy formatting option: https://www.i18next.com/translation-function/formatting#legacy-format-function-i18next-less-than-21.3.0

interpolation: {
  escapeValue: false, // not needed for react as it escapes by default
  format: (value, format, lng) => { // legacy usage
    if (value instanceof Date) {
      return DateTime.fromJSDate(value).setLocale(lng).toLocaleString(DateTime[format])
    }
    return value;
  }
},

Source https://stackoverflow.com/questions/71665124

QUESTION

ERROR in ./ordenesPago.js Module not found: Error: Can't resolve 'vue-confirm-dialog' in '/resources/js/administracion'

Asked 2022-Mar-26 at 09:24

I cloned a repo from git, and install all the dependences needed, but when runing npm run dev ai got this error for three files:

ERROR in ./resources/js/administracion/ordenesPago.js Module not found: Error: Can't resolve 'vue-confirm-dialog' in '/Users/davegomez/Desktop/Arco/arco/sistema-arco-v2.0/resources/js/administracion' @ ./resources/js/administracion/ordenesPago.js 3:0-50 7:8-24 8:36-52 @ multi ./resources/js/administracion/ordenesPago.js

the strangest part is that I have already 'vue-confirm-dialog' installed:

This is my Package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress  --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --disable-host-check --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0.3",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.6.14",
        "vue-confirm-dialog": "^1.0.2",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "@deveodk/vue-toastr": "^1.1.0",
        "@popperjs/core": "^2.6.0",
        "chart.js": "^2.9.4",
        "easy-circular-progress": "^1.0.4",
        "intro.js": "^2.9.3",
        "js-file-download": "^0.4.12",
        "konva": "^8.2.1",
        "laravel-echo": "^1.8.1",
        "leaflet": "^1.7.1",
        "luxon": "^1.25.0",
        "pusher-js": "^7.0.0",
        "sweet-modal-vue": "^2.0.0",
        "three": "^0.129.0",
        "v-calendar": "^2.1.5",
        "vue-3d-model": "^1.4.0",
        "vue-advanced-cropper": "^1.7.0",
        "vue-cal": "^3.9.1",
        "vue-chartjs": "^3.5.1",
        "vue-datetime": "^1.0.0-beta.14",
        "vue-easy-lightbox": "^0.16.1",
        "vue-introjs": "^1.3.2",
        "vue-konva": "^2.1.7",
        "vue-loading-overlay": "^3.4.2",
        "vue-multiselect": "^2.1.6",
        "vue-notification": "^1.3.20",
        "vue-numeric": "^2.4.3",
        "vue-phone-number-input": "^1.1.10",
        "vue-trix": "^1.2.0",
        "vue-ui-preloader": "^1.2.1",
        "vue2-leaflet": "^2.7.1",
        "weekstart": "^1.0.1"
    }
}

and my package.mix.js

mix.js("resources/js/app.js", "public/js")
    .vue()
    .version()
    .js("resources/js/comprobante/modificar.js", "public/js/comprobante")
    .js("resources/js/pacientes/app.js", "public/js/pacientes")
    .version()
    .js("resources/js/auth/login.js", "public/js/auth")
    .js("resources/js/comprobante/impresiones.js", "public/js/comprobante")
    .js("resources/js/comprobante/crear.js", "public/js/comprobante")
    .version()
    .js("resources/js/doctores/dashboard.js", "public/js/doctores")
    .version()
    .js("resources/js/seguros/pacientes.js", "public/js/seguros")
    .version()
    .js("resources/js/comprobante/eliminados.js", "public/js/comprobante")
    .js("resources/js/pacientes/historial.js", "public/js/pacientes")
    .version()
    .js("resources/js/caja/cierre.js", "public/js/caja")
    .js("resources/js/caja/cierreVue.js", "public/js/caja")
    .js("resources/js/comprobante/show.js", "public/js/comprobante")
    .version()
    .js("resources/js/usuarios/index.js", "public/js/usuarios")
    .js("resources/js/seguros/estudios.js", "public/js/seguros")
    .version()
    .js("resources/js/seguros/colaboradores.js", "public/js/seguros")
    .version()
    .js(
        "resources/js/sucursales/ordenesRechazadas/listado.js",
        "public/js/sucursales/ordenesRechazadas"
    )
    .version()
    .js("resources/js/laboratorio/comisiones.js", "public/js/laboratorio")
    .version()
    .js(
        "resources/js/laboratorio/asignaciones/procesos.js",
        "public/js/laboratorio/asignacion"
    )
    .version()
    .js("resources/js/doctores/listado.js", "public/js/doctores")
    .version()
    .js(
        "resources/js/laboratorio/sucursales/pendientes.js",
        "public/js/laboratorio/sucursales"
    )
    .version()
    .js("resources/js/insumos/index.js", "public/js/insumos")
    .version()
    .js(
        "resources/js/sucursales/comprobantesVentas.js",
        "public/js/sucursales/comprobantes"
    )
    .version()
    .js(
        "resources/js/estudios/archivos/agregado.js",
        "public/js/estudios/archivos"
    )
    .version()
    .js(
        "resources/js/estudios/archivos/previewModel3d.js",
        "public/js/estudios/archivos/preview"
    )
    .version()
    .js(
        "resources/js/estudios/archivos/editorModel3d.js",
        "public/js/estudios/archivos/editor"
    )
    .version()
    .js(
        "resources/js/informantes/cefalogramas.js",
        "public/js/informantes/estudios"
    )
    .version()
    .js("resources/js/chat/chat.js", "public/js/chat")
    .version()
    .js("resources/js/doctores/modificacion.js", "public/js/doctores")
    .version()
    .js(
        "resources/js/doctores/pacientes/historial.js",
        "public/js/doctores/pacientes"
    )
    .version()
    .js(
        "resources/js/sucursales/pedidoModificacion/listado.js",
        "public/js/sucursales/pedidoModificacion/listado.js"
    )
    .version()
    .js(
        "resources/js/informantes/informes.js",
        "public/js/informantes/estudios"
    )
    .version()
    .js(
        "resources/js/administracion/ordenesPago.js",
        "public/js/administracion"
    )
    .version()
    .js("resources/js/timbrado/resource.js", "public/js/timbrado")
    .version()
    .sass("resources/sass/app.scss", "public/css");

ANSWER

Answered 2022-Mar-26 at 09:24

I had the same problem since the new Version 1.1.0 came out 7 days ago. It just set back the version to 1.0.1 again and it worked. I dont know if there is something wrong with their new release.

Source https://stackoverflow.com/questions/71574903

QUESTION

React tabulator ref becomes null on rerendering

Asked 2022-Mar-24 at 09:50

I am using Tabulator with React using the react-tabulator module.

I have used 'ref' for the table component and call actions like downloading data or whatever it may be.

import React, { Suspense, useEffect, useReducer, useRef } from 'react';
import PropTypes from 'prop-types';

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import {Button } from 'react-bootstrap';
import { ReactTabulator, reactFormatter } from "react-tabulator";
import { reducer } from '../common/reducer';
import ChangeStaffCompetency from './ChangeStaffCompetency';
import * as jsPDF from 'jspdf';
import 'jspdf-autotable';
window.jspdf = jsPDF;

const luxon = require('luxon');
window.DateTime = luxon.DateTime;

// Initial states of StaffCompetency
const initialState = {
    changeStaffCompetencyShow: false,
    staffID: "",
    workflowName: "",
    competentTasks: "",
    competencyEditorRow: null,
};

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    let staffCompetencyTableRef = useRef(null);

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
    }

    /***
     * ALL OTHER CODE
     */

    return (
        <>
            <h3 className="text-center"> Staff Competency </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <ReactTabulator
                onRef={(r) => (staffCompetencyTableRef = r)}
                columns={staffCompetencyTableCoumns}
                options={staffCompetencyTableOptions}
            />
            <ChangeStaffCompetency
                show={state.changeStaffCompetencyShow}
                onHide={() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
                staffID= {state.staffID}
                workflowName= {state.workflowName}
                competentTasks= {state.competentTasks}
                api={props.api}
                parentCallback = {handleCallback}
            />
        </>
        
    );
}

StaffCompetency.propTypes = {
    api: PropTypes.object.isRequired
};

export default StaffCompetency;

ChangeStaffCompetency is a react-bootstrap modal component which is used as a custom editor to edit the contents of the cell.

staffCompetencyTableRef works fine on the first render but it becomes null on rerendering; for instance when I open and close the ChangeStaffCompetency modal.

How would I resolve this?

Thanks

ANSWER

Answered 2022-Mar-24 at 09:50

I solved the issue by changing the type of my useRef variable (staffCompetencyTableRef) to const and used the property of const variables to do my work.

const StaffCompetency = (props) => {

    // State Handling
    const [state, dispatch] = useReducer(reducer, initialState);
    
    // Reference for the tabulator
    const staffCompetencyTableRef = useRef(null);

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        staffCompetencyTableRef.current.download("json", "RTP_Staff_Competencies.json");
    }

    /***
     * ALL OTHER CODE
     */

    return (
        <>
            <h3 className="text-center"> Staff Competency </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <ReactTabulator
                onRef={(r) => (staffCompetencyTableRef.current = r.current)}
                columns={staffCompetencyTableCoumns}
                options={staffCompetencyTableOptions}
            />
            <ChangeStaffCompetency
                show={state.changeStaffCompetencyShow}
                onHide={() => dispatch({ type: "changeStaffCompetencyShow", value: false })}
                staffID= {state.staffID}
                workflowName= {state.workflowName}
                competentTasks= {state.competentTasks}
                api={props.api}
                parentCallback = {handleCallback}
            />
        </>
    );
}

It kind of feels like a trick. If anyone knows a better approach, please do comment.

Thanks

Source https://stackoverflow.com/questions/71556230

QUESTION

Migrating from Moment to Luxon - (t) => moment(t).format('hh:mm') equivalent

Asked 2022-Mar-22 at 15:09

I'm migrating an old piece of code from Moment to Luxon and bumped into the function below:

export const TIME_FORMATTER = {
  HOUR: (t) => moment(t).format('hh:mm'),
  DAY: (t) => moment(t).format('M/DD'),
  HOUR_PERIOD: (t) => moment(t).format('hh:mm A'),
  DAY_HOUR_PERIOD: (t) => moment(t).format('hh:mm A M/DD'),
  SEC: (t) => moment(t).format('HH:mm:ss')
};

which gets called as follows:

export const getFormatterByTimeInterval = (timeInterval: number) => {
  if (timeInterval <= 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  else {
    return TIME_FORMATTER.DAY;
  }
}

My initial thought was to use the same call format with Luxon:


const TIME_FORMATTER_LUXON = {
  HOUR: (t) => DateTime.local(t).toFormat("hh:mm"),
  DAY: (t) => DateTime.local(t).toFormat("M/d"),
  HOUR_PERIOD: (t) => DateTime.local(t).toFormat("t"),
  DAY_HOUR_PERIOD: (t) => DateTime.local(t).toFormat("t M/d"),
  SEC: (t) => DateTime.local(t).toFormat("HH:mm:ss")
};

This gets called on another file const formatter = getFormatterByTimeInterval(timeInterval); but it's returning Invalid DateTime

Is this possible with Luxon? What can be the issue?

ANSWER

Answered 2022-Mar-22 at 15:04

It seems to me like your old code might have a few issues, so I want to at least address them before responding to your question:

The only function signature for moment which accepts a number argument is Unix Timestamp (milliseconds):

Similar to new Date(Number), you can create a moment by passing an integer value representing the number of milliseconds since the Unix Epoch (Jan 1 1970 12AM UTC).

const day = moment(1318781876406);

Note: ECMAScript calls this a "Time Value"

I'm not sure what the timeInterval parameter represents in your formatter resolver function:

function getFormatterByTimeInterval (timeInterval: number) {/* ... */}

but I'll ignore that for now. With that out of the way, let's look at the conditionals:

export const getFormatterByTimeInterval = (timeInterval: number) => {
  // This formats as time and date information
  if (timeInterval > 240) {
    return TIME_FORMATTER.DAY_HOUR_PERIOD;
  }
  // This formats as time-only information
  // Also, this will never match because any `timeInterval` value which is
  // greater than 480 is also greater than 240, so the first conditional above
  // will match and return before reaching this one
  else if (timeInterval > 480) {
    return TIME_FORMATTER.HOUR_PERIOD;
  }
  // Shorter than either of the above
  // This formats as date-only information
  else {
    return TIME_FORMATTER.DAY;
  }
}

I'm not sure how your program is supposed to work, but that doesn't seem like the intended behavior to me.

In regard to your question of conversion:

The Luxon equivalent for instantiation of a DateTime from a milliseconds number type is DateTime.fromMillis(). (You don't need to worry about using the local method because luxon uses your system's local timezone by default.)

In regard to the equivalent formatting options, they would be:

moment	luxon
`hh:mm`	`hh:mm`
`M/DD`	`L/dd`
`hh:mm A`	`hh:mm a`
`hh:mm A M/DD`	`hh:mm a L/dd`
`HH:mm:ss`	`HH:mm:ss`

Expressed as code, it looks like this:

import {DateTime} from 'luxon';

export const TIME_FORMATTER = {
  HOUR: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm'),
  DAY: (millis: number) => DateTime.fromMillis(millis).toFormat('L/dd'),
  HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
  DAY_HOUR_PERIOD: (millis: number) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
  SEC: (millis: number) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};

Then, a small refactor of your resolver:

type FormatterFn = (millis: number) => string;

export const getFormatterByTimeInterval = (timeInterval: number): FormatterFn => {
  let key: keyof typeof TIME_FORMATTER;
  // I'm still not sure about these conditionals,
  // but this order matches longest duration first
  if (timeInterval > 480) key = 'HOUR_PERIOD';
  else if (timeInterval > 240) key = 'DAY_HOUR_PERIOD';
  else key = 'DAY';
  return TIME_FORMATTER[key];
};

And you can check it like this:

// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();

// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
  const formatter = getFormatterByTimeInterval(timeInterval);
  console.log(formatter(millis));
}

Code in the TypeScript Playground

Demo of compiled JavaScript from the TS playground link:

<script type="module">

import {DateTime} from 'https://unpkg.com/luxon@2.3.1/src/luxon.js';

export const TIME_FORMATTER = {
    HOUR: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm'),
    DAY: (millis) => DateTime.fromMillis(millis).toFormat('L/dd'),
    HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a'),
    DAY_HOUR_PERIOD: (millis) => DateTime.fromMillis(millis).toFormat('hh:mm a L/dd'),
    SEC: (millis) => DateTime.fromMillis(millis).toFormat('HH:mm:ss'),
};
export const getFormatterByTimeInterval = (timeInterval) => {
    let key;
    // I'm still not sure about these conditionals,
    // but this order matches longest duration first
    if (timeInterval > 480)
        key = 'HOUR_PERIOD';
    else if (timeInterval > 240)
        key = 'DAY_HOUR_PERIOD';
    else
        key = 'DAY';
    return TIME_FORMATTER[key];
};
// The time you asked this question
const millis = DateTime.fromISO('2022-03-21T21:02:03Z').toMillis();
// Check each conditional range:
for (const timeInterval of [500, 300, 100]) {
    const formatter = getFormatterByTimeInterval(timeInterval);
    console.log(timeInterval, formatter(millis));
}

</script>

Source https://stackoverflow.com/questions/71564070

QUESTION

Chart.js sum y values depending on time unit

Asked 2022-Mar-03 at 07:21

New to Chart.js, I was wondering if there is a built in method to sum y values depending on time unit.
Asking here after a lot of search in the docs.

For now, the bar for March shows 20 and the bar for June shows 10.
I want to have 25 for March and 15 for June, so to sum y for the same month.

const ctx = document.getElementById("tests-chart")
const testsChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: 'Dataset 1',
                data: [
                    { x: "24/03/2022", y: 20 },
                    { x: "25/03/2022", y: 5 },
                    { x: "24/06/2022", y: 10 },
                    { x: "25/06/2022", y: 5 },
                ],
                backgroundColor: 'rgb(255, 99, 132)',
              },
        ],
    },
    options: {
        scales: {
            x: {
                type: "time",
                time: {
                    parser: "dd/MM/yyyy",
                    unit: "month",
                    // Luxon format string
                    tooltipFormat: "MM",
                    round: 'month'
                },
            },
        },
    },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>
<div>
  <canvas id="tests-chart"></canvas>
</div>

ANSWER

Answered 2022-Mar-03 at 07:21

You can manipulate your dataset as mentioned below and achieve your expected output.

const ctx = document.getElementById("tests-chart");
const data =[
  { x: "24/03/2022", y: 20 },
  { x: "25/03/2022", y: 5 },
  { x: "24/06/2022", y: 10 },
  { x: "25/06/2022", y: 5 }
 ];

let updatedData =[];
let tempDateCollection =[];

data.map((yData , index)=> {

  const formatedDate = moment(yData.x, "DD/MM/YYYY").format('MMM/YYYY');

  if(tempDateCollection.includes(formatedDate)){
    const index = tempDateCollection.indexOf(formatedDate);
    const element = updatedData[index];
    updatedData[index] = {...element, y: element.y + yData.y}
  } else{
    tempDateCollection.push(formatedDate);
    updatedData.push(yData);
  }
  
})

const testsChart = new Chart(ctx, {
    type: "bar",
    data: {
        datasets: [
            {
                label: 'Dataset 1',
                data:updatedData,
                backgroundColor: 'rgb(255, 99, 132)',
              },
        ],
    },
    options: {
        scales: {
            x: {
                type: "time",
                time: {
                    parser: "dd/MM/yyyy",
                    unit: "month",
                    // Luxon format string
                    tooltipFormat: "MM",
                    round: 'month'
                },
            },
        },
    },
})

<script type = "text/JavaScript" src = " https://MomentJS.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon@2.3.1/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.1.0/dist/chartjs-adapter-luxon.min.js"></script>

<div>
  <canvas id="tests-chart"></canvas>
</div>

Source https://stackoverflow.com/questions/71332540

QUESTION

How to make 'ref' work for ReactTabulator

Asked 2022-Feb-25 at 07:38

I am using Tabulator with React using the react-tabulator module.

I'm trying to use ref for the table component and use it for other actions like downloading data or whatever it may be.

FetchWorkloads.jsx

import React, { useState, useEffect, Suspense } from 'react';
import PropTypes from 'prop-types';

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import {Button } from 'react-bootstrap';
import { ReactTabulator, reactFormatter } from "react-tabulator";

const luxon = require('luxon');
window.DateTime = luxon.DateTime; 

const FetchWorkloads = (props) => {
    // Possible Task Status Options (for display purpose)
    const taskStatusOptions = [{id: "N", label: "New"}, {id: "P", label: "In Progress"}, {id: "C", label: "Completed"}];

    // Variable to hold the workloads data
    const [workloadData, setWorkloadData] = useState([]);

    const workloadsTableRef = React.createRef();

    // Action to download workloads data as 'JSON'
    const downloadAsJSON = () => {
        workloadsTableRef.current.table.download("json", "RTP_Workloads.json")
    }

    // Action to download workloads data as 'CSV'
    const downloadAsCSV = () =>  {
       // action
    }

    // Action to download workloads data as 'PDF'
    const downloadAsPDF = () =>  {
       // action
    }
    
    // Fetch the workloads from DB
    const getWorkloadData = async() => {
        // API Call
    }

    // Workload Table Column Setup
    const workloadsTableCoumns = [
        // column setup
    ];

    // Workload Table Options Setup
    const workloadsTableOptions = {
            index:"id",
            layout:"fitColumns",
            pagination: true,
            paginationSize: 20,
            placeholder:"No Workload Available",
    };

    // useEffect call the actions inside it after rendering
    useEffect(() => {
        getWorkloadData();
    },[]);

    return (
        <>
            <h3 className="text-center"> Radiotherapy Physics Workloads </h3>
            <div>
                <Button variant="dark" onClick={() => downloadAsJSON()}>Download JSON</Button>{' '}
                <Button variant="dark" onClick={() => downloadAsCSV()}>Download CSV</Button>{' '}
                <Button variant="dark" onClick={() => downloadAsPDF()}>Download PDF</Button>
            </div>
            <div style={{clear: 'both'}}></div>
            <br></br>
            <Suspense fallback={<p>Fetching workloads...</p>}>
                <ReactTabulator
                    ref={workloadsTableRef}
                    columns={workloadsTableCoumns} 
                    data={workloadData} 
                    options={workloadsTableOptions}
                />
            </Suspense>
            
        </>
        
    );
}

FetchWorkloads.propTypes = {
    api: PropTypes.object.isRequired
};

export default FetchWorkloads;

My Issue:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `FetchWorkloads`.

I believe it will be easier if its class but I need this to be a functional component.

I think I'm missing something basic but can't comprehend why as I'm new to React.

How do I get this ref to work?

Thanks

ANSWER

Answered 2022-Feb-25 at 07:38

@DoubleH's answer:

import React, { useState, useEffect, Suspense, useRef } from "react";
import PropTypes from "prop-types";

import "react-tabulator/lib/styles.css"; // default theme
import "react-tabulator/css/tabulator_midnight.min.css";

import { Button } from "react-bootstrap";
import { ReactTabulator } from "react-tabulator";

const luxon = require("luxon");
window.DateTime = luxon.DateTime;

const FetchWorkloads = (props) => {
  // Possible Task Status Options (for display purpose)
  const taskStatusOptions = [
    { id: "N", label: "New" },
    { id: "P", label: "In Progress" },
    { id: "C", label: "Completed" }
  ];

  // Variable to hold the workloads data
  const [workloadData, setWorkloadData] = useState([]);

  let workloadsTableRef = useRef(null);

  // Action to download workloads data as 'JSON'
  const downloadAsJSON = () => {
    workloadsTableRef.current.download("json", "RTP_Workloads.json");
  };

  // Action to download workloads data as 'CSV'
  const downloadAsCSV = () => {
    // action
  };

  // Action to download workloads data as 'PDF'
  const downloadAsPDF = () => {
    // action
  };

  // Fetch the workloads from DB
  const getWorkloadData = async () => {
    // API Call
  };

  // Workload Table Column Setup
  const workloadsTableCoumns = [
    // column setup
  ];

  // Workload Table Options Setup
  const workloadsTableOptions = {
    index: "id",
    layout: "fitColumns",
    pagination: true,
    paginationSize: 20,
    placeholder: "No Workload Available"
  };

  // useEffect call the actions inside it after rendering
  useEffect(() => {
    getWorkloadData();
  }, []);

  return (
    <>
      <h3 className="text-center"> Radiotherapy Physics Workloads </h3>
      <div>
        <Button variant="dark" onClick={() => downloadAsJSON()}>
          Download JSON
        </Button>{" "}
        <Button variant="dark" onClick={() => downloadAsCSV()}>
          Download CSV
        </Button>{" "}
        <Button variant="dark" onClick={() => downloadAsPDF()}>
          Download PDF
        </Button>
      </div>
      <div style={{ clear: "both" }}></div>
      <br></br>
      <Suspense fallback={<p>Fetching workloads...</p>}>
        <ReactTabulator
          onRef={(r) => (workloadsTableRef = r)}
          columns={workloadsTableCoumns}
          data={workloadData}
          options={workloadsTableOptions}
        />
      </Suspense>
    </>
  );
};

FetchWorkloads.propTypes = {
  api: PropTypes.object
};

export default FetchWorkloads;

ref assignment has been corrected.

Source https://stackoverflow.com/questions/71221295

QUESTION

Date Unit test passed locally but failed in Gitlab CD/CI pipeline

Asked 2022-Feb-13 at 08:23

For date validation, I used luxon for my app. For each function I have made unit test. My unit test passed locally but when I deployed my code in gitlab, Most of my test failed. The expected result is so different than received. I don't understand what's the wrong. This my CD/CI pipeline images. Image-1, image-2, Image-3 and there are more. Basically all my test failed

My all test passed in code-sandbox

These are my all functions:

import {
  DateTime
} from 'luxon'

export const DEFAULT_DATE_FORMAT = 'd.M.yyyy'
export const SHORT_TIME_FORMAT = 'HH:mm'
export const ISO_DATE_FORMAT = 'yyyy-MM-dd'
export const DATE_TIME_FORMAT = 'd.M.yyyy HH:mm'
export const DATE_MONTH_FORMAT = 'd.M'

export const WEEKDAYS = [
  'SUNDAY',
  'MONDAY',
  'TUESDAY',
  'WEDNESDAY',
  'THURSDAY',
  'FRIDAY',
  'SATURDAY',
]

export const dateToStrings = (date: string | number | Date): DateTime =>
  DateTime.fromISO(new Date(date).toISOString())

export const formatDateTime = (date: string | number | Date): string =>
  dateToStrings(date).toFormat(DATE_TIME_FORMAT)
export const formatDateMonthYear = (date: string | number | Date): string =>
  dateToStrings(date).toFormat(DEFAULT_DATE_FORMAT)

export const formatTime = (date: string | number | Date): string =>
  dateToStrings(date).toFormat(SHORT_TIME_FORMAT)

export const NextDayFormatYearMonthDate = (date: string | number | Date): string =>
  dateToStrings(date).plus({
    days: 1
  }).toFormat(ISO_DATE_FORMAT)

export const PreviousDayFormatYearMonthDate = (date: string | number | Date): string =>
  dateToStrings(date).plus({
    days: -1
  }).toFormat(ISO_DATE_FORMAT)

export const dateDifference = (date: string | number | Date): number => {
  const diff = dateToStrings(date).diff(DateTime.now(), 'days').toObject()

  return Math.abs(Math.ceil(diff.days as number))
}

export const formatYearMonthDate = (date: Date | string | undefined): string => {
  if (!date) {
    //  if date is undefined, return empty string
    return ''
  } else {
    return dateToStrings(date).toFormat(ISO_DATE_FORMAT)
  }
}
export const weekNumber = (date: string | Date): number =>
  dateToStrings(date).startOf('week').weekNumber

export const nextWeek = (date: string | Date): string =>
  dateToStrings(date).startOf('week').plus({
    days: 7
  }).toFormat(ISO_DATE_FORMAT)

export const previousWeek = (date: string | Date): string =>
  dateToStrings(date).startOf('week').plus({
    days: -7
  }).toFormat(ISO_DATE_FORMAT)
export const firstDateOfWeek = (date: string | Date): string =>
  dateToStrings(date).startOf('week').toFormat(ISO_DATE_FORMAT)

export const lastDateOfWeek = (date: string | Date): string =>
  dateToStrings(date).startOf('week').plus({
    days: 6
  }).toFormat(ISO_DATE_FORMAT)

export const firstMondayOfTheWeekWithGMT = (date: Date): Date =>
  dateToStrings(date).startOf('week').toJSDate()

export const formatDateMonth = (date: string | Date): string =>
  dateToStrings(date).toFormat(DATE_MONTH_FORMAT)

export const shortDateString = (date: Date): string => {
  const shortForm = dateToStrings(date).setLocale('fi').toFormat('EEE')
  return shortForm.length > 1 ? `${shortForm.charAt(0).toUpperCase()}${shortForm.slice(1)}` : ''
}

export const hasSameDay = (date1: Date, date2: Date): boolean =>
  dateToStrings(date1).hasSame(dateToStrings(date2), 'day')

export const isToday = (date: string | number | Date): boolean => {
  return dateToStrings(date).toISODate() === DateTime.local().toISODate()
}

export const compareDays = (
  date1: Date | string | number,
  date2: Date | string | number,
): number => {
  const compareWithDay = dateToStrings(date1).diff(dateToStrings(date2), ['days']).toObject()

  return Math.abs(Math.ceil(compareWithDay.days as number))
}

This is my all tests

import {
  formatDateTime,
  formatDateMonthYear,
  formatTime,
  NextDayFormatYearMonthDate,
  PreviousDayFormatYearMonthDate,
  dateDifference,
  formatYearMonthDate,
  weekNumber,
  nextWeek,
  previousWeek,
  firstDateOfWeek,
  lastDateOfWeek,
  formatDateMonth,
  shortDateString,
  compareDays,
  DATE_MONTH_FORMAT,
  DEFAULT_DATE_FORMAT,
  SHORT_TIME_FORMAT,
  ISO_DATE_FORMAT,
  DATE_TIME_FORMAT,
} from 'utils/date'
import { DateTime } from 'luxon'

const toDateString = 'Mon Feb 07 2022 00:00:00 GMT+0200 (Eastern European Standard Time)'
const toISOString = '2018-05-01T13:44:48.708709Z'
const today = new Date()
const tomorrow = new Date(today.getTime() + 24 * 60 * 60 * 1000)
const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000)

describe('formatDateTime', () => {
  it('Should return format date time when date is string', () => {
    expect(formatDateTime('2022-02-11T06:44:57+00:00')).toBe('7.2.2022 00:00')
  })

  it('Should return format date time when date is toISOString', () => {
    expect(formatDateTime(toISOString)).toBe('1.5.2018 16:44')
  })
  it('Should return format date time when date is today', () => {
    expect(formatDateTime(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).toFormat(DATE_TIME_FORMAT),
    )
  })
})

describe('formatDateMonthYear', () => {
  it('Should return format date when date is string', () => {
    expect(formatDateMonthYear(toDateString)).toBe('7.2.2022')
  })

  it('Should return format date when date is ISO String', () => {
    expect(formatDateMonthYear(toISOString)).toBe('1.5.2018')
  })

  it('Should return format date when date is today', () => {
    expect(formatDateMonthYear(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).toFormat(DEFAULT_DATE_FORMAT),
    )
  })
})

describe('formatTime', () => {
  it('Should return 00:00 when there is no time', () => {
    expect(formatTime(toDateString)).toBe('00:00')
  })

  it('Should return format time', () => {
    expect(formatTime(toISOString)).toBe('16:44')
  })

  it('Should return format time when date is today', () => {
    expect(formatTime(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).toFormat(SHORT_TIME_FORMAT),
    )
  })
})

describe('NextDayFormatYearMonthDate ', () => {
  it('Should return next day format year when date is string', () => {
    expect(NextDayFormatYearMonthDate(toDateString)).toBe('2022-02-08')
  })

  it('Should return next day format year when date is ISOString', () => {
    expect(NextDayFormatYearMonthDate(toISOString)).toBe('2018-05-02')
  })
  it('Should return next day format year when date is today', () => {
    expect(NextDayFormatYearMonthDate(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).plus({ days: 1 }).toFormat(ISO_DATE_FORMAT),
    )
  })
})

describe('PreviousDayFormatYearMonthDate', () => {
  it('Should return next day format year when date is string', () => {
    expect(PreviousDayFormatYearMonthDate(toDateString)).toBe('2022-02-06')
  })

  it('Should return next day format year when date is ISOString', () => {
    expect(PreviousDayFormatYearMonthDate(toISOString)).toBe('2018-04-30')
  })
  it('Should return next day format year when date is today', () => {
    expect(PreviousDayFormatYearMonthDate(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).plus({ days: -1 }).toFormat(ISO_DATE_FORMAT),
    )
  })
})

describe('dateDifference', () => {
  it('Should return 0 when date is today', () => {
    expect(dateDifference(today)).toBe(0)
  })

  it('Should return 1 when date is not today', () => {
    expect(dateDifference(tomorrow)).toBe(1)
  })

  it('Should return 1 when date is not today', () => {
    expect(dateDifference(yesterday)).toBe(1)
  })
})

describe('formatYearMonthDate', () => {
  it('Should return format date when date is string', () => {
    expect(formatYearMonthDate(toDateString)).toBe('2022-02-07')
  })

  it('Should return format date when date is ISO String', () => {
    expect(formatYearMonthDate(toISOString)).toBe('2018-05-01')
  })

  it('Should return format date when date is today', () => {
    expect(formatYearMonthDate(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).toFormat(ISO_DATE_FORMAT),
    )
  })

  it('Should return empty string when date is undefined', () => {
    expect(formatYearMonthDate(undefined)).toBe('')
  })
})

describe('weekNumber', () => {
  it('Should return week number when date is string', () => {
    expect(weekNumber(toDateString)).toBe(6)
  })

  it('Should return week number when date is ISO String', () => {
    expect(weekNumber(toISOString)).toBe(18)
  })

  it('Should return week number when date is today', () => {
    expect(weekNumber(today)).toBe(DateTime.fromISO(new Date().toISOString()).weekNumber)
  })
})

describe('nextWeek', () => {
  it('Should return next week date when date is string', () => {
    expect(nextWeek(toDateString)).toBe('2022-02-14')
  })

  it('Should return next week date when date is ISO String', () => {
    expect(nextWeek(toISOString)).toBe('2018-05-07')
  })
})

describe('previousWeek', () => {
  it('Should return previous week date when date is string', () => {
    expect(previousWeek(toDateString)).toBe('2022-01-31')
  })

  it('Should return previous week date when date is ISO String', () => {
    expect(previousWeek(toISOString)).toBe('2018-04-23')
  })
})

describe('firstDateOfWeek', () => {
  it('Should return first date of the week when date is string', () => {
    expect(firstDateOfWeek(toDateString)).toBe('2022-02-07')
  })

  it('Should return first date of the week when date is ISO String', () => {
    expect(firstDateOfWeek(toISOString)).toBe('2018-04-30')
  })
})

describe('lastDateOfWeek', () => {
  it('Should return first date of the week when date is string', () => {
    expect(lastDateOfWeek(toDateString)).toBe('2022-02-13')
  })

  it('Should return first date of the week when date is ISO String', () => {
    expect(lastDateOfWeek(toISOString)).toBe('2018-05-06')
  })
})

describe('formatDateMonth', () => {
  it('Should return format date month when date is string', () => {
    expect(formatDateMonth(toDateString)).toBe('7.2')
  })

  it('Should return format date month when date is ISO String', () => {
    expect(formatDateMonth(toISOString)).toBe('1.5')
  })

  it('Should return format date month when date is today', () => {
    expect(formatDateMonth(today)).toBe(
      DateTime.fromISO(new Date().toISOString()).toFormat(DATE_MONTH_FORMAT),
    )
  })
})

describe('shortDateString', () => {
  it('Should return first two letters Finnish weekdays when date is string', () => {
    expect(shortDateString(new Date(toDateString))).toBe('Ma')
  })

  it('Should return first two letters Finnish weekdays when date is ISO String', () => {
    expect(shortDateString(new Date(toISOString))).toBe('Ti')
  })
})

describe('compareDays', () => {
  it('Should return 0 if the dates are same', () => {
    expect(compareDays(new Date(toDateString), new Date(toDateString))).toBe(0)
  })

  it('Should return 0 if the dates are same', () => {
    expect(compareDays(new Date(toDateString), new Date(toISOString))).toBe(1378)
  })

  it('Should return 0 if the dates are string', () => {
    expect(compareDays(toDateString, toISOString)).toBe(1378)
  })
})

ANSWER

Answered 2022-Feb-13 at 08:23

The difference has to do with the timezone of your local computer and the timezone of the GitLab runner. The GitLab runners use UTC timezone.

Take this case for example:

const toDateString = 'Mon Feb 07 2022 00:00:00 GMT+0200 (Eastern European Standard Time)'
// ...
describe('formatTime', () => {
  it('Should return 00:00 when there is no time', () => {
    expect(formatTime(toDateString)).toBe('00:00')
  })

In your unit test results:

Expected: "00:00"
Received: "22:00"

This would pass if your local timezone is UTC+2, but would fail if your timezone is UTC. Mon Feb 07 2022 00:00:00 GMT+0200 is Sun Feb 06 2022 22:00:00 in UTC time.

From the luxon docs: (emphasis added)

A DateTime comprises of:

[...]
A time zone. Each instance is considered in the context of a specific zone (by default the local system's zone).
[...]

You'll probably want to normalize your tests to use a particular timezone. See this question for hints on how to change the timezone of the datetime objects.

Source https://stackoverflow.com/questions/71091707

Community Discussions, Code Snippets contain sources that include Stack Exchange Network