⚡ (dateInput) Add format option and improve parsing

Use date-fns for custom format and make sure dates are timezone independants

Closes #533, closes #592

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "Javascript library to display typebots on your website",
   "type": "module",
   "main": "dist/index.js",

packages/embeds/js/src/features/blocks/inputs/date/components/DateForm.tsx

@@ -2,7 +2,6 @@ import { SendButton } from '@/components/SendButton'
 import { InputSubmitContent } from '@/types'
 import type { DateInputOptions } from '@typebot.io/schemas'
 import { createSignal } from 'solid-js'
-import { parseReadableDate } from '../utils/parseReadableDate'
 
 type Props = {
   onSubmit: (inputValue: InputSubmitContent) => void
@@ -24,11 +23,9 @@ export const DateForm = (props: Props) => {
             if (inputValues().from === '' && inputValues().to === '') return
             e.preventDefault()
             props.onSubmit({
-              value: parseReadableDate({
-                ...inputValues(),
-                hasTime: props.options?.hasTime,
-                isRange: props.options?.isRange,
-              }),
+              value: `${inputValues().from}${
+                props.options?.isRange ? ` to ${inputValues().to}` : ''
+              }`,
             })
           }}
         >

packages/embeds/js/src/features/blocks/inputs/date/utils/parseReadableDate.ts

@@ -1,27 +0,0 @@
-export const parseReadableDate = ({
-  from,
-  to,
-  hasTime,
-  isRange,
-}: {
-  from: string
-  to: string
-  hasTime?: boolean
-  isRange?: boolean
-}) => {
-  const currentLocale = window.navigator.language
-  const formatOptions: Intl.DateTimeFormatOptions = {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-    hour: hasTime ? '2-digit' : undefined,
-    minute: hasTime ? '2-digit' : undefined,
-  }
-  const fromReadable = new Date(
-    hasTime ? from : from.replace(/-/g, '/')
-  ).toLocaleString(currentLocale, formatOptions)
-  const toReadable = new Date(
-    hasTime ? to : to.replace(/-/g, '/')
-  ).toLocaleString(currentLocale, formatOptions)
-  return `${fromReadable}${isRange ? ` to ${toReadable}` : ''}`
-}

packages/embeds/nextjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/nextjs",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "Convenient library to display typebots on your Next.js website",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "description": "Convenient library to display typebots on your React app",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",