Skip to content

API ideas #1

@cibernox

Description

@cibernox

Just a bunch of ideas for APIs

Regular datepicker for a single date, displayed inline:

{{#power-datepicker value=date onchange=(action (mut date)) as |datepicker|}}
  {{datepicker.calendar}}
{{/power-datepicker}}

Regular datepicker for a single date, with a trigger that open the dropdown when clicked. The trigger contains one input.

{{#power-datepicker value=date onchange=(action (mut date)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedDate}} onchange={{datepicker.actions.update}}/>
  {{/datepicker.trigger}}
  {{#datepicker.dropdown}}{{datepicker.calendar}}{{/datepicker.dropdown}}
{{/power-datepicker}}

Datepicker for a range, with one calendar for both dates and one trigger containing one input with a formatted range (2015/07/12 - 2016/02/19)

{{#power-datepicker-multiple 
  rangeStart=start 
  rangeEnd=end 
  startChange=(action (mut start)) 
  endChange=(action (mut end)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedRange}} onchange={{datepicker.actions.update}}/>
  {{/datepicker.trigger}}

  {{#datepicker.dropdown}}
    {{datepicker.calendar}}
  {{/datepicker.dropdown}}
{{/power-datepicker-multiple}}

Datepicker for a range, with one calendar for each date and one trigger containing one input with a formatted range (2015/07/12 - 2016/02/19)

{{#power-datepicker-multiple 
  rangeStart=start 
  rangeEnd=end 
  startChange=(action (mut start)) 
  endChange=(action (mut end)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedRange}} onchange={{datepicker.actions.update}}/>
  {{/datepicker.trigger}}

  {{#datepicker.dropdown}}
    {{datepicker.calendar}}
    {{datepicker.calendar}}
  {{/datepicker.dropdown}}
{{/power-datepicker-multiple}}

Datepicker for a range, with one calendar for each date and one trigger for each input too

{{#power-datepicker-multiple 
  rangeStart=start 
  rangeEnd=end 
  startChange=(action (mut start)) 
  endChange=(action (mut end)) as |datepicker|}}
  {{#datepicker.trigger}}
    <input value={{datepicker.formatedStart}} onchange={{datepicker.actions.updateStart}}/>
  {{/datepicker.trigger}}

  {{#datepicker.trigger}}
    <input value={{datepicker.formatedEnd}} onchange={{datepicker.actions.updateEnd}}/>
  {{/datepicker.trigger}}


  {{#datepicker.dropdown}}
    {{datepicker.calendar}}
    {{datepicker.calendar}}
  {{/datepicker.dropdown}}
{{/power-datepicker-multiple}}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions