Day.js | DECODE

Posted on 2024/06/15, 12:29 PM By admin22

JavaScriptで時間を扱うライブラリ、Day.jsをためしてみました。
時間操作は面倒なので、一つ使えるものを用意しておくと便利です。
ここでは、時間の比較やmuiのpickerもつかって演算も試しました。
node.js でも使えます。

参考） https://day.js.org/docs/en/installation/installation

'use client'

import * as React from 'react';
import dayjs, { Dayjs } from 'dayjs';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

export default function ReferenceDateExplicitDateTimePicker() {
  const [value, setValue] = React.useState<Dayjs | null>(null);

  const d1 = dayjs('2024-06-01T9:00')
  const d2 = dayjs('2024-06-01T9:10')
  const a = d1.isAfter(d2) 
  const b = d1.isBefore(d2) 
  console.log('after:', a, 'before:', b)
  const now = dayjs()
  console.log('now:', now)

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <Stack spacing={2} sx={{ minWidth: 305 }}>
        <DateTimePicker
          value={value}
          onChange={setValue}
          referenceDate={dayjs()}
        />
        <Typography>
          Stored value: {value == null ? 'null' : value.format()}
        </Typography>

        <Typography>
          {value == null ? 'null' : value.add(7, 'day').format('YYYY/MM/DD HH:mm:ss')}
        </Typography>

        <Typography>
          {value == null ? 'null' : value.add(dayjs.duration({'days':1, 'hours':1})).format('YYYY/MM/DD HH:mm:ss')}
        </Typography>

      </Stack>
    </LocalizationProvider>
  );
}

'use client'

import * as React from 'react';

import dayjs, { Dayjs } from 'dayjs';

import Stack from '@mui/material/Stack';

import Typography from '@mui/material/Typography';

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';

import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';

import duration from 'dayjs/plugin/duration'

dayjs.extend(duration)

export default function ReferenceDateExplicitDateTimePicker() {

const [value, setValue] = React.useState<Dayjs | null>(null);

const d1 = dayjs('2024-06-01T9:00')

const d2 = dayjs('2024-06-01T9:10')

const a = d1.isAfter(d2)

const b = d1.isBefore(d2)

console.log('after:', a, 'before:', b)

const now = dayjs()

console.log('now:', now)

return (

<DateTimePicker

value={value}

onChange={setValue}

referenceDate={dayjs()}

Stored value: {value == null ? 'null' : value.format()}

</Typography>

{value == null ? 'null' : value.add(7, 'day').format('YYYY/MM/DD HH:mm:ss')}

</Typography>

{value == null ? 'null' : value.add(dayjs.duration({'days':1, 'hours':1})).format('YYYY/MM/DD HH:mm:ss')}

</Typography>

</Stack>

</LocalizationProvider>

);

}

TimeZoneは自動で変換されますが、外部APIなどと連携するときは、明示的に指定したほうがいいときもありあす。

About admin22

Categories: 未分類

About admin22

Recent Posts

Tag

Links

Archive