# DatePicker event handler not working

**URL:** <https://discourse.julialang.org/t/datepicker-event-handler-not-working/84257>\
**Category:** Web Stack\
**Tags:** question, genie, stipple\
**Created:** [July 15, 2022, 8:34am UTC](https://discourse.julialang.org/t/datepicker-event-handler-not-working/84257 "2022-07-15T08:34:41Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![ohmsweetohm1](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ohmsweetohm1/32/49126_2.png) [@ohmsweetohm1](https://discourse.julialang.org/u/ohmsweetohm1)\
**Post date:** [July 15, 2022, 8:34am UTC](https://discourse.julialang.org/t/datepicker-event-handler-not-working/84257/1 "2022-07-15T08:34:41Z")

</div>

I’m able to perform some action when the button is pressed but not when the daterange changes:

```julia
using Stipple
using StippleUI
using StipplePlotly
using Random

palette = [
    "#e61c4c",
    "#004976",
    "#3fa535",
    "#9d9d9b",
]

@reactive mutable struct Dashboard <: ReactiveModel
    daterange::R{DateRange} = DateRange(today() - Day(3), (today()))
    rstring::R{String} = ""
    regen::R{Bool} = false

    plot_data1::R{Vector{PlotData}} = PlotData[]
    plot_layout1::R{PlotLayout} = PlotLayout()
    plot_data2::R{Vector{PlotData}} = [
        PlotData(
            x = 1:100, 
            y = cumsum(randn(100)), 
            plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER,
            marker = PlotDataMarker(color = palette[1]),
            name = "First",
        ),
        PlotData(
            x = 1:100, 
            y = cumsum(randn(100)), 
            plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER,
            marker = PlotDataMarker(color = palette[2]),
            name = "Second",
        ),
    ]
    plot_layout2::R{PlotLayout} = PlotLayout()
end

function ui(model)
    page(model, class="container", [
        heading("Dashboard")
        row([
            cell(class="st-module", [
                datepicker(:daterange, range=true, minimal=true)
            ]),
            cell(class="st-module", [
                p([
                    button("Action!", @click("regen = true"))
                ])
                p([
                    "Output: "
                    span("", @text(:rstring))
                ])
            ])
        ])
        row([
            cell(class="st-module", [
                h4("Some Plot")
                plot(:plot_data1; layout=:plot_layout1)
            ]),
            cell(class="st-module", [
                h4("Some other Plot")
                plot(:plot_data2; layout=:plot_layout2)
            ])
        ])
      ]
    )
end

function updateData!(model::M) where {M<:ReactiveModel}
    model.plot_data1[] = [
        PlotData(
            x = 1:100, 
            y = cumsum(randn(100)), 
            plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER,
            marker = PlotDataMarker(color = palette[1]),
            name = "First",
        ),
        PlotData(
            x = 1:100, 
            y = cumsum(randn(100)), 
            plot = StipplePlotly.Charts.PLOT_TYPE_SCATTER,
            marker = PlotDataMarker(color = palette[2]),
            name = "Second",
        ),
    ]
    
    return nothing
end

function handlers(model::M) where {M<:ReactiveModel}
    on(model.daterange) do _
        updateData!(model)
    end
    on(model.regen) do _
        if (model.regen[])
            updateData!(model)
            model.rstring[] = Random.randstring(10)
            model.regen[] = false
        end
    end
    model
end

route("/") do
    model = Dashboard |> init |> handlers
    html(ui(model), context = @ __MODULE__ )
end

isrunning(:webserver) || up()

```

---

<div class="post-metadata">

**Author:** ![ohmsweetohm1](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/ohmsweetohm1/32/49126_2.png) [@ohmsweetohm1](https://discourse.julialang.org/u/ohmsweetohm1)\
**Post date:** [July 15, 2022, 8:35am UTC](https://discourse.julialang.org/t/datepicker-event-handler-not-working/84257/2 "2022-07-15T08:35:47Z")

</div>

The left plot is static and the right one should change when pressing the button or changing the date range:

 ![image](https://global.discourse-cdn.com/julialang/original/3X/f/3/f3e1534b1029760d66d0e2250adb1df4ba10a412.png)