I want to use datepicker to save the day as text.

Ask the community
,
1

I create custom form use velo.
There is datepicker.
When click the send button, automatically the e-mail send.

The email will show the date entered in the custom form.

The date is following this
Wed Sep 22 2021 00:00:00 GMT+0900

But I don’t need the time.
Only a day.

I checked this thread.
https://www.wix.com/velo/forum/coding-with-velo/custom-datepicker-format-in-triggered-email
and more…

If show the day in website is work.
but in the automation e-mail It’s not work.

And I asked wix customer center how to change the day format
The answer is can’t change.

I’m trying to figure out if I can save the date in text format.

Is there any way to do that?

2

Hi :raised_hand_with_fingers_splayed:

Have you tried the JavaScript built-in toLocaleDateString( ) method? Basically, it’s done by passing the date options as an argument for the method.

const now = new Date(); // The current time. Date object
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

const stringDate = now.toLocaleDateString('en-US', options);

console.log(stringDate); // Should print Monday, September 6, 2021

Hope this helps~!
Ahmad

3

@ahmadnasriya Thank you for your reply.
I tried toLocaleDateStrig()
In page, this code is useful.
but Use Automatically e-mail, can’t change the day format.

like this
Wed Sep 22 2021 00:00:00 GMT+0900

As long as using [Date and Time]（field type）, it looks like I can’t change this.

But I want use datepicker for my custom form.

So I consider about trying to figure out if I can save the date in text format.

I want to the datepicker connect to database as a field type text. not [Date and Time]

4

@nanami you can do that by configuring an onBeforeSave( ) event handler of the dataset by using the setFieldValues( ) method.

// Frontend: Your page

const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };

$w.onReady(() => {
    $w('#dataset').onReady(() => {
        $w('#dataset').onBeforeSace(() => {
            $w('#dataset').setFieldValues({
                date: $w('#datePicker').value.toLocaleDateString('en-US', options)
            })
        })        
    })
})
5

@ahmadnasriya Thank you for your help.
I tried…
but I miss something.

The field name is “date”
The field key is “date”

the code

$w ( “#dynamicDataset” ). onReady ( () => {
$w ( “#dynamicDataset” ). setFieldValues ( {
“date” : ( $w ( “#dynamicDataset” ). onBeforeSave ( () => {

const date = $w ( “#dynamicDataset” ). getCurrentItem (). dateField ;
const options = { weekday : ‘long’ , year : ‘numeric’ , month : ‘long’ , day : ‘numeric’ };

$w ( '#dynamicDataset' ). onReady (() => { 
    $w ( '#dynamicDataset' ). setFieldValues ({ 
        date :  $w ( '#datePicker1' ). value . toLocaleDateString ( 'ja-JP-u-ca-japanese' ) 
    } 

    
    ) 
})

console . log ( “Canceling save” );
return false ;
} )),
} );

} );

6

@nanami you don’t have the $w.onReady() function in your code, and you have multiple dataset onReady() functions as well.

Notice my answer above.

7

@ahmadnasriya
Sorry several times…
I can’t do it still…

I left out onReady() functions because I have other code.

my code is

const now = new Date ( $w ( ‘#datePicker1’ ). value );
const options = { weekday : ‘long’ , year : ‘numeric’ , month : ‘long’ , day : ‘numeric’ };

**const**  stringDate  =  now . toLocaleDateString ( 'ja-JP-u-ca-japanese' );

console . log ( stringDate ); // Should print Monday, September 6, 2021

$w ( '#dynamicDataset' ). onReady (() => { 

  $w ( "#dynamicDataset" ). onBeforeSave ( () => { 

     $w ( '#dynamicDataset' ). setFieldValues ({ 
            date :  stringDate 
        })

console . log ( “Canceling save” );
return false ;
} );

})
8

@nanami Your code is meaningless if it was outside the $w.onReady() function, it needs to be inside it as I said before. and the date conversion should be inside the onBeforeSave() function as we want the latest changes of the date.

  1. Place your code inside the page’s $w.onReady function.

  2. You don’t need to create a date object out of a date object, the type of the value of the datepicker is date and time anyway.

  3. The text conversion needs to be before saving, not when the page is ready, so move the date conversion code into the onBeforeSave function.

  4. Make sure the datepicker is not connected to any dataset.

9

@ahmadnasriya

Thank you again!!!

this is all my code.
Use other code so I left onReady function.

I try several pattern code…
But still not work.

No err.
but the date didn’t save.

import wixWindow from ‘wix-window’ ;

const options = { weekday : ‘long’ , year : ‘numeric’ , month : ‘long’ , day : ‘numeric’ };

$w . onReady (() => {
$w ( “#repeater5” ). onItemReady (( $w , itemData , index ) => {
$w ( “#image272” ). onClick (() => {
const repeaterItem = itemData ;
wixWindow . openLightbox ( “Lightbox” , repeaterItem );
});

$w ( ‘#dynamicDataset’ ). onReady (() => {

  $w ( "#dynamicDataset" ). onBeforeSave ( () => { 

     $w ( '#dynamicDataset' ). setFieldValues ({ 
            date :  $w ( '#datePicker1' ). value . toLocaleDateString ( 'ja-JP-u-ca-japanese'' ) 
        })

console . log ( “Canceling save” );
return false ;
} );

}) 
}); 
})
10

@nanami Only one onReady function must be used, also the conversion is not been done correctly.

Use these lines instead:

$w('#dynamicDataset').setFieldValues({
	date: $w('#datePicker1').value.toLocaleDateString('ja-JP', options);
 })
11

@ahmadnasriya Thank you for your reply too many times.

I tried it but getting an err

Argument of type ‘{ weekday: string; year: string; month: string; day: string; }’ is not assignable to parameter of type ‘DateTimeFormatOptions’. Types of property ‘weekday’ are incompatible. Type ‘string’ is not assignable to type ‘“long” | “short” | “narrow”’.

1829×960 139 KB

The code is

import wixWindow from ‘wix-window’ ;

const options = { weekday : ‘long’ , year : ‘numeric’ , month : ‘long’ , day : ‘numeric’ };

$w . onReady (() => {
$w ( “#repeater5” ). onItemReady (( $w , itemData , index ) => {
$w ( “#image272” ). onClick (() => {
const repeaterItem = itemData ;
wixWindow . openLightbox ( “lightbox” , repeaterItem );
});

$w ( ‘#dynamicDataset’ ). onReady (() => {

  $w ( "#dynamicDataset" ). onBeforeSave ( () => { 

     $w ( '#dynamicDataset' ). setFieldValues ({ 
date :  $w ( '#datePicker1' ). value . toLocaleDateString ( 'ja-JP' ,  options );

})

console . log ( “Canceling save” );
return false ;
} );

}) 
}); 
})
12

@nanami this is only an IDE error, you can safely ignore it.

13

@ahmadnasriya I ignored it but its not work.
Nothing will be stored in the date field of the database.

14

@nanami You must use a valid field that does exist in your collection.

15

@ahmadnasriya
This is the field key.
Is there a mistake?

2128×1140 122 KB

16

@nanami no, everything is okay.

17

@ahmadnasriya
If everything is fine, then why doesn’t it work?
I tried other sites just to be sure, but they still didn’t save.

18

Can anyone tell me what is wrong with it?

19

You should be using the $item Repeated Item Scope in the Repeater’s onItemReady() function.

It is incorrect to define the Dataset onReady() function in the onItemReady() function. The Dataset onReady() function should only be defined if you need to access the Dataset immediately when the page is ready.

20

@nanami Inside your onBeforeSave() function, you’re returning false , which is canceling the save operation.

Remove the return line and it should work.