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
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
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:
- Retrieve the Date Value
- Format the Date
- 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:
- Function to Format the Date:
- Retrieve the date value from the date picker.
- Create a new
Date
object. - Format the date using
getMonth()
,getDate()
, andgetFullYear()
methods. ThepadStart()
method ensures the month and day are always two digits.
- 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
andTextField
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