streamlit-japanese-date-input 0.1.0

Streamlit component for date input with Japanese localization

Japanese Date Input Component for Streamlit

日本語表記に対応したStreamlit用のdate inputコンポーネントです。

特徴

• 📅 日本語の曜日表示（月、火、水、木、金、土、日）
• 📆 日本語の月表示（1月、2月、...、12月）
• 🗾 週の開始を月曜日に設定
• 🎌 日本で一般的な日付フォーマット（YYYY/MM/DD）をデフォルトに

インストール

pip install streamlit-japanese-date-input

使い方

基本的な使用例

import streamlit as st
from datetime import date, timedelta
from japanese_date_input import japanese_date_input

# ページの設定
st.set_page_config(
    page_title="Japanese Date Input Component Demo",
    page_icon="🗾",
    layout="wide"
)

st.title("🗾 Japanese Date Input Component")
st.markdown("日本語表記に対応したdate inputコンポーネントのデモです。")

# サイドバーに説明を追加
st.sidebar.header("特徴")
st.sidebar.markdown("""
- 📅 日本語の曜日表示（月、火、水...）
- 📆 日本語の月表示（1月、2月...）
- 🗾 週の開始は月曜日
- 🎌 日本で一般的な日付フォーマット対応
""")

st.sidebar.markdown("---")

# サイドバーでの使用例
st.sidebar.subheader("サイドバーでの使用例")
sidebar_date = japanese_date_input(
    "サイドバーで日付選択",
    sidebar_mode=True,  # サイドバーでは必須
    key="sidebar_example"
)
if sidebar_date:
    st.sidebar.info(f"選択: {sidebar_date}")

st.sidebar.caption("💡 サイドバーで使用する場合は`sidebar_mode=True`を設定してください")

st.markdown("---")

# 基本的な使用例
st.subheader("1. 基本的な使用例")
col1, col2 = st.columns(2)

with col1:
    selected_date1 = japanese_date_input(
        "日付を選択してください",
        key="basic_example"
    )
    if selected_date1:
        st.success(f"選択された日付: {selected_date1}")

with col2:
    st.code("""
selected_date = japanese_date_input(
    "日付を選択してください"
)
""", language="python")

st.markdown("---")

# デフォルト値の設定
st.subheader("2. デフォルト値の設定")
col1, col2 = st.columns(2)

with col1:
    selected_date2 = japanese_date_input(
        "誕生日",
        value=date(2000, 1, 1),
        key="default_value_example"
    )
    if selected_date2:
        age = (date.today() - selected_date2).days // 365
        st.info(f"選択された日付: {selected_date2} (約{age}歳)")

with col2:
    st.code("""
selected_date = japanese_date_input(
    "誕生日",
    value=date(2000, 1, 1)
)
""", language="python")

st.markdown("---")

# 日付範囲の制限
st.subheader("3. 日付範囲の制限")
col1, col2 = st.columns(2)

with col1:
    min_date = date.today() - timedelta(days=365)
    max_date = date.today() + timedelta(days=365)
    
    selected_date3 = japanese_date_input(
        "予約日（1年以内）",
        value=date.today(),
        min_value=date.today(),
        max_value=max_date,
        key="date_range_example"
    )
    if selected_date3:
        days_from_today = (selected_date3 - date.today()).days
        st.info(f"選択された日付: {selected_date3} (今日から{days_from_today}日後)")

with col2:
    st.code("""
selected_date = japanese_date_input(
    "予約日（1年以内）",
    value=date.today(),
    min_value=date.today(),
    max_value=date.today() + timedelta(days=365)
)
""", language="python")

st.markdown("---")

# 異なるフォーマット
st.subheader("4. 異なる日付フォーマット")
col1, col2, col3 = st.columns(3)

with col1:
    st.write("YYYY/MM/DD (デフォルト)")
    date_fmt1 = japanese_date_input(
        "標準フォーマット",
        format="YYYY/MM/DD",
        key="format1"
    )
    if date_fmt1:
        st.write(f"選択: {date_fmt1}")

