Formatting Date with Code

Ask the community
,
1

I am trying to get a date to display with just the Month Day and Year. The code does not return any error. But the result on the site still shows the same - Wed Jan 10 2018 00:00:00 GMT+0400 (Arabian Standard Time)

What could I be missing?

const oldDate = $w(“#text49”).text;
const newDate = oldDate.split(’ ‘).splice(1, 3).join(’ ‘);
$w(’#text49’).text = newDate;

2

Hey Sunil,

Where in your page code did you place that snippet? Can you give us some more context?

3

Thanks Sam for responding
$w.onReady(function () {
//TODO: write your page related code here…
const oldDate = $w(“#text49”).text;
const newDate = oldDate.split(’ ‘).splice(0, 4).join(’ ');
$w(‘#text49’).text = newDate;
});

4

Hey again Sunil,

This issue is that you’re running your code before the dataset on the page is loaded. Therefore, you’re getting the placeholder value, changing that, and then it’s just being overridden by the dataset value.

Try this instead. It waits for the dataset to be loaded first. (Change dataset1 to the ID of your dataset.)

$w.onReady(function () {
	//TODO: write your page related code here...
	$w("#dataset1").onReady( () => {
		const oldDate = $w("#text49").text;
		const newDate = oldDate.split(' ').splice(0, 4).join(' ');
		$w('#text49').text = newDate;
	});
});
5

Thanks a million Sam. I am new to the Wix Coding Platform. This was an excellent input to get me going forward. It worked perfectly.

6

Have another Situation where I want to format the date displayed inside a table
Table Name is table1 and age is the field name

$w(“#dynamicDataset”).onReady( () => {
const oldDate = $w(“#table1.age”).text;
const newDate = oldDate.split(’ ‘).splice(1, 3).join(’ ‘);
$w(’#table1.age’).text = newDate;
});

7

This situation is a little more complicated. We are currently writing an article to explain how to do this.

In the meantime, you can try this:

  • Get the rows of the table

  • Manipulate the rows to change the dates as you require using standard JavaScript

  • Rest the rows of the table
    Note: You may have a problem with the type of the column if you’ve changed the data from a date to text. To fix that, you can use the columns property and a similar strategy to the one above.

8

Thanks Sam

9

Sam, you mentioned “We are currently writing an article to explain how to do this” and it’s been a while since you wrote this. Is this article available?

10

Here is the article: Velo: Formatting Dates | Help Center | Wix.com.

Let us know if it helps.

11

Hello Sam, thank you for the reply. I have read that article but it does not answer my question. I have not found an article to explain how to format dates in tables that are populated from collections. The article you point to above explains other fields, except for table fields.

Perhaps I was not being very clear with my query. I have a Table where I want to format dates displayed inside a table, say table1. In my table1 I have 2 date/time columns called “Start Date” and “End Date”. I want to remove the time.

The article you point to above explains how to format different type of data fields, except for table fields.

12

Here, I’m assuming you populate your table using a dataset connection. You can change the format of the date fields in your table using code similar to this:

export function myDataset_ready() {
  // get the table's columns
  let columns = $w('#table1').columns;

  // change all date columns to type string
  columns = columns.map( (column) => {
    if(column.type === 'date'){
      column.type = 'string';
    }
    return column;
  } );

  // reset the table's columns
  $w('#table1').columns = columns;


  // get the table's rows
  let rows = $w('#table1').rows;

  // 
  rows = rows.map( (row) => {
    row.dateField1 = // changed value
    row.dateField2 = // changed value
    return row;
  } );

  $w('#table1').rows = rows;
}
13

That is okay if you want to show the displayed date on another page. However, what if you wanted to do it in a beforesave function where you edit what is input from date picker on a form and then save that new formatted date into the dataset field. Then using the changed date on a variable within a triggered email.

Is this possible or is it only possible by changing the date to string only.

Have currently got triggered email as .toString, however when use either .toDateString or .toLocaleDateString, it works but it duplicates new contact in contact list. One as new contact with no fields filled in, whilst the other one is last visit to website with all input form fields filled in.

Can I format date and save it in dataset before using editted date in variable?