Compatible with all technologies
Live examples
Input Components Suite Predefined Masks
Last Updated
16 Mar, 2007


Index
Text Masks
DateTime Masks
Calendar Graphical Helpers
Numeric Masks
Calculator Graphical Helpers
Spinner Graphical Helpers
Decorators
Validator Masks

Standard Masks with Graphical Helpers
Numeric
{className : "IC_Num",
type : "numeric/spinner/calc",
mask : "###,###,###,###.##",
calcTemplate : "WiseblocksCalculator"}
Example:
Date
{className : "IC_Date",
type : "dateTime/calendar/spinner",
mask : "M/d/y",
compactDropDown : true,
calendarTemplate : "WiseblocksCalendar"}
Example:
Text Masks
US Phone Number
{className : "IC_Txt_US_Phone",
type : "text/mask",
mask : "(###)###-####",
blankCharacter  : "_"}
Example:
European Phone Number
{className : "IC_Txt_Euro_Phone",
type : "text/mask",
mask : "+(##)#.##.##.##.##",
blankCharacter : "_"}
Example:
US Postal Code
{className : "IC_Txt_US_ZipCode",
type : "text/mask",
mask : "#####",
caseFormatters : "+++++++",
blankCharacter : "_"}
Example:
French Postal Code
{className : "IC_Txt_FR_PostalCode",
type : "text/mask",
mask : "#####",
caseFormatters : "+++++++",
blankCharacter : "_"}
Example:
Canadian Postal Code
{className : "IC_Txt_CA_PostalCode",
type : "text/mask",
mask : "@#@ #@#",
caseFormatters : "+++++++",
blankCharacter : "_"}
Example:
UK National Insurance Number
{className : "IC_Txt_UK_IN",
type : "text/mask",
mask : "@@######@",
cursorOnFocus : "begin",
blankCharacter : "_"}
Example:
   
US Social Security Number
{className : "IC_Txt_US_SSN",
type : "text/mask",
mask : "###-##-####",
cursorOnFocus :"begin",
blankCharacter  : "_"}
Example:
US Canadian Social Insurance Number
{className : "IC_Txt_CA_SIN",
type : "text/mask",
mask : "###-###-###",
cursorOnFocus : "begin",
blankCharacter : "_"}
Example:
   
Credit Card
{className : "IC_Txt_CreditCard",
type : "text/mask",
mask : "####-####-####-####",
blankCharacter : "_"}
Example:
 
DateTime Masks
International Date Notation
{className : "IC_Date_InternationalNotation",
type : "dateTime/spinner/mask",
mask : "YYYY/MM/DD"}
Example:
Date
{className : "IC_Date",
type : "dateTime/calendar/spinner",
mask : "M/d/y",
compactDropDown : true,
calendarTemplate : "WiseblocksCalendar"}
Example:
International Datetime Notation
{className : "IC_DateTime_InternationalNotation",
type : "dateTime/spinner/mask",
mask : "YYYY/MM/DD hh:mm:ss"}
Example:
DateTime
{className : "IC_DateTime",
type : "dateTime/spinner/mask",
mask : "MM/DD/YYYY hh:mm:ss a\\m"}
Example:
International Time Notation
{className : "IC_Time_InternationalNotation",
type : "dateTime/spinner/mask",
mask : "hh:mm:ss"}
Example:
Time
{className : "IC_Time",
type : "dateTime/spinner/mask",
mask : "hh:mm:ss"}
Example:
US Time
{className:"IC_Time_US",
type : "dateTime/spinner/mask",
mask : "hh:mm:ss a\\m"}
Example:
Euro Time
{className : "IC_Time_Euro",
type : "dateTime/spinner/mask",
mask : "hh:mm:ss"}
Example:
US Date
{className : "IC_Date_US",
type : "dateTime/spinner/mask",
mask : "MM/DD/YYYY"}
Example:
US DateTime
{className : "IC_DateTime_US",
type : "dateTime/spinner/mask",
mask : "MM/DD/YYYY hh:mm:ss a\\m"}
Example:
Euro Date
{className : "IC_Date_Euro",
type : "dateTime/spinner/mask",
mask : "DD/MM/YYYY"}
Example:
Euro DateTime
{className : "IC_DateTime_Euro",
type : "dateTime/spinner/mask",
mask : "DD/MM/YYYY hh:mm:ss"}
Example:
Calendar Graphical Helpers
US Calendar
{className : "IC_Calendar_US",
type : "dateTime/spinner/calendar",
mask : "M/d/y",
compactDropDown:true}
Example:
US Wiseblocks Calendar
{className : "IC_Calendar_US_Wiseblocks",
type : "dateTime/spinner/calendar",
mask : "M/d/y",
compactDropDown : true,
calendarTemplate : "WiseblocksCalendar"}
Example:
Small Calendar
{className : "IC_Calendar_Small",
type : "dateTime/spinner/calendar",
mask : "M/d/y",
compactDropDown : true,
calendarOptions : {
mindate : new Date(), //today
START_WEEKDAY : 1,
SHOW_WEEKDAYS : false,
SHOW_WEEK_HEADER : false,
SHOW_WEEK_FOOTER : false,
HIDE_BLANK_WEEKS : true,
LOCALE_MONTHS : "short" }
}
Example:
No Week Days Calendar
{className : "IC_Calendar_NoWeekDays",
type : "dateTime/spinner/calendar",
mask : "M/d/y",
compactDropDown : true,
calendarOptions : {
SHOW_WEEKDAYS : false}
}
Example:
Numeric Masks
Imperial System
{className : "IC_Num_Imp",
type : "numeric/mask",
mask : "###,###,###.##",
cursorOnFocus : "firstEmpty",
decimalSeparator : ".",
thousandsSeparator : ","}
Example:
Metric System
{className : "IC_Num_Metric",
type : "numeric/mask",
mask : "###,###,###.##",
cursorOnFocus : "firstEmpty",
decimalSeparator : ".",
thousandsSeparator : " "}
Example:
Imperial System with Spinner
{className : "IC_Num_Spin_Imp",
type : "numeric/spinner",
mask : "###,###,###.##",
decimalSeparator : ".",
thousandsSeparator : ",",
cursorOnFocus : "firstEmpty"}
Example:
Metric System with Spinner
{className : "IC_Num_Spin_Metric",
type : "numeric/spinner",
mask : "###,###,###.##",
decimalSeparator : ".",
thousandsSeparator : " ",
cursorOnFocus : "firstEmpty"}
Example:
Imperial System with Calculator
{className : "IC_Num_Calc_Imp",
type : "numeric/calc",
mask : "###,###,###.##",
decimalSeparator : ".",
thousandsSeparator : ",",
cursorOnFocus : "firstEmpty"}
Example:
Metric System with Calculator
{className : "IC_Num_Calc_Metric",
type : "numeric/calc",
mask : "###,###,###.##",
decimalSeparator : ".",
thousandsSeparator : " ",
cursorOnFocus : "firstEmpty"}
Example:
Imperial Salaries with Calculator
{className : "IC_Num_Imp_Salary",
type : "numeric/mask",
mask : "#,###,###",
cursorOnFocus :"firstEmpty",
thousandsSeparator : ","}
Example:
Metric Salaries with Calculator
{className : "IC_Num_Metric_Salary",
type : "numeric/mask",
mask : "#,###,###",
cursorOnFocus :"firstEmpty",
thousandsSeparator : " "}
Example:
Calculator Graphical Helpers
Standard Template
{className : "IC_Calc",
type : "numeric/calc"}
Example:
Wiseblocks Template
{className : "IC_Calc_Wiseblocks",
type : "numeric/calc",
calcTemplate : "WiseblocksCalculator"}
Example:
 
