@startupjs-ui/date-time-picker 0.1.3 → 0.1.7

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.1.7](https://github.com/startupjs/startupjs-ui/compare/v0.1.6...v0.1.7) (2026-01-06)
+
+
+### Bug Fixes
+
+* **date-time-picker:** use async import for 'moment-timezone' since it's too large to go into the core bundle by default ([0de6908](https://github.com/startupjs/startupjs-ui/commit/0de690895a6870d4b5bd4a8a6744d9dc61547c17))
+
+
+
+
+
+## [0.1.5](https://github.com/startupjs/startupjs-ui/compare/v0.1.4...v0.1.5) (2025-12-29)
+
+**Note:** Version bump only for package @startupjs-ui/date-time-picker
+
+
+
+
+
 ## [0.1.3](https://github.com/startupjs/startupjs-ui/compare/v0.1.2...v0.1.3) (2025-12-29)
 
 **Note:** Version bump only for package @startupjs-ui/date-time-picker

package/components/Calendar/Days/index.tsx

@@ -2,7 +2,7 @@ import { useMemo, useCallback, type ReactNode } from 'react'
 import { pug, observer } from 'startupjs'
 import Span from '@startupjs-ui/span'
 import Div from '@startupjs-ui/div'
-import moment from 'moment-timezone'
+import { useMoment } from '../../../helpers'
 import './index.cssx.styl'
 
 interface DaysProps {
@@ -28,10 +28,11 @@ function Days ({
   range,
   onChangeDate
 }: DaysProps): ReactNode {
+  const moment = useMoment()
   const weekdaysShort = useMemo(() => {
     const data = (moment
       .tz(uiDate, timezone)
-      .locale(exactLocale) as any)
+      .locale(exactLocale))
       ._locale
       ._weekdaysShort
 

package/components/Calendar/Header/index.tsx

@@ -9,7 +9,7 @@ import Span from '@startupjs-ui/span'
 import { faAngleLeft } from '@fortawesome/free-solid-svg-icons/faAngleLeft'
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons/faAngleRight'
 import { faCaretDown } from '@fortawesome/free-solid-svg-icons/faCaretDown'
-import moment from 'moment-timezone'
+import { useMoment } from '../../../helpers'
 import STYLES from './index.cssx.styl'
 
 const yearsItemStyle = STYLES['years-item']
@@ -32,6 +32,7 @@ function Header ({
   maxDate,
   $uiDate
 }: HeaderProps): ReactNode {
+  const moment = useMoment()
   const monthName = moment.tz(uiDate, timezone).locale(exactLocale).format('MMM')
 
   const onChangeMonth = useCallback((value: number) => {
@@ -92,6 +93,7 @@ const Years = observer(function YearsComponent ({
   timezone,
   $uiDate
 }: YearsProps): ReactNode {
+  const moment = useMoment()
   const $visible = $(false)
   const minYear = minDate ? moment.tz(minDate, timezone).year() : 1950
   const maxYear = maxDate ? moment.tz(maxDate, timezone).year() : 2050

package/components/Calendar/index.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode } from 'react'
 import { pug, observer, $ } from 'startupjs'
 import Div from '@startupjs-ui/div'
-import moment from 'moment-timezone'
+import { useMoment } from '../../helpers'
 import Header from './Header'
 import Days from './Days'
 
@@ -28,6 +28,7 @@ function Calendar ({
   testID,
   onChangeDate
 }: CalendarProps): ReactNode {
+  const moment = useMoment()
   const $uiDate = $(+moment(date).seconds(0).milliseconds(0))
 
   return pug`

package/components/TimeSelect/index.tsx

@@ -11,7 +11,7 @@ import { pug, observer } from 'startupjs'
 import Div from '@startupjs-ui/div'
 import FlatList from '@startupjs-ui/flat-list'
 import Span from '@startupjs-ui/span'
-import moment from 'moment-timezone'
+import { useMoment } from '../../helpers'
 import STYLES from './index.cssx.styl'
 
 export interface TimeSelectRef {
@@ -42,13 +42,14 @@ function TimeSelect ({
   onChangeDate,
   ref
 }: TimeSelectProps): ReactNode {
+  const moment = useMoment()
   const refScroll = useRef<any>(null)
 
   // we are looking for 'a' in current locale
   // to figure out whether to apply 12 hour format
   const _is24Hour = useMemo(() => {
     if (is24Hour != null) return is24Hour
-    const lt = (moment().locale(exactLocale) as any)._locale._longDateFormat.LT
+    const lt = (moment().locale(exactLocale))._locale._longDateFormat.LT
     return !/a/i.test(lt)
   }, [is24Hour, exactLocale])
 
@@ -60,7 +61,7 @@ function TimeSelect ({
     const intervalTimestamp = timeInterval * 60 * 1000
 
     const format = _is24Hour
-      ? (moment.tz(date, timezone).locale(exactLocale) as any)._locale._longDateFormat.LT
+      ? (moment.tz(date, timezone).locale(exactLocale))._locale._longDateFormat.LT
       : 'hh:mm A'
 
     while (currentTimestamp < endTimestamp) {

package/helpers/index.ts

@@ -1 +1,2 @@
 export { default as getLocale } from './getLocale'
+export { default as useMoment } from './useMoment'

package/helpers/useMoment.ts

@@ -0,0 +1,12 @@
+import { use } from 'react'
+
+let momentPromise: any
+
+const loadMoment = (): Promise<any> => { // eslint-disable-line @typescript-eslint/promise-function-async
+  if (!momentPromise) momentPromise = import('moment-timezone').then(m => m.default)
+  return momentPromise
+}
+
+export default function useMoment () {
+  return use(loadMoment())
+}

package/index.tsx

@@ -19,8 +19,7 @@ import TextInput, { type UITextInputProps } from '@startupjs-ui/text-input'
 import AbstractPopover from '@startupjs-ui/abstract-popover'
 import Drawer from '@startupjs-ui/drawer'
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle'
-import moment from 'moment-timezone'
-import { getLocale } from './helpers'
+import { getLocale, useMoment } from './helpers'
 import { Calendar, TimeSelect } from './components'
 import './index.cssx.styl'
 
@@ -101,7 +100,7 @@ function DateTimePicker ({
   renderInput,
   locale,
   range,
-  timezone = moment.tz.guess(),
+  timezone,
   disabledDays = [],
   date,
   disabled,
@@ -121,6 +120,8 @@ function DateTimePicker ({
   ref,
   ...props
 }: DateTimePickerProps): ReactNode {
+  const moment = useMoment()
+  timezone ??= moment.tz.guess()
   const media: any = useMedia()
   const [textInput, setTextInput] = useState('')
   const refTimeSelect = useRef<any>(null)
@@ -239,7 +240,7 @@ function DateTimePicker ({
   let { onChangeVisible } = bindProps
   ;({ visible, onChangeVisible } = useBind({ $visible, visible, onChangeVisible }) as any)
 
-  const [tempDate, setTempDate] = useTempDate({ visible: !!visible, date, timezone })
+  const [tempDate, setTempDate] = useTempDate({ visible: !!visible, date, timezone: timezone as any, moment })
 
   useEffect(() => {
     // Prevent crashes when custom renderer passed via props
@@ -260,12 +261,12 @@ function DateTimePicker ({
   const _dateFormat = useMemo(() => {
     if (dateFormat) return dateFormat
     if (mode === 'datetime') {
-      return (moment().locale(exactLocale) as any)._locale._longDateFormat.L + ' ' +
-      (moment().locale(exactLocale) as any)._locale._longDateFormat.LT
+      return (moment().locale(exactLocale))._locale._longDateFormat.L + ' ' +
+      (moment().locale(exactLocale))._locale._longDateFormat.LT
     }
 
-    if (mode === 'date') return (moment().locale(exactLocale) as any)._locale._longDateFormat.L
-    if (mode === 'time') return (moment().locale(exactLocale) as any)._locale._longDateFormat.LT
+    if (mode === 'date') return (moment().locale(exactLocale))._locale._longDateFormat.L
+    if (mode === 'time') return (moment().locale(exactLocale))._locale._longDateFormat.LT
   }, [mode, dateFormat, exactLocale])
 
   useEffect(() => {
@@ -462,23 +463,25 @@ function DateTimePicker ({
 function useTempDate ({
   visible,
   date,
-  timezone
+  timezone,
+  moment
 }: {
   visible: boolean
   date?: number
   timezone: string
+  moment: any
 }) {
-  const [tempDate, setTempDate] = useState(getTempDate(date, timezone))
+  const [tempDate, setTempDate] = useState(getTempDate(date, timezone, moment))
 
   useEffect(() => {
-    const tempDate = getTempDate(date, timezone)
+    const tempDate = getTempDate(date, timezone, moment)
     setTempDate(tempDate)
-  }, [visible, date, timezone])
+  }, [visible, date, timezone, moment])
 
   return [tempDate, setTempDate] as const
 }
 
-function getTempDate (date: number | undefined, timezone: string) {
+function getTempDate (date: number | undefined, timezone: string, moment: any) {
   return date
     ? new Date(+moment.tz(date, timezone).seconds(0).milliseconds(0))
     : new Date()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startupjs-ui/date-time-picker",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "publishConfig": {
     "access": "public"
   },
@@ -10,17 +10,17 @@
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
     "@react-native-community/datetimepicker": "^8.4.4",
-    "@startupjs-ui/abstract-popover": "^0.1.3",
-    "@startupjs-ui/button": "^0.1.3",
-    "@startupjs-ui/core": "^0.1.3",
-    "@startupjs-ui/div": "^0.1.3",
-    "@startupjs-ui/divider": "^0.1.3",
-    "@startupjs-ui/drawer": "^0.1.3",
-    "@startupjs-ui/flat-list": "^0.1.3",
-    "@startupjs-ui/icon": "^0.1.3",
-    "@startupjs-ui/popover": "^0.1.3",
-    "@startupjs-ui/span": "^0.1.3",
-    "@startupjs-ui/text-input": "^0.1.3",
+    "@startupjs-ui/abstract-popover": "^0.1.5",
+    "@startupjs-ui/button": "^0.1.5",
+    "@startupjs-ui/core": "^0.1.5",
+    "@startupjs-ui/div": "^0.1.5",
+    "@startupjs-ui/divider": "^0.1.5",
+    "@startupjs-ui/drawer": "^0.1.5",
+    "@startupjs-ui/flat-list": "^0.1.5",
+    "@startupjs-ui/icon": "^0.1.5",
+    "@startupjs-ui/popover": "^0.1.5",
+    "@startupjs-ui/span": "^0.1.5",
+    "@startupjs-ui/text-input": "^0.1.5",
     "moment-timezone": "^0.5.31",
     "react-native-safe-area-context": "^5.6.0"
   },
@@ -29,5 +29,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "fd964ebc3892d3dd0a6c85438c0af619cc50c3f0"
+  "gitHead": "9c2c4a204f9f0b6650f02f6d4948780cced7cd8d"
 }