Date Picker

• Material Design Spec

• Graphics Link

Definition

<cst-date-picket>

<sub-theme/>

<sub-font/>

<sub-style/>

<sub-access/>

<sub-label/>

<sub-lr-icon/>

<sub-lr-icon/>

<sub-lr-label/>

<sub-lr-label/>

<sub-options/>

<sub-help-icon/>

<sub-feature-flag/>

</cst-date-picket>

Example

<cst-date-picket id="" value="">

<sub-theme name="" clr-var1="" clr-var2=""/>

<sub-font name="" font-var1="" font-var2=""/>

<sub-style name="" width="" height=""/>

<sub-access can-view="" can-modify=""/>

<sub-label text="" position=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-lr-icon name="" position="" title="" link=""/>

<sub-lr-label text="" position=""/>

<sub-lr-label text="" position=""/>

<sub-options format="" />

<sub-help-icon name="" position="" title="" link="">

<sub-feature-flag allow-time="" allow-range="">

</cst-date-picket>

OR

<cst-element name="date-picker" schema="" schema-prop="" value=""/>

Attributes

Attribute	Value	Description
id	string type	Identifier for component.
value	string type	Specifies the value for component.(two way bind attribute)
readonly	boolean type	Specifies that an input field is read-only.
required	boolean type	Specifies if input field must be filled.
disabled	boolean type	Specifies if component should be disabled.(aurelia ext attribute)
autofocus	boolean type	Specifies if component should be focused when loaded.
placeholder	string type	Specifies a short hint that describes expected value.
max	string type	Specifies latest acceptable date.
min	string type	Specifies earliest acceptable date.
step	number type	Specifies stepping interval, when clicking up and down spinner buttons and validating the date.
regex	string type	Specifies a regex pattern that describes expected value.
class	cst-mat-filled (default) cst-mat-outline cst-mat-standard	Specifies class to be applied(Multiple classes can be given with space).
sub-theme	object type	Specifies theme to be used for component.
sub-font	object type	Specifies fonts to be used for component.
sub-style	object type	Specifies style to be applied to component.
sub-label	object type	Specifies label to be displayed.
sub-lr-icons	array type	Specifies icons to be displayed.
sub-lr-labels	array type	Specifies fixed text to be displayed in text field.
sub-options	object type	Specifies extra options for the component.
sub-help-icon	object type	Specifies help icon to be displayed.
sub-feature-flag	object	Specifies what features to enable/disable.
other	any type	Any other info.
schema	object type	Specifies JSON schema.
schema-prop	string type	Specifies property to be used to pick schema.

Sub element attributes

sub-theme

Property	Value	Description
name	primary(default)/secondary/custom	Name of the theme.
clr-label	string type	If custom then specific/ named color variables

sub-font

Property	Value	Description
name	roboto (default)/custom	Name of the font
font-text	string type	If custom then specific/ named font variables.
font-label	string type
font-error	string type

sub-style

Property	Value	Description
name	material/skeuomorphic(standard/filled/shaped-filled/outlined/shaped-outlined)	Name of design to be used.
width	percentage/pixels/string(x-small,small,medium,large,x-large)	Gives width/any other prop value

sub-label

Property	Value	Description
text	string type	Label text.
position	left/top/center(default)	Position of the label.

sub-lr-icons

(a.k.a left right icons)

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click of icon.

sub-lr-labels

(a.k.a left right labels)

Property	Value	Description
text	string type	Label text.
position	left/right	Position of the label.

sub-options

Property	Value	Description
format	string type	Format of the date.

sub-help-icon

Property	Value	Description
name	string type	Icon name.
position	left/right	Position of the icon.
title	string type	Icon tooltip
link	string type	Link to be opened on click.

sub-feature-flag

Property	Value	Description
allow-time	boolean type	Specifies to allow time.
allow-range	boolean type	Specifies to allow date range.

Schema Examples

Full schema

Fetch appropriate based on schemaProp

let schema = {

type: "object",

required: ["dateTime"], //= required

properties: {

dateTime: {

type: "string",

min: '2019-01-01T00:00:00.000Z',

max: '2025-01-01T00:00:00.000Z',

required: true/false

title:"Select Date Range",//= label

cstAttr: {

raw:{ //loop & add to element

readonly: true,

disabled : true,

autofocus : false,

class:'outline cst-class1'

placeholder: 'DD/MM/YYYY',

regex: ''

},

others:{

},

subStyle:{ //loop & add to element style

name: '',

width:'',

height:'',

fontSize:''

}

subLabel:{

position:'',

text:''

},

subLrIcons:[{

name:'',

position:'',

title:'',

link

}],

subLrLabels: [{

text: '',

position: ''

}],

subHelpIcon: {

name: '',

position: '',

title:'',

link:''

},

subFeatureFlag: {

allowTime: true,

allowRange: true

},

subTheme:{

name:'',

clrLabel:''

},

subFont:{

name:'',

fontText:'',

fontLabel:'',

fontError:''

}

}

}

}

}

