DateRangePicker by vuetify

[Sanuki-073]

Thanks for nice project!

Since it was not in the components, I will publish here my own DateRangePicker that I created using Solara and vuetify.
If there are any errors in implementation, please let me know.

implementation

calender.vue

<template>
  <v-row>
    <v-col
      cols="12"
      sm="6"
      md="4"
    >
      <v-menu
        v-model="menu2"
        :close-on-content-click="false"
        :nudge-right="40"
        transition="scale-transition"
        offset-y
        min-width="auto"
        :disabled="disabled"
      >
        <template v-slot:activator="{ on, attrs }">
          <v-text-field
            v-model="formated_value"
            :label="label"
            prepend-icon="mdi-calendar"
            readonly
            v-bind="attrs"
            v-on="on"
          ></v-text-field>
        </template>
        <v-date-picker
          v-model="value"
          @input="change_value"
          range
        ></v-date-picker>
      </v-menu>
    </v-col>
  </v-row>
</template>
<script>
export default {
    data: () => ({
        value:["2022-09-01","2022-09-30"] ,
        formated_value:["2022-09-01","2022-09-30"].join(" ~ "),
        menu2: false,
    }),
    methods: {
    format_text(){
        this.formated_value=this.value.join(" ~ ")
    },

    change_value(value) {
      console.log("Selected Date:", value);
      menu2=false;
      this.format_text()
      this.on_click(value);
    }
  },
  mounted(){
    this.format_text()
    },
  
  }
</script>

calender_vue.py

import os
from datetime import date, datetime, timedelta
from typing import Any,Callable, List, Optional, Tuple, TypeVar, Union, cast

import ipyvue
import traitlets

import solara
from solara.alias import rv

class DateCalenderWidget(ipyvue.VueTemplate):
    template_file = os.path.realpath(os.path.join(os.path.dirname(__file__), "calender.vue"))
    value = traitlets.List([]).tag(sync=True)
    label = traitlets.Unicode("Date Range").tag(sync=True)
    disabled = traitlets.Bool(False).tag(sync=True)
    on_click = traitlets.Callable(None, allow_none=True)
    def vue_on_click(self,data):
        if self.on_click:
            self.on_click(data)



@solara.value_component(List[str])
def DatePicker(
    label="Date Range",
    value: Union[List[str], solara.Reactive[List[str]]] = [date(2023, 7, 28),date(2023,8,1)],
    on_value: Callable[[Any], None] = None,
    disabled: bool = False,
):
    """
    DateRangePicker

    ## Arguments
    * `label`: Label to display page.
    * `value`: The current range.
    * `on_value`: Callback to call when the value changes.
    * `disabled`: Whether the slider is disabled.
    """
    reactive_value = solara.use_reactive(value,on_value)
    del value,on_value
    days_value=reactive_value.value

    def update_value(data):
        if len(data)==2:
            reactive_value.value=sorted(data)

    return DateCalenderWidget.element(value=days_value,label=label,on_click=update_value,disabled=disabled)

example

import calender_vue
import datetime
changes = sl.reactive(0)
start_date=str(datetime.date.today()-datetime.timedelta(days=7))
end_date=str(datetime.date.today())
date_value = sl.reactive([str(start_date),str(end_date)])
def on_change_value(value):
    print(value)
    changes.value+=1
@sl.component
def Page():
    with sl.Column(style={"min-width": "600px"}):
        Calender=calender_vue.DatePicker(value=date_value,on_value=on_change_value)
        sl.Markdown(f"### Solara is awesome:{changes}", style={"color": "red"})

[maartenbreddels]

Thanks btw, really nice example. We want to make this possible without a template, and possibly make it possible using solara components itself. Thank you for sharing.

[icduck]

It would be nice to have it as Solara native API in the up coming days. We built flatpickr widget for use in Solara. Even though I have to write a lot of basic components for my little app, but it's worth it with Solara. It slows down the development time a bit. We are moving away from Streamlit.