How To Read Expiration Date On Velo Nicotine Pouches

This commodity explains how you tin format dates on your site using Velo.

You lot tin can display dates from your collections on your site using date pickers, which need a dataset only no code, or text elements, which require both a dataset and some elementary code.

Before you begin:

Make sure yous accept a collection that has a field of type "Date and Time".

Displaying Dates in Appointment Pickers

Engagement pickers are the easiest manner to brandish and format dates from your collection on your site. Merely add a date picker to your page and connect it to the "Appointment and Time" field in your dataset. When visitors view the page, they will see the date function of the value stored in the "Date and Fourth dimension" field in your collection.

Make certain to set the date picker to exist "Read-only" in its Settings panel. This disables the date picker so that the calendar does not pop up if your visitors click the date.

Pattern customization tips

• You can hibernate the calendar icon by choosing a color that matches the background of your element in the Date Picker Design console.
• Because the Engagement Picker is fix to be "read only," when customizing its await and feel brand sure to choose "Disabled" from the dropdown in the Input Field tab of the Date Picker Design panel.

Displaying Dates in Text Elements

This section has iii parts:

• Instructions on how to go set up, including lawmaking you can re-create and paste on to your page
• An explanation of what each line of lawmaking does
• Some boosted formatting options you tin apply to the date

Instructions

1. Add a text chemical element to your page but do not connect it to the dataset. Your code will practise the work instead.
2. Open the Code console of your page (y'all tin simply drag it up from the bottom).
3. Re-create the code below and paste it in the Folio tab of the Lawmaking panel. Make sure to paste it under the line that says "//TODO: write your page related code here…" (You can delete that line if you want.)

                                          one                // Get the date from the date field of the current particular                                                                            2                                const                                  date = $w(                "#myDataset"                ).getCurrentItem().dateField;                                                            3                                // Ready the text element to display the date using the user's settings                                                                            4                $w(                "#dateText"                ).text = appointment.toLocaleDateString()                                    

1. Make certain to brand these replacements:
   • #myDataset: the ID of the dataset that is connected to your collection (hover over information technology to see its ID)
   • dateField: the field central of the field that has the date you lot desire to display
   • #dateText: the ID of the text element you added in Step ane (hover over information technology to see its ID)
2. Preview your page to see how it looks.

The date format is based on your or your visitors' locale settings. For example, if you or your visitor is from the United States, this code displays a date that looks like this: 12/25/2018, while a visitor from the Great britain sees 25/12/2018. See the department on additional formatting options to learn how you can control exactly how the date appears for everyone.

Understanding the Code

This department explains the chief lines of the code. The code in your Code Panel should look like the post-obit image. You can click on the Code Panel Toolbar to line everything up.

Line three calls the onReady() function. This defines the code that will run when the page is finished loading.

Line 5 reads the data stored in the current detail from the dataset. Information technology then takes the value from the dateField field and stores it in a variable called date.

Line 7 uses the standard JavaScript function toLocaleDateString to return a string with the date formatted to match the visitor's locale settings.

The text property then sets the contents of your text element to be the returned string.

Additional Formatting Options

The code in a higher place returns the date in the format defined by the company's locale settings on their computer. If you want more than control over how the appointment appears, you can add together arguments to the toLocaleDateString() function to control both the language in which the date appears and its format. For example, yous might want the date to always appear in US English and to have the calendar month be abbreviated, like this: Dec 25, 2018. This department shows you how to do this.

Below is the updated code you tin copy and paste. You can learn more well-nigh the bachelor JavaScript engagement options here.

                                          one                const                                  options = {                                                            2                                                day                :                                "numeric"                ,                                                            3                                                month                :                                "short"                ,                                                            4                                                twelvemonth                :                                "numeric"                                                                            5};                                            half dozen                                                // Sets the property of the text element to be a string representing today's date in United states of america English                                                                            7                $w(                "#dateText"                ).text = today.toLocaleDateString(                "en-US"                , options);                                    

Your code should await like the image beneath.

Lines seven-xi ascertain an object chosen options. This object defines the formatting for the toLocaleDateString() function

In this example, the date will include the full yr, the brusk form of the month, and a numeric representation of the date: Dec 25, 2018. You tin larn more about the available JavaScript engagement options here.

Line 13 has been modified to include arguments for the linguistic communication ("en-Us") and the options defined above.

Source: https://support.wix.com/en/article/velo-formatting-dates

Share this post