Date Pickers

Variables

md-picker-include-date
$md-picker-include-date: true !default;
Sass (Scss)

Description

Boolean if the date picker styles should be included.

Type

Boolean
md-picker-include-time
$md-picker-include-time: true !default;
Sass (Scss)

Description

Boolean if the time picker styles should be included.

Type

Boolean
md-picker-include-forceful-classes
$md-picker-include-forceful-classes: false !default;
Sass (Scss)

Description

Boolean if the classes to force a certain orientation should be included. This is not set by default because it is recommended to just allow device orientation to determine the orientation of the picker.

Type

Boolean
md-picker-portrait-width
$md-picker-portrait-width: 330px !default;
Sass (Scss)

Description

The width for the picker while portrait.

Type

Number

Used by

md-picker-portrait-content-height
$md-picker-portrait-content-height: 340px !default;
Sass (Scss)

Description

The height for the picker's content while portrait.

Type

Number

Used by

md-picker-portrait-header-height
$md-picker-portrait-header-height: 110px !default;
Sass (Scss)

Description

The height for the picker's header while portrait.

Type

Number

Used by

md-picker-landscape-width
$md-picker-landscape-width: 560px !default;
Sass (Scss)

Description

The width for the picker while landscape.

Type

Number

Used by

md-picker-landscape-content-height
$md-picker-landscape-content-height: 280px !default;
Sass (Scss)

Description

The height for the picker's content while landscape.

Type

Number

Used by

md-picker-landscape-header-width
$md-picker-landscape-header-width: 190px !default;
Sass (Scss)

Description

The height for the picker's header while landscape.

Type

Number

Used by

md-picker-mobile-margin
$md-picker-mobile-margin: 16px !default;
Sass (Scss)

Description

The minimal about of margin for pickers on mobile devices. This is used when placing the picker in a dialog. The width and height can be larger than the default allowed margin for dialogs, so this will update those margins.

Type

Number

Used by

md-picker-mobile-max-size
$md-picker-mobile-max-size: 320px !default;
Sass (Scss)

Description

This is an optional fix for devices that have a really small width (iPhone 5). This will add an additional media query to hack the size of the dialogs to fit the pickers. If this is null, it will not be included.

Type

Number
md-calendar-date-font-size
$md-calendar-date-font-size: 13px !default;
Sass (Scss)

Description

The font size for a date picker's calendar date.

Type

Number

Used by

md-year-font-size
$md-year-font-size: 16px !default;
Sass (Scss)

Description

The font size for a year in the date picker's year picker that has not been focused or selected.

Type

Number

Used by

md-year-focus-font-size
$md-year-focus-font-size: 20px !default;
Sass (Scss)

Description

The font size for a year in the date picker's year picker that has been focused.

Type

Number

Used by

md-year-active-font-size
$md-year-active-font-size: 24px !default;
Sass (Scss)

Description

The font size for a year in the date picker's year picker that has been selected.

Type

Number

Used by

md-date-picker-transition-time
$md-date-picker-transition-time: $md-transition-time * 2 !default;
Sass (Scss)

Description

The transition time to use for the date picker's active date background circle to appear.

Type

Number
md-date-picker-portrait-date-size
$md-date-picker-portrait-date-size: 44px !default;
Sass (Scss)

Description

The size for a date in the date picker's calendar while portrait.

Type

Number

Used by

md-date-picker-portrait-ball-size
$md-date-picker-portrait-ball-size: 36px !default;
Sass (Scss)

Description

The size for a date's background that has been focused or selected in the date picker's calendar while portrait.

Type

Number

Used by

md-date-picker-landscape-date-size
$md-date-picker-landscape-date-size: 35px !default;
Sass (Scss)

Description

The size for a date in the date picker's calendar while landscape

Type

Number

Used by

md-date-picker-landscape-ball-size
$md-date-picker-landscape-ball-size: 32px !default;
Sass (Scss)

Description

The size for a date's background that has been focused or selected in the date picker's calendar while landscape.

Type

Number

Used by

md-clock-portrait-size
$md-clock-portrait-size: $md-picker-portrait-width - $md-dialog-padding * 2 !default;
Sass (Scss)

Description

The size for the time picker's clock on while portrait.

Type

Number

Used by

md-clock-landscape-size
$md-clock-landscape-size: $md-picker-landscape-content-height - $md-dialog-padding - ($md-dialog-padding / 2) !default;
Sass (Scss)

Description

The size for the time picker's clock while landscape.

Type

Number

Used by

md-clock-time-size
$md-clock-time-size: 36px !default;
Sass (Scss)

Description

The size of an hour or minute on the time picker's clock.

Type

Number

Used by

md-clock-hand-ball-size
$md-clock-hand-ball-size: 6px !default;
Sass (Scss)

Description

The size for the clock hand's ball. This is the circle the surrounds the current time.

Type

Number

Used by

md-clock-hand-ball-scale
$md-clock-hand-ball-scale: .4 !default;
Sass (Scss)

Description

The scale to use for the clock hand's ball when it is currently over a minute that is not divisible by 5.

Type

Number

Used by

md-clock-padding
$md-clock-padding: 4px !default;
Sass (Scss)

Description

The padding from the outside edge of the clock to the edge of one of the time circles.

Type

Number

Used by

md-picker-inline-z-index
$md-picker-inline-z-index: 12 !default;
Sass (Scss)

Description

The z-index for inline pickers.

Type

Number

Used by

See

Mixins

react-md-pickers
@mixin react-md-pickers($primary-color: $md-primary-color, $light-theme: $md-light-theme, $include-media: $md-media-included, $include-date: $md-picker-include-date, $include-time: $md-picker-include-time, $include-forceful-classes: $md-picker-include-forceful-classes) {}
Sass (Scss)
Click to expand

