☰Read-only archive⌕
Looking for help with Bokeh?

This is a read-only archive. Ask questions and join the conversation on GitHub.

Visit Community Support on GitHub →
Archived discussions · Captured October 28, 2026

Changing the datepicker model and css problem

Community Support
Yanick_MacAngus
Yanick_MacAngus

Hi,

I’m attempting to change the datepicker model to attach the datepicker to a text input field. I’m working on the master branch.

The text input and datepicker are functional but the calendar is missing styling. The calendar text is formatted correctly, but there’s no button styling. I’m unsure how to apply the css from datepicker.css, since the div containing the calendar isn’t created until after the jquery datepicker function is called. Does anyone know a way around this?

Here is my datepicker.coffee code so far:

_ = require “underscore”
$ = require “jquery”
$1 = require “jquery-ui/datepicker”

InputWidget = require “./input_widget”
datepicker_template = require “./datepicker_template”
BokehView = require “…/…/core/bokeh_view”
p = require “…/…/core/properties”

class DatePickerView extends BokehView
template: datepicker_template

initialize: (options) →
super(options)
@listenTo(@model, ‘change’, @render)
html = @template(@model.attributes)
@$el.html(html)
@render()

render: () →
opts = {
value: @mget(‘value’),
min_date: @mget(‘min_date’),
max_date: @mget(‘max_date’)
}
@$(’.datepicker’).datepicker(opts)

return @

onSelect: (dateText, ui) =>
@mset(‘value’, new Date(dateText))
@mget(‘callback’)?.execute(@model)

class DatePicker extends InputWidget.Model
type: “DatePicker”
default_view: DatePickerView

@define {
# TODO (bev) types
value: [ p.Any, Date.now() ]
min_date: [ p.Any ]
max_date: [ p.Any ]
}

module.exports =
Model: DatePicker
View: DatePickerView

``

And here is my eco template:

<%= @title %>:

``

Thanks,

⌁   Link to post

End of archived discussion · Replies are disabled