Giter VIP home page Giter VIP logo

cljs-pikaday's Introduction

cljs-pikaday

cljs-pikaday is intended to provide a native ClojureScript interface to the Pikaday JavaScript date picker, intended for use in the various ClojureScript react frameworks.

The implementation currently works for reagent (I'm hoping to add an Om implementation soon, and maybe a nicer interface for re-frame).

cljs-pikaday currently uses plain JavaScript Date objects for its values - I'd like to have it able to use cljs-time and/or moment at some point, because ugh, JavaScript Date objects.

Installation

Add [cljs-pikaday "0.1.0"] to your project's :dependencies vector:

Clojars Project

reagent interface

The reagent implementation accepts an ratom (or reaction) as its input. When the user selects a new date, the component will update the atom, and if the atom is updated elsewhere, the date-picker will display the new date.

There is a more fleshed-out example in the examples/reagent directory, but the simplest way to use it would be something like this:

(ns cljs-pikaday.core
    (:require [reagent.core :as reagent]
              [cljs-pikaday.reagent :as pikaday]))

(defonce the-date (reagent/atom (js/Date.)))

(defn home-page []
  [:div [:h2 "Select a date"]
    [pikaday/date-selector {:date-atom the-date}]])

(reagent/render [home-page] (.getElementById js/document "app")))

pikaday/date-selector returns code for an <input> tag, and sets up various reagent lifecycle methods to instantiate and bind a Pikaday instance. When the user selects a new date in the input field, the atom passed in to the :date-atom property will be reset! with its new value.

There is an example reagent project which demonstrates some additional functionality.

CSS

Pikaday comes with its own CSS file, which is autoloadable through various javascript packaging tools. If an interface to these exists in ClojureScript I can't find it, so as a workaround it's probably easiest to simplly download the pikaday.css file from github and reference it in your HTML.

TODO

  • document min/max date atoms
  • Om interface
  • tests(!)

cljs-pikaday's People

Contributors

timgilbert avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.