skip to Main Content

I am using a datetime picker from svelte strap (https://sveltestrap.js.org/iframe.html?id=components–inputs&viewMode=story) which outputs a date time string in the form "2023-05-25T20:36" , which I was able to tell via binding the value of the date time input to a local variable and console logging it. This is both true within +page.svelte where I print out the variable I am binding the input to, and within the action in +page.server.js. However here is where things get weird: When I call Date.parse() within +page.svelte , this gives me the UTC timestamp I am expecting (assuming 2023-05-25T20:36 is in local time rather than UTC), but when I call Data.parse() on the same string in +page.server.js , it assumes that the string 2023-05-25T20:36 is in UTC time instead of local time and thus gives the wrong timestamp. Is this an issue with my node configuration settings for sveltekit? Why is this weird discrepancy occurring? Please note that my local timezone is MT time (2 hours behind EST, one ahead of California)

Code (+page.svelte):

<Form method="POST">
    Set Draft Time!
    <Input
      type="datetime-local"
      name="datetime"
      id="exampleDatetime"
      placeholder="datetime placeholder"
      bind:value={timeStamp} 
    />
    {timeStamp}
    {Date.parse(timeStamp) /*  THIS GIVES CORRECT VALUE CORRECTLY ASSUMING THAT timeStamp is in local time instead of UTC time!!}
    <button type="submit">Submit Here!</button>
  </Form>

+page.server.js

export const actions = {
    default: async ({cookies,request,params}) => {
        const data = await request.formData();
        const dateAsString = data.get("datetime") // This gives the correct local datetime string 2023-05-25T20:36
        const timestamp = Date.parse(dateAsString) // This is where the discrepancy is occurring. For some reason, Date.parse() is assuming the input time string is in UTC time instead of local time, and thus the timestamp does not match what I would expect it to. 
    }
};

2

Answers


  1. Chosen as BEST ANSWER

    In addition to the accepted answer, another way to pass the correct timestamp from the browser to the server is using a use:enhance function as shown in the sveltekit docs: https://kit.svelte.dev/docs/form-actions . This can allow you to pass custom values in your formData in addition to the values that the value the form submission passes by default. Here was what I ended up doing:

    <form 
        method="POST"
        use:enhance={({ data }) => {
          data.set("unixTimeStamp",Date.parse(timeStampMillis))
        }}>
        Set Draft Time!
        <Input
          type="datetime-local"
          name="datetime"
          id="exampleDatetime"
          bind:value={timeStampMillis}
        />
    

    By passing the value Date.parse(timeStampMillis) with our form submission, we are relying on the browser's implementation of Date.parse() instead of Node.js server side, as the browser correctly assumes that the timestring "2023-05-25T20:36" is in local time. In the +page.server.js , we can retrieve the parsed value rather than the timestring by using

    export const actions = {
        default: async ({cookies,request,params}) => {
            console.log("in default action!")
            const data = await request.formData();
            const dateAsString = data.get("unixTimeStamp")
            console.log("unixTimeStamp is:" + dateAsString)
    

  2. The time format is ambiguous and implementation behavior is thus not defined here.

    The value should probably be normalized so the time part is either HH:mm:ssZ for UTC or HH:mm:ss+HH:mm/HH:mm:ss-HH:mm for local offsets. (See date time string format)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search