Classic Form Builder Elements
|
|
The date widget allows users to capture a past, present or future date stored in a localized format. In the U.S. the date will appear as Month-Day-Year.
Date Element Functions
The Date Element has many cool features and functions that we have recently found out that anyone can take advantage of.Get Week Number from Date
This function displays the week number of the year by current date in a text or read only element. It is mostly used for payroll purposes because it comes out with a number from 1-53 weeks of the year.Simply put this in the page level javascript of the form that will be utilizing this function:
var today = new Date()
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}
This gives you the ability to call the getWeek() method on the today variable that is initialized in the page level java script.
Now all you must do is put today.getWeek() in the dynamic value of a text, number, or read only element and the week number of the year will be displayed.
**If you would like to get the month of a date element earlier on the form you must put date_data_column_name.getWeek() in your dynamic value so that you are referencing the date element on your form.
Get the Month of the Year
To get the month from the current date you will need to put this in the page level javascript of the form:
var today = new Date()
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
var monthName = monthNames[today.getMonth()]
In the dynamic value of a text or read-only element put monthName and it will give you the current month of the year.
OR
To get the month from the date entered previously in the form put this in the page level javascript of the form:
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
Put monthNames[date_data_column_name.getMonth()] in the dynamic value of a text or read-only element.
Get Day of the Month and Year
To get the current day of the month and year make sure you have var today = new Date() in your page level javascript and today.getDate() in the dynamic value for the day of the month and today.getFullYear() in the dynamic value for the year.
**These two functions can only be used with a text, number, or read-only element.
Calculate Age from Birth Date
Please visit this link for a detailed explanation on how to calculate the Age in years from a selected date. Calculating AgeFor more ways to manipulate the Date and Date-Time Object visit JavaScript Date Object
This section will focus on explaining different scenarios that require more than the standard form building elements. These examples are meant to be generic and serve many different needs. This section will always be a work in progress, so if you need something and it isn't here, please let us know.
If you have a better way of performing the same calculation, please drop us a line on the Community Support page. We will be happy to update the example.
Date Validation
You may need to verify that a user is selecting a date in the future and not in the past. We can use the Client Validation feature to show the user a message if the date they pick was either today, or sometime in the past. We cannot simply use the date values to verify whether the condition has been met. Converting the dates into numbers allows for easy comparison and can be completed by following the example below.
We will only need two "Date" widgets to accomplish this task. If the user selects a date that is sometime in the future they will not see any message. However, if they select the current day, or a date from the past, the user will see the Validation Message. This message can hold any String, it just needs to be contained by "".
| Element Type | Data Column Name | Dynamic Value | Conditional Value | Client Validation | Validation Message |
| Date | date1 | date1=new Date() | false | ||
| Date | date2 |
Number(date2) >Number(date1) |
"Please enter a future date." |
Date Element Functions
The Date Element has many cool features and functions that we have recently found out that anyone can take advantage of.Get Week Number from Date
This function displays the week number of the year by current date in a text or read only element. It is mostly used for payroll purposes because it comes out with a number from 1-53 weeks of the year.Simply put this in the page level javascript of the form that will be utilizing this function:
var today = new Date()
Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}
This gives you the ability to call the getWeek() method on the today variable that is initialized in the page level java script.
Now all you must do is put today.getWeek() in the dynamic value of a text, number, or read only element and the week number of the year will be displayed.
**If you would like to get the month of a date element earlier on the form you must put date_data_column_name.getWeek() in your dynamic value so that you are referencing the date element on your form.
Get the Month of the Year
To get the month from the current date you will need to put this in the page level javascript of the form:
var today = new Date()
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
var monthName = monthNames[today.getMonth()]
In the dynamic value of a text or read-only element put monthName and it will give you the current month of the year.
OR
To get the month from the date entered previously in the form put this in the page level javascript of the form:
var monthNames = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December" ]
Put monthNames[date_data_column_name.getMonth()] in the dynamic value of a text or read-only element.
Get Day of the Month and Year
To get the current day of the month and year make sure you have var today = new Date() in your page level javascript and today.getDate() in the dynamic value for the day of the month and today.getFullYear() in the dynamic value for the year.
**These two functions can only be used with a text, number, or read-only element.
Calculate Age from Birth Date
Please visit this link for a detailed explanation on how to calculate the Age in years from a selected date. Calculating AgeFor more ways to manipulate the Date and Date-Time Object visit JavaScript Date Object
Date Calculations
Difference of two Dates
There may be a situation where you need to calculate the number of days between the current date, and a date picked by the user. We need to perform some conversions in order to calculate the difference in time.
Let's begin by creating all of the elements used for this demonstration. The form layout should go like this:
| Element Type | Data Column Name | Dynamic Value | Conditional Value |
| Date | date1 | date1=new Date() | |
| Number | date1_convert | Number(date1) | false |
| Date-Time | date2 | date2=new Date() | false |
| Number | date2_convert | Number(date2) | false |
| Number | ms_difference | Number(date1_convert)-Number(date2_convert) | false |
| Number | difference | (Number(ms_difference) /86400000).toFixed(2) | false |
| Number | display |
if (difference>0 && difference<1) {display=1} else {Number (difference).toFixed(0)} |
difference>0 |
| Label | date_message | difference<0 | |
This captures the date the user enters in the "date1" element and converts into milliseconds from Jan1 1970. We perform the same conversion for the current date and then subtract the difference between the two.
In "date_difference" we take the difference in milliseconds and convert it back into days, fixing the output to calculate only two decimal places (that is what ".toFixed(2)" is for). We then need to check and make sure that if the answer we compute is greater than 0 but less than one, to display the answer as "1".
For any other value we are saying to round it to the nearest whole number by adding ".toFixed(0)" in the dynamic value for "display_difference".
Once you understand how these calculations and conversions are performed, you can modify this example to suit your needs.
Calculating Time Difference
This video will calculate your time in minutes but if you would like to calculate your time in hours use this instead:
((Number(time2) - Number(time1))/60000)/60
You can add or subtract days to the current date using the example below. This example will add 90 days to the current date, and you can manipulate the function to meet your needs.
| Element Type | Data Column Name | Dynamic Value | Conditional Value |
| Date | date1 | new Date() | false |
| Date | date2 | new Date(date1.getFullYear(), date1.getMonth(), date1.getDate() +90) |
You can set a dynamic time and/or date by using a page level javascript. Looking at the formula below, it will show you how to set a dynamic time or date. First, declare your variable. You can name it whatever you want, just as long as it is not used in the javascript language or a column name. Then type type new Date followed by a open parentheses. Each number represented a different aspect of time. The date parameters below will show 1988, April 12, 6:30 am. The last zero represents seconds, which no date widget offers.
yourVariable = new Date(1988,03,12,06,30,0);
There are a couple things to note. First, the second number for months, it works as an index value starting with zero. So January will be 0 and December will be 11. The hour number (where the 6 is) is based on 24 hour time. So for 6:30 pm, just change the 6 to 18. And lastly, this will work on all our date and time widgets without changing numbers. The date or time widget will only use the numbers that are applicable. For example, the time widget will only show 6:30 am.
Can't find what your looking for? Before submitting a request look here!
Comments
0 comments
Article is closed for comments.