Input of type date to generate a date picker using Reagent in ClojureScript

I needed a date picker to use in ClojureScript application to enter date of birth.

I came across the pikaday  which I tried to use but the date range was limited and could not find a solution to not limit the date range.

The native HTML input control of type date can be generated in Reagent as follows

[:p "Enter Date Of Birth"]
;;using input control of type date to allow a date to be picked
[:input {:type "date"
:on-change (fn [e] (swap! pension-age assoc :dob (js/Date. (.-target.value e))))
}]

On the UI, the date picker

datePicker

ClojureScript – Power of Clojure to the web

ClojureScript is a compiler for Clojure that targets JavaScript. It is designed to emit JavaScript code which is compatible with the advanced compilation mode of the Google Closure optimizing compiler.

Why ClojureScript?

  • Allows to use functional programming.
  • Uses Immutable data structures. (Immutable.js library is available to enable use of immutable data structures with JavaScript. Watch Christian Johansen’s talk on Immutable JavaScript)
  • Uses Google Closure Compiler : advanced code compiling with dead code elimination
  • core.async: makes ajax asynchronous call look like synchronous without the use of callbacks
  • Om/React : React provides a functional approach for rendering DOM. Using ClojureScript and React makes some tasks , for example undo quite simple

A great tutorial to follow to learn ClojureScript is http://clojure.org/clojurescript which covers the basics of ClojureScript, environment set up with the use of Leiningen project, DOM interaction, routing,AJAX call, core.async, Om/React, browser enabled REPL and more.

The difference between JavaScript and ClojureScript is described in Compare ClojureScript with JavaScript.

Below is an example how to create an object in JavaScript and ClojureScript.

Create object in JavaScript
var foo = {foo: "bar"};
Create objects in ClojureScript
;; Create JavaScript objects with `js-obj`.
(def foo (js-obj "foo" "bar"))

;; ClojureScript supports  JavaScript data literals via the `#js` reader literal.
(def foo #js {"foo" "bar"})

;; It’s important to note that `#js` is shallow, the contents of
;;`#js` will be ClojureScript data unless preceded by `#js`.
;; This is a mutable JavaScript object with an immutable
;; ClojureScript object inside.
(def foo #js {"foo" "bar"})

Since I am using LightTable as the IDE,  an introduction to clojureScript to LightTable users is useful. If you are using a Windows machine, use ctrl + enter instead of command +ENTER to evaluate each form.

I got hooked up with the use of React with ClojureScript. The following interfaces are available to integrate React

The advantages and disadvantages of each of the above interface are described in “How to use React in ClojureScript, and why”

Furthermore external JavaScript libraries can be integrated with ClojureScript with the use of :foreign-libs option.

Building Single Page App “SimpleCalculator” with Reagent, Secretary and Accountant 

I followed the figwheel tutorial to create a project based on figwheel leiningen template.

lein new figwheel SimpleCalculator

It automatically creates a directory “SimpleCalculator”.   Open the folder using Light Table. It has the following structure.

figwheelFolderStruc

Open project.clj and add the following dependencies

[reagent "0.5.1"
:exclusions [org.clojure/tools.reader]]
[reagent-forms "0.5.13"]
[reagent-utils "0.1.7"]
[secretary "1.2.3"]
[venantius/accountant "0.1.6"
:exclusions [org.clojure/tools.reader]]

The dependencies tag look like

dependencies

Reagent is the interface for React in ClojureScript. Secretary is client side router for ClojureScript. Accountant makes navigation simple by triggering dispatches to Secretary defined routers and update browser’s path without a page reload.

Open Index.html file. Add the h3 tag above the “app” div.

<h3> Welcome to calculators</h3>

The Index.html will look like

Index

Open core.cljs  and copy and paste the code.

To run the application type
lein figwheel

lein_Figwheel

From the browser navigate to http://localhost:3449

The Maths Calculator is displayed by default

Maths_Calc

Click on BMI link to load the BMI calculator

BMI_Calc

The BMI calculation code has been taken from “Reagent: Minimalistic React for ClojureScript”

Click on Pension Age link to load Pension Age calculator

StateAgeCalc