如何在绘图破折号中的日期范围选择器之前获取文本标签？答案

【问题标题】：How to get a text label before a daterangepicker in plotly dash?如何在绘图破折号中的日期范围选择器之前获取文本标签？
【发布时间】：2020-05-28 20:22:44
【问题描述】：

这应该只是将文本放在前面并制作 div 内联块或类似的东西。

希望它看起来像“日期：”。使用 html.Div 失败，并且即使 DATE 在 2nd Div 中，也会将内容放在单独的行中。

from datetime import datetime as dt
import dash
import dash_html_components as html
import dash_core_components as dcc
import re

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = html.Div([
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2017, 9, 19),
        initial_visible_month=dt(2017, 8, 5),
        end_date=dt(2017, 8, 25).date()
    ),
    html.Div(id='output-container-date-picker-range')
])


@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output(start_date, end_date):
    string_prefix = 'You have selected: '
    if start_date is not None:
        start_date = dt.strptime(re.split('T| ', start_date)[0], '%Y-%m-%d')
        start_date_string = start_date.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
    if end_date is not None:
        end_date = dt.strptime(re.split('T| ', end_date)[0], '%Y-%m-%d')
        end_date_string = end_date.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'End Date: ' + end_date_string
    if len(string_prefix) == len('You have selected: '):
        return 'Select a date to see it displayed here'
    else:
        return string_prefix


if __name__ == '__main__':
    app.run_server(debug=True)

【问题讨论】：

您介意提供mcve吗？
完成。我只是抓住了一个例子。
而您只需 python file.py 运行它。
这可能很简单......它只是输出html，但我无法弄清楚你在哪里塞东西。可能设置了一个 id 和 css 这是他们所期望的。

标签： plotly plotly-dash

【解决方案1】：

这个布局适合你吗？

app.layout = html.Div([
    html.Div(["DATE: ",
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=dt(1995, 8, 5),
        max_date_allowed=dt(2017, 9, 19),
        initial_visible_month=dt(2017, 8, 5),
        end_date=dt(2017, 8, 25).date()
    )],
    style={'width': '49%', 'display': 'inline-block'}), 
    html.Div(id='output-container-date-picker-range')
])

诀窍是添加另一个Div，其中包含两个元素和inline-block 样式。

【讨论】：