Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/n1k0/elm-daterange-picker
A date range picker written in Elm.
https://github.com/n1k0/elm-daterange-picker
component datepicker elm html time
Last synced: 7 days ago
JSON representation
A date range picker written in Elm.
- Host: GitHub
- URL: https://github.com/n1k0/elm-daterange-picker
- Owner: n1k0
- License: mit
- Created: 2019-07-11T13:49:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-08T17:20:46.000Z (almost 2 years ago)
- Last Synced: 2024-11-02T07:33:20.573Z (14 days ago)
- Topics: component, datepicker, elm, html, time
- Language: Elm
- Homepage: https://package.elm-lang.org/packages/n1k0/elm-daterange-picker/latest/
- Size: 339 KB
- Stars: 12
- Watchers: 5
- Forks: 5
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# elm-daterange-picker
A date range picker written in [Elm](https://elm-lang.org/) ([Demo](https://n1k0.github.io/elm-daterange-picker/)).
> Note: this package, previously known as `allo-media/elm-daterange-picker`, has moved to `n1k0/elm-daterange-picker`. New versions will be released from there, but starting from `1.0.0`.
## How is this useful?
Selecting a date range is a common operation for many Web applications. While there are offerings in the Elm ecosystem, we couldn't find any ergonomic equivalent of [daterangepicker](http://www.daterangepicker.com/), which this package takes a lot of inspiration from.
## Demo
You can look at how this package can be used by browsing this demo code [here](https://github.com/n1k0/elm-daterange-picker/blob/master/demo/Main.elm).
## Usage
```elm
import Browser
import DateRangePicker as Picker
import Html exposing (Html, text)
type alias Model =
{ picker : Picker.State }
type Msg
= PickerChanged Picker.State
init : () -> ( Model, Cmd Msg )
init _ =
let
picker =
Picker.init Picker.defaultConfig Nothing
in
( { picker = picker }
, Picker.now PickerChanged picker
)
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
PickerChanged state ->
( { model | picker = state }, Cmd.none )
view : Model -> Html Msg
view model =
Picker.view PickerChanged model.picker
main =
Browser.element
{ init = init
, update = update
, view = view
, subscriptions = .picker >> Picker.subscriptions PickerChanged
}
```
## Customize styles
By default, we have not defined any default `font-family`, so that the style fits any app/site.
You can use the [style.css] file or its [SCSS source] as a starting point for fine-tuning the default styles of the datepicker, which also uses CSS variables to help you tweaking most colors used by the component; just add your own root colors **after** calling our CSS, and it's done:
```CSS
:root {
--edrp-background-color: #fff;
--edrp-font-color: rgba(0, 0, 0, 0.8);
--edrp-primary-color: rgb(82, 143, 255);
--edrp-primary-color-alpha: rgba(82, 143, 255, 0.25);
--edrp-border-color: lightgrey;
}
```
So if you have questionable tastes, you can eventually obtain this:
## Install
elm install n1k0/elm-daterange-picker
## Local install
npm install
## Run the demo
The demo is powered by [parcel](https://parceljs.org/), meaning any code changes will trigger a page reload. Neat!
npm start
Then head to [localhost:1234](http://localhost:1234/) from your browser.
## Credits
- [BeardedBear](https://github.com/BeardedBear) for the default styles.
- [Allo-Media](https://www.allo-media.net/) for initially backing up the package development.
## License
MIT
[style.css]: https://github.com/n1k0/elm-daterange-picker/blob/master/demo/style.css
[scss source]: https://github.com/n1k0/elm-daterange-picker/blob/master/demo/style.scss