Description

Includes the styles for date and time pickers. If the $include-date and $include-time parameters are both false, no styles will be created.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to style with.

Color
$md-primary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme
$include-media

Boolean if the media queries should be included.

Boolean
$md-media-included
$include-date

Boolean if the date picker styles should be included.

Boolean
$md-picker-include-date
$include-time

Boolean if the time picker styles should be included.

Boolean
$md-picker-include-time
$include-forceful-classes

Boolean if the .md-picker--portrait and .md-picker--landscape classes should be included.

Boolean
$md-picker-include-forceful-classes

Examples

Example Usage SCSS

@include react-md-pickers;
Sass (Scss)

Requires

Used by

react-md-pickers-base
@mixin react-md-pickers-base($primary-color: $md-primary-color, $light-theme: $md-light-theme, $include-forceful-classes: $md-picker-include-forceful-classes) {}
Sass (Scss)
Click to expand

Description

Includes the base styles for pickers. This is styles that is used for both date and time pickers. This is normally used within the react-md-pickers mixin.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to style with.

Color
$md-primary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme
$include-forceful-classes

Boolean if the .md-picker--portrait and .md-picker--landscape classes should be included.

Boolean
$md-picker-include-forceful-classes

Examples

Example Usage SCSS

@include react-md-pickers-base;
Sass (Scss)

Requires

Used by

react-md-pickers-force-orientation
@mixin react-md-pickers-force-orientation {}
Sass (Scss)
Click to expand

Description

This includes the styles that force a certain orientation. These styles are usually not included by default because it is best to allow the device's orientation to determine the orientation of the picker.

You can either update the $md-pickers-include-forceful-classes variable before using the react-md-everything / react-md-pickers mixins, or manually use this mixin.

Parameters

None

Examples

Example Usage SCSS - Everything

$md-pickers-include-forceful-classes: true;
@include react-md-everything;
Sass (Scss)

Example Usage SCSS - Pickers

$md-pickers-include-forceful-classes: true;
@include react-md-pickers;
Sass (Scss)

Example Usage SCSS - Pickers Param

@include react-md-pickers($md-primary-color, $md-light-theme, $md-media-included, $md-pickers-include-date, $md-pickers-include-time, true);
Sass (Scss)

Example Usage SCSS - Standalone

@include react-md-pickers-force-orientation;
Sass (Scss)

Requires

Used by

See

react-md-pickers-date
@mixin react-md-pickers-date($primary-color: $md-primary-color, $light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the date picker only.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to style with.

Color
$md-primary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

@include react-md-pickers-date;
Sass (Scss)

Requires

Used by

react-md-pickers-time
@mixin react-md-pickers-time($primary-color: $md-primary-color, $light-theme: $md-light-theme) {}
Sass (Scss)
Click to expand

Description

Creates the styles for the time picker only.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to style with.

Color
$md-primary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme

Examples

Example Usage SCSS

@include react-md-pickers-date;
Sass (Scss)

Requires

Used by

react-md-pickers-make-portrait
@mixin react-md-pickers-make-portrait($include-date: $md-picker-include-date, $include-time: $md-picker-include-time) {}
Sass (Scss)
Click to expand

Description

Includes the styles for a picker to be displayed in a portrait display.

Parameters

NameDescriptionTypeDefault value
$include-date

Boolean if the date picker styles should be included.

Boolean
$md-picker-include-date
$include-time

Boolean if the time picker styles should be included.

Boolean
$md-picker-include-time

Examples

Example Usage SCSS

@media (orientation: portrait) {
  .md-picker {
    @include react-md-pickers-make-portrait;
  }
}
Sass (Scss)

Requires

Used by

react-md-pickers-make-landscape
@mixin react-md-pickers-make-landscape($include-date: $md-picker-include-date, $include-time: $md-picker-include-time) {}
Sass (Scss)
Click to expand

Description

Includes the styles for a picker to be displayed in a landscape display.

Parameters

NameDescriptionTypeDefault value
$include-date

Boolean if the date picker styles should be included.

Boolean
$md-picker-include-date
$include-time

Boolean if the time picker styles should be included.

Boolean
$md-picker-include-time

Examples

Example Usage SCSS

@media (orientation: landscape) {
  .md-picker {
    @include react-md-pickers-make-portrait;
  }
}
Sass (Scss)

Requires

Used by

react-md-pickers-media
@mixin react-md-pickers-media {}
Sass (Scss)
Click to expand

Description

Includes the media queries for pickers only if $include-date or $include-time are true. This is normally used just within the react-md-pickers mixin.

Parameters

None

Examples

Example Usage SCSS

@include react-md-pickers-media;
Sass (Scss)

Requires

Used by

See

react-md-theme-pickers
@mixin react-md-theme-pickers($primary-color: $md-primary-color, $light-theme: $md-light-theme, $include-date: $md-picker-include-date, $include-time: $md-picker-include-time) {}
Sass (Scss)
Click to expand

Description

Themes the pickers with the new colors only if the primary-color does not equal the md-primary-color, or the light-theme does not equal the md-light-theme and at least one of include-date or include-time are true.

Parameters

NameDescriptionTypeDefault value
$primary-color

The primary color to style with.

Color
$md-primary-color
$light-theme

Boolean if styling with the light theme.

Boolean
$md-light-theme
$include-date

Boolean if the date picker styles should be included.

Boolean
$md-picker-include-date
$include-time

Boolean if the time picker styles should be included.

Boolean
$md-picker-include-time

Examples

Example Usage SCSS

@include react-md-theme-pickers($md-orange-500, true);
Sass (Scss)

Requires

Used by