Как я могу изменить стиль виджета DatePicker для Jupyter ipywidgets? - PullRequest
Новая
       22

Как я могу изменить стиль виджета DatePicker для Jupyter ipywidgets?

0 голосов
/ 30 июня 2019

Я использую ipywidgets в блокноте Jupyter, в частности, в виджете DatePicker, и хотел бы знать, есть ли способ покопаться в кишках виджета, чтобы изменить его внешний вид.Например, виджет DatePicker поставляется в рамке, которая имеет ширину 300 пикселей и высоту 28 пикселей (определяется с помощью «проверить элемент» в Firefox на отображаемом виджете DatePicker).Я хотел бы иметь возможность контролировать свойства этой коробки.Где определяется этот стиль?

Поиск в Интернете постоянно приводит к этой странице , но содержащаяся там информация кажется довольно общей, и я не могу найти конкретную информацию, которую я ищу.

Точно так же (по крайней мере я нахожу) просмотр исходного кода, расположенного, например, в lib / python3.6 / site-packages / ipywidgets / widgets / widgets_date.py, не очень поучительный.

Я попробовал то, что яМысль может быть очевидным, что нужно сделать: 

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.

Кто-нибудь имел некоторый опыт в понимании, где устанавливается этот стиль отображения или как его настроить?

Обновление: я следовал зарекомендации по этой странице по настройке пользовательского виджета выбора даты (см. ниже, где я делаю поле немного больше и окрашиваю фон красным только потому, что), и теперь я предполагаю, что свойства виджета DatePickerполучить где-то JavscriptЯ все еще хотел бы знать, могут ли эти свойства быть изменены без необходимости изобретать велосипед.ipywidgets DatePicker виджет уже существует, кажется, напрасно писать свой собственный только потому, что я хочу настроить его внешний вид. 

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
...