How can I alter the style of the Jupyter ipywidgets DatePicker widget?

Question

I am using ipywidgets in a Jupyter Notebook, in particular, the DatePicker widget, and would like to know if there's a way to dig into the guts of the widget to alter its appearance. For example, the DatePicker widget comes wrapped in a box that appears to be 300px wide and 28px high (determined by using "inspect element" in Firefox on the displayed DatePicker widget). I'd like the ability to control the properties of this box. Where is this style determined?

Internet searching consistently leads to this page, but the information contained there seems pretty generic and I cannot seem to find the specific kind of information I'm after.

Similarly (at least I find) looking through the source code located at, for example, lib/python3.6/site-packages/ipywidgets/widgets/widgets_date.py not very enlightening.

I have tried what I thought might be the obvious things to do:

from ipywidgets import widgets
dp = widgets.DatePicker()
display(dp)

#Now try to set border style to red, for example.

dp.layout.border = 'solid 1px #ff0000'
display(dp)

#No change. :( Or rather, I should say, this adds yet another border,
#but leaves the original unchanged.

Has anyone had some experience in understanding where this display style is getting set or how to customize it?

An update: I followed the guidelines at this page to set up a custom date picker widget (see below where I make the box a little bit bigger and color the background red just because) and I guess now that the properties of the DatePicker widget are getting set by some Javscript somewhere. I'd still like to know if these properties can be modified without having to reinvent the wheel. The ipywidgets DatePicker widget already exists, it seems like a waste to write my own just because I want to customize the look of it.

from __future__ import print_function
import ipywidgets as widgets
from traitlets import Unicode, validate

class DateWidget(widgets.DOMWidget):
    _view_name = Unicode('DatePickerView').tag(sync=True)
    _view_module = Unicode('datepicker').tag(sync=True)
    value = Unicode().tag(sync=True)

%%javascript
requirejs.undef('datepicker');

define('datepicker',["jupyter-js-widgets"],function(widgets){

    var DatePickerView = widgets.DOMWidgetView.extend({
        render:function(){
            this.date = document.createElement('input');
            this.date.setAttribute('type','date');
            this.date.style.width = '350px';
            this.date.style.height = '45px';
            this.date.backgroundColor = '#ff0000';
            this.el.appendChild(this.date);
            this.update();
        },

        update:function(){
            this.date.value = this.model.get('value');
            return DatePickerView.__super__.update.apply(this);
        },

        events:{
            "change":"handle_date_change"
        },

        handle_date_change:function(event){
            this.model.set('value',this.date.value);
            this.touch();
        },
    });

    return{
        DatePickerView:DatePickerView
    };
});

dp=DateWidget()
dp

How can I alter the style of the Jupyter ipywidgets DatePicker widget?

0 Answers0