st.date widget

Author: kantuni

examples/widgets.py

@@ -34,5 +34,9 @@
 st.write(w7)
 
 st.subheader('Time')
-w8 = st.time('HH:MM', '12:00')
+w8 = st.time('Set an alarm for', '12:00')
 st.write(w8)
+
+st.subheader('Date')
+w9 = st.date('A date to celebrate', '1994/04/06')
+st.write(w9)

frontend/src/components/core/ReportView/ReportView.tsx

@@ -25,12 +25,13 @@ import Text from 'components/elements/Text'
 // Lazy-load display widgets.
 const Button = React.lazy(() => import('components/widgets/Button/'))
 const Checkbox = React.lazy(() => import('components/widgets/Checkbox/'))
+const DatePicker = React.lazy(() => import('components/widgets/DatePicker/'))
 const Input = React.lazy(() => import('components/widgets/Input/'))
 const Radio = React.lazy(() => import('components/widgets/Radio/'))
 const Select = React.lazy(() => import('components/widgets/Select/'))
 const Slider = React.lazy(() => import('components/widgets/Slider/'))
 const TextArea = React.lazy(() => import('components/widgets/TextArea/'))
-const Time = React.lazy(() => import('components/widgets/Time/'))
+const TimePicker = React.lazy(() => import('components/widgets/TimePicker/'))
 
 // Lazy-load display elements.
 const Audio = React.lazy(() => import('components/elements/Audio/'))
@@ -178,12 +179,13 @@ export class ReportView extends PureComponent<Props> {
       video: (el: Element) => <Video element={el} width={width} />,
       button: (el: Element) => <Button element={el} width={width} widgetMgr={this.props.widgetMgr} />,
       checkbox: (el: Element) => <Checkbox element={el} width={width} widgetMgr={this.props.widgetMgr} />,
+      date: (el: Element) => <DatePicker element={el} width={width} widgetMgr={this.props.widgetMgr} />,
       input: (el: Element) => <Input element={el} width={width} widgetMgr={this.props.widgetMgr} />,
       radio: (el: Element) => <Radio element={el} width={width} widgetMgr={this.props.widgetMgr} />,
       select: (el: Element) => <Select element={el} width={width} widgetMgr={this.props.widgetMgr} />,
       slider: (el: Element) => <Slider element={el} width={width} widgetMgr={this.props.widgetMgr} />,
       textArea: (el: Element) => <TextArea element={el} width={width} widgetMgr={this.props.widgetMgr} />,
-      time: (el: Element) => <Time element={el} width={width} widgetMgr={this.props.widgetMgr} />,
+      time: (el: Element) => <TimePicker element={el} width={width} widgetMgr={this.props.widgetMgr} />,
     })
   }
 }

frontend/src/components/widgets/DatePicker/DatePicker.tsx

@@ -0,0 +1,66 @@
+/**
+ * @license
+ * Copyright 2019 Streamlit Inc. All rights reserved.
+ */
+
+import React from 'react'
+import { Datepicker as UIDatePicker } from 'baseui/datepicker'
+import { Map as ImmutableMap } from 'immutable'
+import moment from 'moment'
+import { WidgetStateManager } from 'lib/WidgetStateManager'
+import { PureStreamlitElement, StState } from 'components/shared/StreamlitElement/'
+
+interface Props {
+  element: ImmutableMap<string, any>;
+  widgetMgr: WidgetStateManager;
+  width: number;
+}
+
+interface State extends StState {
+  value: Date;
+}
+
+class DatePicker extends PureStreamlitElement<Props, State> {
+  public constructor(props: Props) {
+    super(props)
+
+    const widgetId = this.props.element.get('id')
+    const value = this.props.element.get('value')
+
+    this.state = {
+      value: moment(value, 'YYYY/MM/DD').toDate()
+    }
+    this.props.widgetMgr.setStringValue(widgetId, value)
+    this.props.widgetMgr.sendUpdateWidgetsMessage()
+  }
+
+  private dateToString = (date: Date): string => {
+    return moment(date).format('YYYY/MM/DD')
+  }
+
+  private handleChange = (e: any): void => {
+    const widgetId = this.props.element.get('id')
+
+    this.setState({ value: e.date })
+    this.props.widgetMgr.setStringValue(widgetId, this.dateToString(e.date))
+    this.props.widgetMgr.sendUpdateWidgetsMessage()
+  }
+
+  public safeRender(): React.ReactNode {
+    const label = this.props.element.get('label')
+    const style = { width: this.props.width }
+
+    return (
+      <div className="Widget stDate" style={style}>
+        <p className="label">{label}</p>
+        <UIDatePicker
+          formatString="yyyy/MM/dd"
+          value={this.state.value}
+          onChange={this.handleChange}
+        />
+      </div>
+    )
+  }
+}
+
+export default DatePicker

