Skip to content
This repository has been archived by the owner on Dec 2, 2021. It is now read-only.

Latest commit

 

History

History
148 lines (119 loc) · 4.65 KB

DatePicker.md

File metadata and controls

148 lines (119 loc) · 4.65 KB
Raw

#DatePicker Date/time picker wheel for famo.us.

This component can be used as a date/time picker, a clock or any other application which requires a date/time wheel.

Example:

var DatePicker = require('famous-flex/widgets/DatePicker');

var datePicker = new DatePicker({
  date: new Date(),        // initial date
  wheelLayout: {
    itemSize: 100,         // height of an item on the date/wheel
    diameter: 300,         // diameter of the wheel (undefined = 3 x itemSize)
    radialOpacity: 0       // opacity at the top and bottom diameter edge
  });
});
datePicker.setComponents([
  new DatePicker.Component.FullDay(),  // full-day component (year + month + day)
  new DatePicker.Component.Hour(),     // hour component (0..23)
  new DatePicker.Component.Minute()    // minute compoent (0..59)
]);
this.add(datePicker); // add to the render-tree

datePicker.on('datechange', function(event) {
  console.log('new date selected: ' + event.date.toLocaleString());
});

CSS:

.famous-flex-datepicker .item {
  text-align: center;
  font-size: 40px;
  line-height: 60px; // this should equal the WheelLayout itemSize
}

##class: DatePicker ⏏ Extends: View
Members

###new DatePicker(options, [components], [overlay]) Params

  • options Object - Configurable options.
    • [perspective] Number - Perspective to use when rendering the wheel.
    • [wheelLayout] Object - Layout-options that are passed to the WheelLayout.
    • [scrollController] Object - Options that are passed to the underlying ScrollControllers.
    • [container] Object - Container-options that are passed to the underlying ContainerSurface.
  • [components] Array - Date/time components (see setComponents).
  • [overlay] Object - Overlay renderables (see setOverlay).

Extends: View
###datePicker.setOptions(options) Patches the DatePicker instance's options with the passed-in ones.

Params

  • options Object - Configurable options (see ScrollController for all inherited options).
    • [perspective] Number - Perspective to use when rendering the wheel.
    • [overlay] Object - Overlay renderables (top, middle & bottom).
    • [wheelLayout] Object - Layout-options that are passed to the WheelLayout.
    • [scrollController] Object - Options that are passed to the underlying ScrollControllers.

Returns: DatePicker - this
###datePicker.setComponents(components) Sets the components for the date-picker.

Params

  • components Array - Array of DatePicker.Component objects.

Returns: DatePicker - this
###datePicker.getComponents() Get the components for the date-picker.

Returns: Array - components
###datePicker.setOverlay(overlay) Sets the top, middle & bottom renderables that are displayed in front of the datepicker.

Example:

var datePicker = new DatePicker({...});
datePicker.setOverlay({
  top: new Surface({
    properties: {
      pointerEvents: 'none',
      backgroundColor: 'rgba(255, 255, 255, 0.5)',
      borderBottom: '1px solid #777777'
    }
  }),
  bottom: new Surface({
    properties: {
      pointerEvents: 'none',
      backgroundColor: 'rgba(255, 255, 255, 0.5)',
      borderTop: '1px solid #777777'
    }
  })
});

Params

  • overlay Object - top, middle and bottom renderables

Returns: DatePicker - this
###datePicker.getOverlay() Get the overlay renderables for the date-picker.

Returns: Object - overlay renderables
###datePicker.setDate(date) Set the selected date.

Params

  • date Date - Selected date/time.

Returns: DatePicker - this
###datePicker.getDate() Get the selected date.

Returns: Date - selected date