with col2:
    st.write("YYYY-MM-DD")
    date_fmt2 = japanese_date_input(
        "ハイフン区切り",
        format="YYYY-MM-DD",
        key="format2"
    )
    if date_fmt2:
        st.write(f"選択: {date_fmt2}")

with col3:
    st.write("YYYY.MM.DD")
    date_fmt3 = japanese_date_input(
        "ドット区切り",
        format="YYYY.MM.DD",
        key="format3"
    )
    if date_fmt3:
        st.write(f"選択: {date_fmt3}")

st.markdown("---")

# ヘルプテキストと無効化
st.subheader("5. ヘルプテキストと無効化")
col1, col2 = st.columns(2)

with col1:
    st.write("ヘルプテキスト付き")
    date_help = japanese_date_input(
        "開始日",
        key="help_example"
    )
    
with col2:
    st.write("無効化された入力")
    date_disabled = japanese_date_input(
        "終了日（編集不可）",
        value=date.today() + timedelta(days=30),
        disabled=True,
        key="disabled_example"
    )

st.markdown("---")

# 複数の日付入力の連携
st.subheader("6. 複数の日付入力の連携例")

start_date = japanese_date_input(
    "開始日",
    value=date.today(),
    key="start_date"
)

end_date = japanese_date_input(
    "終了日",
    value=date.today() + timedelta(days=7),
    min_value=start_date if start_date else date.today(),
    key="end_date"
)

if start_date and end_date:
    duration = (end_date - start_date).days
    if duration >= 0:
        st.success(f"期間: {duration + 1}日間 ({start_date} から {end_date})")
    else:
        st.error("終了日は開始日より後の日付を選択してください")

# フッター
st.markdown("---")
st.markdown("""
<div style='text-align: center; color: gray;'>
    <p>Japanese Date Input Component for Streamlit</p>
    <p>Made with ❤️ using Streamlit Components</p>
</div>
""", unsafe_allow_html=True)

パラメータ

• label (str): 入力フィールドのラベル
• value (date/datetime/str, optional): 初期値
• min_value (date/datetime/str, optional): 選択可能な最小日付
• max_value (date/datetime/str, optional): 選択可能な最大日付
• format (str): 日付フォーマット（デフォルト: "YYYY/MM/DD"）
• disabled (bool): 入力を無効化するかどうか
• width (str or int): ウィジェットの幅（"stretch"または固定ピクセル値）
• sidebar_mode (bool): サイドバーでの表示に最適化するかどうか（デフォルト: False）
• key (str, optional): コンポーネントの一意のキー

サイドバーでの使用について

Streamlitのカスタムコンポーネントは独立したiframe内で動作するため、自動的にサイドバーコンテキストを検出することができません。そのため、サイドバーで使用する場合はsidebar_mode=Trueを明示的に指定する必要があります。

# サイドバーでの使用例
with st.sidebar:
    selected_date = japanese_date_input(
        "日付を選択",
        sidebar_mode=True  # サイドバーでは必ずTrueに設定
    )

sidebar_mode=Trueを設定すると

• 背景色が白になり、サイドバーのデザインに調和します
• テキストカラーが黒になります

制限事項

iframe内での動作による制限

Streamlitのカスタムコンポーネントはiframe内で動作するため、以下の制限があります。

1. 極端に狭い幅での表示制限

   • 幅が狭いコンテナでは、カレンダーが見切れる可能性があります
   • 2カラムレイアウトのサイドバーなど、極端に狭い幅での使用はカレンダーが見切れてしまう可能性が高いです。

2. 親ウィンドウへのアクセス制限

   • カレンダーはiframe内に制限されるため、親ウィンドウの外側に拡張できません
   • そのため、狭いコンテナではカレンダーをスケールダウンして表示します

3. サイドバー検出の制限

   • iframe内からサイドバーコンテキストを自動検出できないため、sidebar_modeパラメータを手動で設定する必要があります

推奨事項

• サイドバーでの使用時は、十分な幅を確保することを推奨します
• 極端に狭いレイアウトが必要な場合は、標準のst.date_inputの使用を検討してください