Spinner Graphical Helpers
Basic Spinner
{className : "IC_Spin_Basic",
type : "numeric/spinner"}
Example:
Basic Spinner positive values only
{className : "IC_Spin_PositiveOnly",
type : "numeric/spinner",
min : 0}
Example:
Spinner with step10
{className : "IC_Spin_Step10",
type : "numeric/spinner",
step : 10,
conditions : [NegativeRed]}
Example:
Spinner with step100
{className : "IC_Spin_Step100",
type : "numeric/spinner",
step : 100,
conditions : [NegativeRed]}
Example:
Spinner with step1000
{className : "IC_Spin_Step1000",
type : "numeric/spinner",
step : 1000,
conditions : [NegativeRed]}
Example:
 
Spinner for Salary
{className : "IC_Spin_Salary",
type : "numeric/spinner/calc",
mask : "#,###,###",
thousandsSeparator : ",",
cursorOnFocus : "firstEmpty",
calcTemplate : "WiseblocksCalculator",
step : 2500,
scale : 5,
min : 0,
max : 1000000}
Example:
Spinner for Hourly Rate Salary
{className : "IC_Spin_HourlyRateSalary",
type : "numeric/spinner/calc",
mask : "##0.00",
thousandsSeparator : ",",
cursorOnFocus : "firstEmpty",
calcTemplate : "WiseblocksCalculator",
step : .50,
scale : 5,
min : 0,
max : 999}
Example:

Decorators
Red decorator
{className : "IC_Deco_Red",
highlight : HighlightBox.RED}
Example:
Yellow decorator
{className : "IC_Deco_Yellow",
highlight : HighlightBox.YELLOW}
Example:
Green decorator
{className : "IC_Deco_Green",
highlight : HighlightBox.GREEN}
Example:
Orange decorator
{className : "IC_Deco_Orange",
highlight : HighlightBox.ORANGE}
Example:
Blue decorator
{className : "IC_Deco_Blue",
highlight : HighlightBox.BLUE}
Example:
Purple decorator
{className : "IC_Deco_Purple",
highlight : HighlightBox.PURPLE}
Example:
Pink decorator
{className : "IC_Deco_Pink",
highlight : HighlightBox.PINK}
Example:
Brown decorator
{className : "IC_Deco_Brown",
highlight : HighlightBox.BROWN}
Example:
Gray decorator
{className : "IC_Deco_Gray",
highlight : HighlightBox.GRAY}
Example:
White decorator
{className : "IC_Deco_White",
highlight : HighlightBox.WHITE}
Example:
Black decorator
{className : "IC_Deco_Black",
highlight : HighlightBox.BLACK}
Example:
 
Validator Masks
Email Validator
{className : "IC_Txt_EmailValidator",
type : "text/mask",
mask : "*****************************",
autoSize : true,
blankCharacter : " ",
conditions : [{condition: function (value){
return value.indexOf("@")==-1 || value.indexOf(".") ==-1}
,style : { color:"red" }}]}
Example:
 
 


InputComponents are trademarks of WiseBlocks. Copyright 2007. All Rights Reserved.