let schemaProp = 'dateTime';

let value = '2020-05-07T00:00:00.000Z';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Exact schema

let schema = {

type: "string",

min: '2019-01-01T00:00:00.000Z',

max: '2025-01-01T00:00:00.000Z',

title: "Select Date", //= label

cstAttr: {

}

}

let schemaProp = '';

let value = '2020-05-07T00:00:00.000Z';

let finalSchema = schemaProp ? schema.properties[schemaProp] : schema;

Nested object

Nested object schemaProp

let schema = {};

let schemaProp = 'EMDDetails.dateTime';

let value = '2020-05-07T00:00:00.000Z';

var finalSchema = schema;

let schemaPropSplits = schemaProp.split('.');

for(let prop of schemaPropSplits){

finalSchema = finalSchema.properties[schemaProp];

}

Material Measurement Guidelines

Touch targets

• height = 48px
• width = 48px

Mobile Date Picker

• Left and right padding: 24px
• Menu bar top and bottom padding: 16px
• Edit icon: 24 x 24px
• First baseline: 32px from top
• Second baseline: 72px from first baseline
• Third baseline: 32 px from bottom of header
• Padding between month name and button: 4px
• Month dropdown button: 24 x 24px
• Month pagination: 24 x 24px
• Padding between month pagination: 24px

Mobile Calendar view

• Dimensions: 328 x 512px
• Left and right padding: 12px
• Date bounding box: 40 x 40px
• Selected date: 36 x 36px
• Padding between dates: 4px

Mobile Year selection view

• Left and right margins: 24px
• Year bounding box: 88 x 52 px
• Selected year: 72 x 36px

Mobile range picker

• Left and right margins: 12px
• Header height: 128px
• Header text inset: 60px from left margin
• First baseline: 36px from second baseline
• Second baseline: 24px from bottom of header
• Third baseline (month name): 32px from days of week
• Edit icon: 24 x 24px
• Edit icon padding: 16px from right
• Date bounding box: 48 x 48px
• Selected date: 40 x 40px
• Padding between months: 4px

Mobile input picker

• Dimensions: 264 x 328px
• Left and right padding: 24px
• First baseline: 28px from top
• Second baseline: 72px from first baseline
• Edit icon: 24 x 24 px
• Text field: 16px from bottom of header
• Text field height: 56px

Desktop date picker

• Menu left padding: 24px
• Menu right padding: 8px
• Menu top padding: 16px
• Menu bottom padding: 12px
• Month dropdown button: 24 x 24px
• Month pagination: 24 x 24px
• Padding between month name and button: 4px
• Padding between month pagination: 24px
• Left and right padding of calendar area: 16px
• Bottom padding: 8px
• First baseline: 32px from top
• Second baseline: 36px from first baseline
• Date bounding box: 32 x 32 px
• Selected date: 28 x 28px

Desktop Year selection view

• Left padding: 12px
• Right padding: 20px
• Bottom padding: 8px
• Menu height: 52px
• Padding between menu and years: 4px
• Year bounding box: 56 x 32px
• Selected year: 52 x 28px

Desktop date range picker

• Left, right, and inside padding: 16px
• Bottom padding: 8px
• Month title baselines from top: 32px
• Pagination arrows: 24 x 24px

Events

Attribute	Description
onchange	Fires when the element's value changes.
onfocus	Fires when the element gets focus.
oninvalid	Script to be run when an element is invalid.
onreset	Fires when reset button is clicked.
onvalidate	Custom validate hook, must return error message else considered valid; will be called onchange.

Event Method signature

method(parentRefObj, evtObj, elm, others)

Parameters description

Parameter	Value	Description
parentRefObj	parentRefObj = { parentContext, loopParentContext, doubleLoopParentContext }	Parent Context references
evtObj	object	Event object
elm	object	Element value
others	any	Other value

OverRidable Classes

• cst-ovr-date-picker-elm
• cst-ovr-date-picker
• cst-ovr-date-picker-label
• cst-ovr-date-picker-helper-text
• cst-ovr-date-picker-error-text
• cst-ovr-date-picker-left-icon
• cst-ovr-date-picker-right-icon
• cst-ovr-date-picker-left-label
• cst-ovr-date-picker-right-label

Unit Test Screenshots

Responsiveness Test Screenshots

Design Images

Demo link

Points

• event callback consistency (evtObj, elm, others,...) //check other libs
• Show state indication (filled/ empty/ error/ right / focus) + color
• Help text for *Required, error labels
• if large helper text wrap (mobile/ web)
• if multiple errors show one, remaining on hover of error icon
• fonts (text - Subtitle 1 - Regular 16, Label - Caption - Regular 12)
• EXT trigger cases
• Check logging, security, performance & flexibility