https://github.com/cibernox/ember-power-datepicker

An extensible datepicker for Ember
https://github.com/cibernox/ember-power-datepicker

addon calendar datepicker ember

Last synced: 4 days ago
JSON representation

An extensible datepicker for Ember

• Host: GitHub
• URL: https://github.com/cibernox/ember-power-datepicker
• Owner: cibernox
• License: mit
• Created: 2016-05-31T13:12:29.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2024-11-12T08:57:59.000Z (2 months ago)
• Last Synced: 2025-01-01T14:02:50.471Z (11 days ago)
• Topics: addon, calendar, datepicker, ember
• Language: JavaScript
• Homepage: https://ember-datepicker.development.pagefrontapp.com/
• Size: 3.03 MB
• Stars: 53
• Watchers: 5
• Forks: 28
• Open Issues: 22
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Ember Power Datepicker

[![CI](https://github.com/cibernox/ember-power-datepicker/actions/workflows/ci.yml/badge.svg)](https://github.com/cibernox/ember-power-datepicker/actions/workflows/ci.yml)

[![Ember Observer Score](http://emberobserver.com/badges/ember-power-datepicker.svg)](http://emberobserver.com/addons/ember-power-datepicker)

[![npm version](https://badge.fury.io/js/ember-power-datepicker.svg)](https://badge.fury.io/js/ember-power-datepicker)

This addon it's the last member of the [Ember Power Project](http://www.ember-power-select.com/support-the-project) family and it

combines [ember-basic-dropdown](http://www.ember-basic-dropdown.com) and [ember-power-calendar](http://www.ember-power-calendar.com)

into a single datepicker component that exposes the public APIs of both components as one.

As the components this one is born from, it aims to be flexible and customizable so you can

taylor your perfect datepicker. For that it extrictly follows DDAU approach and all its

subcomponents can be omitted or replaced by your own.

## Compatibility

* Ember.js v3.28 or above

* Ember CLI v3.28 or above

* Node.js v18 or above

## Installation

* `ember install ember-basic-dropdown ember-power-calendar ember-power-datepicker`

## Setup

If you are using sass, you can import the styles in your app.scss

```scss

@import "ember-power-datepicker";

```

This component [doesn't has any style of itself](https://github.com/cibernox/ember-power-datepicker/blob/master/app/styles/ember-power-datepicker.scss), so the only thing this import is doing is

in turn importing the styles of **ember-basic-dropdown** and **ember-power-calendar**, so

this is just a convenience.

If you already use and import the styles of those addons yourself, you don't have to

import these.

## Usage

The API of the component will remind you the APIs of its both parents. It leverages

contextual components and most of the options you can pass to the original components

are accepted by this addon.

Let's see a basic example:

```hbs

  

    

  

  

    

    

  

```

The `{{dp.trigger}}` and `{{dp.content}}` come from [ember-basic-dropdown](https://www.ember-basic-dropdown.com).

You can learn more about them here: https://www.ember-basic-dropdown.com/docs/how-to-use-it

The `{{dp.nav}}` and `dp.days` components along with the `selected` and `onSelect` properties

come from [ember-power-calendar](https://www.ember-power-calendar.com).

You can learm more about them it here: http://www.ember-power-calendar.com/docs/action-handling

The `selected` and `onSelect` are the only mandatory options. You can omit them, but if

you do and you don't allow users to select a date, what do you want a datepicker for?