Metadata-Version: 2.4
Name: streamlit-japanese-date-input
Version: 0.1.0
Summary: Streamlit component for date input with Japanese localization
Home-page: https://github.com/gussan-me/streamlit_japanese_date_input
Author: Ayumu Yamaguchi
Author-email: 
Classifier: Programming Language :: Python :: 3.10
Classifier: Programming Language :: Python :: 3.11
Classifier: Programming Language :: Python :: 3.12
Requires-Python: >=3.10
Description-Content-Type: text/markdown
License-File: LICENSE
Requires-Dist: streamlit>=1.28.0
Provides-Extra: devel
Requires-Dist: wheel; extra == "devel"
Requires-Dist: pytest==7.4.0; extra == "devel"
Requires-Dist: playwright==1.48.0; extra == "devel"
Requires-Dist: requests==2.31.0; extra == "devel"
Requires-Dist: pytest-playwright-snapshot==1.0; extra == "devel"
Requires-Dist: pytest-rerunfailures==12.0; extra == "devel"
Dynamic: author
Dynamic: classifier
Dynamic: description
Dynamic: description-content-type
Dynamic: home-page
Dynamic: license-file
Dynamic: provides-extra
Dynamic: requires-dist
Dynamic: requires-python
Dynamic: summary

# Japanese Date Input Component for Streamlit

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

## 特徴

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

## インストール

```bash
pip install streamlit-japanese-date-input
```

## 使い方

### 基本的な使用例

```python
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`を明示的に指定する必要があります。

```python
# サイドバーでの使用例
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`の使用を検討してください
