Display date by textfield without timezone

Forms
1

Is it possible to get the value of the date and put it in the textfield?
I have done it but it comes out in a different format. Please see below for your reference

image

2

You can use JS to manipulatie the date like
fd.field('Date').value.toDateString() or fd.field('Date').value.toLocaleDateString() or fd.field('Date').value.toISOString()

1 Like
3

To format the date from the date picker and place it into a text field in the desired format, you can use JavaScript along with the moment.js library or vanilla JavaScript for date formatting.

Here's a solution using vanilla JavaScript:

  1. Retrieve the Date Value
  2. Format the Date
  3. Set the Formatted Date into the Text Field

Let's assume the date picker field has the internal name DateField and the text field has the internal name TextField.

Here is the code:

// Note: If you are using a public web form, replace `fd.spRendered` with `fd.rendered`.
fd.spRendered(function() {
    // Function to format the date
    function formatDate() {
        var dateValue = new Date(fd.field('DateField').value);
        
        // Format the date to 'MM/DD/YYYY'
        var formattedDate = (dateValue.getMonth() + 1).toString().padStart(2, '0') + '/' +
                            dateValue.getDate().toString().padStart(2, '0') + '/' +
                            dateValue.getFullYear();
        
        // Set the formatted date to the text field
        fd.field('TextField').value = formattedDate;
    }

    // Call the function when the date field changes
    fd.field('DateField').$on('change', formatDate);

    // Call the function on form load to set initial value
    formatDate();
});

Explanation:

  1. Function to Format the Date:
  • Retrieve the date value from the date picker.
  • Create a new Date object.
  • Format the date using getMonth(), getDate(), and getFullYear() methods. The padStart() method ensures the month and day are always two digits.
  1. Event Listener:
  • Attach an event listener to the date picker field to call the formatDate function whenever the date changes.
  • Call the formatDate function on form load to set the initial value of the text field.

Notes:

  • Ensure the internal names DateField and TextField are replaced with the actual internal names of your fields.
  • This script should be added to the Plumsail form's JavaScript editor.

This approach will ensure that the date is displayed in the desired MM/DD/YYYY format in the text field, as shown in the image you provided.

1 Like