Format Builder: Difference between revisions
No edit summary |
m →Mask |
||
| (25 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
Back to [[Documentation]] | |||
= Introduction = | |||
The Format Builder will allow you to create custom formats for [[Objects#nuDate|nuDate]] and [[Objects#nuNumber|nuNumber]]. | The Format Builder will allow you to create custom formats for [[Objects#nuDate|nuDate]] and [[Objects#nuNumber|nuNumber]]. | ||
To create a Format we need to do 2 | To create a Format we need to do 2 things. | ||
#Choose the Data Type. | #Choose the Data Type. | ||
#Build the Format. | #Build the Format. | ||
=Building a nuDate= | |||
To build a date format click on a combination of the following options. | |||
To build a date format, click on a combination of the following options. | |||
Entering a Date with the keyboard requires the user to enter the date in the exact format. | |||
eg. ''mask - '''result''' ''(2007-13-01 15:20:01) | |||
*yy - '''17 | *yy - '''17 | ||
*yyyy - '''2017 | *yyyy - '''2017 | ||
| Line 23: | Line 31: | ||
.. and some punctuation. | .. and some punctuation. | ||
=Building a nuNumber= | |||
To build a nuNumber format you will need to provide up to 4 things. | |||
1. A Currency sign (not essential) | |||
2. A Separator that will separate a large number into thousands. (not essential) | |||
3. A Decimal point character (only essential if Decimal Places is greater than 0) | |||
4. Number of Decimal Places. | |||
Changing these will change the display of the Format field. | |||
All of these 4 fields are [[Objects#nuScroll|nuScroll]] Input Objects (with default values that can be scrolled through but will also accept other characters.) | |||
= Mask = | |||
* [https://forums.nubuilder.cloud/viewtopic.php?f=19&t=10820#p23069 Forum Post] - Input field mask / validation | |||
* | = Number as Text = | ||
* [https://forums.nubuilder.cloud/viewtopic.php?f=19&t=10940&p=23754#p23752 Forum Post] | |||
* The need: | |||
<pre> | |||
user types "2" and then it auto formats to "+2.00" | |||
user types "-2" and then it auto formats to "-2.00" | |||
user types "1.5" and it auto formats to "+1.50" | |||
</pre> | |||
* Use a Text format for '''Input Type (and class)''' | |||
* In the database, a VARCHAR column type is used | |||
* Adding an '''onblur''' JavaScript event to the object's '''Custom Code''' will format the number accordingly when the field loses focus: | |||
<pre> | |||
let v = $(this).val(); | |||
let num = parseFloat($(this).val()); | |||
let fixed = num.toFixed(2); | |||
fixed = fixed > 0 ? '+' + fixed : fixed; | |||
$(this).val(fixed).change(); | |||
</pre> | |||
* [[Media:TextNumber_cust_code.png|Screenshot]] | |||
Latest revision as of 18:18, 28 January 2022
Back to Documentation
Introduction
The Format Builder will allow you to create custom formats for nuDate and nuNumber.
To create a Format we need to do 2 things.
- Choose the Data Type.
- Build the Format.
Building a nuDate
To build a date format, click on a combination of the following options.
Entering a Date with the keyboard requires the user to enter the date in the exact format.
eg. mask - result (2007-13-01 15:20:01)
- yy - 17
- yyyy - 2017
- pp - am or pm
- dd - 21
- ddd - Tue
- dddd - Tuesday
- mm - 03
- mmm - Mar
- mmmm - March
- hh - 15
- nn - 20
- ss - 01
.. and some punctuation.
Building a nuNumber
To build a nuNumber format you will need to provide up to 4 things.
1. A Currency sign (not essential)
2. A Separator that will separate a large number into thousands. (not essential)
3. A Decimal point character (only essential if Decimal Places is greater than 0)
4. Number of Decimal Places.
Changing these will change the display of the Format field.
All of these 4 fields are nuScroll Input Objects (with default values that can be scrolled through but will also accept other characters.)
Mask
- Forum Post - Input field mask / validation
Number as Text
- Forum Post
- The need:
user types "2" and then it auto formats to "+2.00" user types "-2" and then it auto formats to "-2.00" user types "1.5" and it auto formats to "+1.50"
- Use a Text format for Input Type (and class)
- In the database, a VARCHAR column type is used
- Adding an onblur JavaScript event to the object's Custom Code will format the number accordingly when the field loses focus:
let v = $(this).val(); let num = parseFloat($(this).val()); let fixed = num.toFixed(2); fixed = fixed > 0 ? '+' + fixed : fixed; $(this).val(fixed).change();
