Open1
SvelteKit で type="date" の input にプレースホルダテキストを表示する
Acha_for_CSSvelteKit で type="date" の input にプレースホルダテキストを表示する
やりたいこと
クリックしていないときはこう↓
クリックするとカレンダーで日付を入力できる↓
解決方法
on:focus と on:blur で is_issue_date_in_focus の値を書き換えて、is_issue_date_in_focus が true なら type="date" の方を表示します。
<script lang="ts">
let is_issue_date_in_focus = false
function handle_focus_issue_date(): void {
is_issue_date_in_focus = true
}
function handle_blur_issue_date(): void {
is_issue_date_in_focus = false
}
</script>
<div>
{#if is_issue_date_in_focus}
<input
type="date"
bind:value={issue_date}
on:change={handle_change_items}
on:blur={handle_blur_issue_date}
name="issue_date"
/>
{:else}
<input
type="text"
bind:value={issue_date}
on:change={handle_change_items}
on:focus={handle_focus_issue_date}
placeholder="納品書発行日"
name="issue_date"
/>
{/if}
</div>
もっとスマートな方法がありましたら、コメントにて是非教えてください。
なお、こちらの記事を参考にさせていただきました↓