kitofr/Main.elm

## elm-package.json
{
    "version": "1.0.0",
    "summary": "Tell the world about your project!",
    "repository": "https://github.com/user/project.git",
    "license": "BSD3",
    "source-directories": [
        "."
    ],
    "exposed-modules": [],
    "dependencies": {
        "elm-lang/core": "5.1.1 <= v < 5.1.1",
        "elm-lang/html": "2.0.0 <= v < 2.0.0"
    },
    "elm-version": "0.18.0 <= v < 0.19.0"
}

## index.html
<html>
<head>
  <style>
    html {
      background: #F7F7F7;
      color: red;
    }
  </style>
</head>
<body>
  <script>
    var app = Elm.Main.fullscreen()
  </script>
</body>
</html>

## Main.elm
module Main exposing (..)

import Html exposing (Html, text, input, div, button, br)
import Html.Attributes as Attr exposing (type_, step, value)
import Html.Events exposing (onInput, onClick)
import Date exposing (Date)
import Task


dateInput : List (Html.Attribute msg) -> List (Html msg) -> Html msg
dateInput attr children =
    input (attr ++ [ type_ "date", step "1", Attr.min "2017-01-01" ]) children


timeInput : List (Html.Attribute msg) -> List (Html msg) -> Html msg
timeInput attr children =
    input (attr ++ [ type_ "time", step "5", Attr.min "00:00" ]) children


type Msg
    = DateUpdated String
    | TimeUpdated String
    | RequestDate
    | RecieveDate Date
    | CreateDate


type alias Model =
    { date : String
    , time : String
    , now : Maybe Date
    }


model : Model
model =
    { date = ""
    , time = ""
    , now = Nothing
    }


main : Program Never Model Msg
main =
    Html.program
        { init = ( model, Cmd.none )
        , view = view
        , update = update
        , subscriptions = always Sub.none
        }


update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        DateUpdated to ->
            ( { model | date = to }, Cmd.none )

        TimeUpdated to ->
            ( { model | time = to }, Cmd.none )

        RequestDate ->
            ( model, Task.perform RecieveDate Date.now )

        CreateDate ->
            let
                d =
                    Date.fromString (formatDateString model.date model.time)
                        |> Result.withDefault (Date.fromTime 0)
            in
                ( { model | now = Just d }, Cmd.none )

        RecieveDate now ->
            ( { model | now = Just now, date = dateStr now, time = timeStr now }, Cmd.none )


zeroPad : String -> String
zeroPad day =
    case (String.toInt day) of
        Ok num ->
            if num < 10 then
                "0" ++ day
            else
                day

        _ ->
            "00"


formatDateString : String -> String -> String
formatDateString date time =
    date ++ " " ++ time


dateStr : Date -> String
dateStr date =
    let
        year =
            Date.year date |> toString

        month =
            case Date.month date of
                Date.Jan ->
                    "01"

                Date.Feb ->
                    "02"

                Date.Aug ->
                    "08"

                Date.Sep ->
                    "09"

                _ ->
                    "12"

        day =
            Date.day date
                |> toString
                |> zeroPad
    in
        year ++ "-" ++ month ++ "-" ++ day


timeStr : Date -> String
timeStr date =
    let
        hour =
            Date.hour date |> toString |> zeroPad

        min =
            Date.minute date |> toString |> zeroPad

        sec =
            Date.second date |> toString |> zeroPad
    in
        hour ++ ":" ++ min ++ ":" ++ sec


formatDate : Maybe Date -> String
formatDate date =
    case date of
        Just d ->
            toString d

        _ ->
            "Nothing yet"