frontend/src/components/widgets/DatePicker/index.tsx

@@ -0,0 +1 @@
+export { default } from './DatePicker'

frontend/src/components/widgets/Time/index.tsx

@@ -19,7 +19,7 @@ interface State extends StState {
   value: Date;
 }
 
-class Time extends PureStreamlitElement<Props, State> {
+class TimePicker extends PureStreamlitElement<Props, State> {
   public constructor(props: Props) {
     super(props)
 
@@ -33,14 +33,6 @@ class Time extends PureStreamlitElement<Props, State> {
     this.props.widgetMgr.sendUpdateWidgetsMessage()
   }
 
-  private handleChange = (value: Date): void => {
-    const widgetId = this.props.element.get('id')
-
-    this.setState({ value })
-    this.props.widgetMgr.setStringValue(widgetId, this.dateToString(value))
-    this.props.widgetMgr.sendUpdateWidgetsMessage()
-  }
-
   private stringToDate = (value: string): Date => {
     const [hours, minutes] = value.split(':').map(Number)
     const date = new Date()
@@ -55,6 +47,14 @@ class Time extends PureStreamlitElement<Props, State> {
     return hours + ':' + minutes
   }
 
+  private handleChange = (value: Date): void => {
+    const widgetId = this.props.element.get('id')
+
+    this.setState({ value })
+    this.props.widgetMgr.setStringValue(widgetId, this.dateToString(value))
+    this.props.widgetMgr.sendUpdateWidgetsMessage()
+  }
+
   public safeRender(): React.ReactNode {
     const label = this.props.element.get('label')
     const style = { width: this.props.width }
@@ -72,4 +72,4 @@ class Time extends PureStreamlitElement<Props, State> {
   }
 }
 
-export default Time
+export default TimePicker

frontend/src/components/widgets/Time/Time.tsx renamed to frontend/src/components/widgets/TimePicker/TimePicker.tsx

@@ -0,0 +1 @@
+export { default } from './TimePicker'

frontend/src/components/widgets/TimePicker/index.tsx

@@ -1240,6 +1240,14 @@ def time(self, element, ui_value, label, value=''):
         element.time.value = current_value
         return current_value
 
+    @_widget
+    def date(self, element, ui_value, label, value=''):
+        """Date picker doc string."""
+        current_value = ui_value if ui_value is not None else value
+        element.date.label = label
+        element.date.value = current_value
+        return current_value
+
     @_with_element
     def progress(self, element, value):
         """Display a progress bar.

lib/streamlit/DeltaGenerator.py

@@ -114,6 +114,7 @@ def wrapped_method(*args, **kwargs):
 checkbox        = _with_dg(_DeltaGenerator.checkbox)  # noqa: E221
 code            = _with_dg(_DeltaGenerator.code)  # noqa: E221
 dataframe       = _with_dg(_DeltaGenerator.dataframe)  # noqa: E221
+date            = _with_dg(_DeltaGenerator.date)  # noqa: E221
 deck_gl_chart   = _with_dg(_DeltaGenerator.deck_gl_chart)  # noqa: E221
 empty           = _with_dg(_DeltaGenerator.empty)  # noqa: E221
 error           = _with_dg(_DeltaGenerator.error)  # noqa: E221

lib/streamlit/__init__.py

@@ -0,0 +1,7 @@
+syntax = "proto3";
+
+message Date {
+  string id = 1;
+  string label = 2;
+  string value = 3;
+}

protobuf/Date.proto

@@ -7,6 +7,7 @@ import "Button.proto";
 import "Chart.proto";
 import "Checkbox.proto";
 import "DataFrame.proto";
+import "Date.proto";
 import "DeckGlChart.proto";
 import "DocString.proto";
 import "Empty.proto";
@@ -39,6 +40,7 @@ message Element {
     Checkbox checkbox = 20;
     DataFrame data_frame = 3;
     DataFrame table = 11;
+    Date date = 27;
     DeckGlChart deck_gl_chart = 15;
     DocString doc_string = 7;
     Empty empty = 2;
@@ -58,6 +60,6 @@ message Element {
     VegaLiteChart vega_lite_chart = 10;
     Video video = 14;
 
-    // Next ID: 27
+    // Next ID: 28
   }
 }