view model =
    div []
        [ button [ onClick RequestDate ] [ text "Get it now" ]
        , br [] []
        , dateInput [ onInput DateUpdated, value model.date ] []
        , div [] [ text model.date ]
        , timeInput [ onInput TimeUpdated, value model.time ] []
        , div [] [ text model.time ]
        , div [] [ text (formatDate model.now) ]
        , br [] []
        , button [ onClick CreateDate ] [ text "Create" ]
        ]
	{
	"version": "1.0.0",
	"summary": "Tell the world about your project!",
	"repository": "https://github.com/user/project.git",
	"license": "BSD3",
	"source-directories": [
	"."
	],
	"exposed-modules": [],
	"dependencies": {
	"elm-lang/core": "5.1.1 <= v < 5.1.1",
	"elm-lang/html": "2.0.0 <= v < 2.0.0"
	},
	"elm-version": "0.18.0 <= v < 0.19.0"
	}
	<html>
	<head>
	<style>
	html {
	background: #F7F7F7;
	color: red;
	}
	</style>
	</head>
	<body>
	<script>
	var app = Elm.Main.fullscreen()
	</script>
	</body>
	</html>
	module Main exposing (..)

	import Html exposing (Html, text, input, div, button, br)
	import Html.Attributes as Attr exposing (type_, step, value)
	import Html.Events exposing (onInput, onClick)
	import Date exposing (Date)
	import Task


	dateInput : List (Html.Attribute msg) -> List (Html msg) -> Html msg
	dateInput attr children =
	input (attr ++ [ type_ "date", step "1", Attr.min "2017-01-01" ]) children


	timeInput : List (Html.Attribute msg) -> List (Html msg) -> Html msg
	timeInput attr children =
	input (attr ++ [ type_ "time", step "5", Attr.min "00:00" ]) children


	type Msg
	= DateUpdated String
	\| TimeUpdated String
	\| RequestDate
	\| RecieveDate Date
	\| CreateDate


	type alias Model =
	{ date : String
	, time : String
	, now : Maybe Date
	}


	model : Model
	model =
	{ date = ""
	, time = ""
	, now = Nothing
	}


	main : Program Never Model Msg
	main =
	Html.program
	{ init = ( model, Cmd.none )
	, view = view
	, update = update
	, subscriptions = always Sub.none
	}


	update : Msg -> Model -> ( Model, Cmd Msg )
	update msg model =
	case msg of
	DateUpdated to ->
	( { model \| date = to }, Cmd.none )

	TimeUpdated to ->
	( { model \| time = to }, Cmd.none )

	RequestDate ->
	( model, Task.perform RecieveDate Date.now )

	CreateDate ->
	let
	d =
	Date.fromString (formatDateString model.date model.time)
	\|> Result.withDefault (Date.fromTime 0)
	in
	( { model \| now = Just d }, Cmd.none )

	RecieveDate now ->
	( { model \| now = Just now, date = dateStr now, time = timeStr now }, Cmd.none )


	zeroPad : String -> String
	zeroPad day =
	case (String.toInt day) of
	Ok num ->
	if num < 10 then
	"0" ++ day
	else
	day

	_ ->
	"00"


	formatDateString : String -> String -> String
	formatDateString date time =
	date ++ " " ++ time


	dateStr : Date -> String
	dateStr date =
	let
	year =
	Date.year date \|> toString

	month =
	case Date.month date of
	Date.Jan ->
	"01"

	Date.Feb ->
	"02"

	Date.Aug ->
	"08"

	Date.Sep ->
	"09"

	_ ->
	"12"

	day =
	Date.day date
	\|> toString
	\|> zeroPad
	in
	year ++ "-" ++ month ++ "-" ++ day


	timeStr : Date -> String
	timeStr date =
	let
	hour =
	Date.hour date \|> toString \|> zeroPad

	min =
	Date.minute date \|> toString \|> zeroPad

	sec =
	Date.second date \|> toString \|> zeroPad
	in
	hour ++ ":" ++ min ++ ":" ++ sec


	formatDate : Maybe Date -> String
	formatDate date =
	case date of
	Just d ->
	toString d

	_ ->
	"Nothing yet"


	view model =
	div []
	[ button [ onClick RequestDate ] [ text "Get it now" ]
	, br [] []
	, dateInput [ onInput DateUpdated, value model.date ] []
	, div [] [ text model.date ]
	, timeInput [ onInput TimeUpdated, value model.time ] []
	, div [] [ text model.time ]
	, div [] [ text (formatDate model.now) ]
	, br [] []
	, button [ onClick CreateDate ] [ text "Create" ]
	]