iT邦幫忙

1

HTML input Date 只有日期

  • 分享至 

  • xImage

有甚麼方式可以改格式
我只需要選擇日期不用年份
js 或 html 要怎下格式條件

還是只能用其他UI套件
另外 bootstrap5 以上的 Datepicker是不是沒有了 google都是V3跟V4的

<input type='date'>
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
純真的人
iT邦大師 1 級 ‧ 2023-06-01 11:14:42

你可以參考以下說明
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

也許你可以改成當月區間

<form>
  <label>
    區間日期:
    <input type="date" name="party" min="2023-06-01" max="2023-06-20" />
  </label>
</form>
看更多先前的回應...收起先前的回應...
柯柯 iT邦新手 3 級 ‧ 2023-06-01 11:21:28 檢舉

因為要讓使用者選擇 類似固定日期
1/1 元旦
5/1 勞動節
10/10 國慶

iT邦新手 4 級 ‧ 2023-06-01 11:27:12 檢舉

如果是要讓使用者選擇固定日期,有考慮用<select>嗎?

那就不適合input date了@@~
直接寫input radio或checkbox 給使用者直接選還比較快~

柯柯 iT邦新手 3 級 ‧ 2023-06-01 11:37:07 檢舉

是有考慮 不過select 就會變成 需要兩個 一個選月 一個選日
因為有可能會有其他 慶祝或活動時間
剛剛沒有說清楚 除了上面那幾個日期外
可能會有 6/1 廠慶停工 9/29 中秋 這種

沒辦法用單個select去給固定日期
所以想說先找跟問看看有沒有辦法把date格式做到能選日期而已
如果真的不能 就會用select去個別選月跟日

我看瀏覽器的行事曆是預設的~沒查到可以改行事曆格式
即使可以設定指定日期,他應該也是某個月份顯示可以按的日期
其他跨月的日期,還要按上個月或下個月應該很麻煩.

柯柯 iT邦新手 3 級 ‧ 2023-06-01 11:45:43 檢舉

那還是用seletct做 使用者去個別挑月跟日 在後端自己在組起來好了

<select name='month'></select>月
<select name='day'></select>日

謝謝

froce iT邦大師 1 級 ‧ 2023-06-01 13:00:47 檢舉

看起來像是月曆功能。你需要像下面這種UI設計方式?
https://www.naiveui.com/zh-CN/os-theme/components/calendar
把datepicker的期間限制改成年內不就好了...
用兩個select你還要考慮閏年、大小月。

柯柯 iT邦新手 3 級 ‧ 2023-06-01 14:03:28 檢舉

他是有點類似特定日期不做事的設定
所以不會到月曆那麼大 XDD
大小月跟年的問題就用程式計算該年的該月有幾天 月份去連動日的select

1

一般日期套件,大多是無法捨棄年的設定。

所以唯一的做法只能將「月」「日」做區分選擇。
或是利用程式來做對應處理。

當用的方式,在提取日期資料時。還是依 Y-m-d 來範圍提取。
但顯示還是 m-d
簡易的方式則是用兩個SELECT來處理
月 -> 1~12
日 -> 1~31

至於日的部份。因為會有只有 27、28、30的問題存在。
這就用程式碼來區分處理就行了。

看更多先前的回應...收起先前的回應...
柯柯 iT邦新手 3 級 ‧ 2023-06-01 14:07:25 檢舉

對 找到的套件都一定有年
我設定的部分想說 只要設定日期
因為1/1 10/10 這種都是每年都固定的
使用者只要每年額外去修改 中秋這種 照農曆 會變動的就好了
所以年份的部分就想說直接拿掉
目前就用js 去計算今年跟選定的月份去抓他的天數 連動日的select

我之前也有月日的需求。
而且客戶還希望一個下拉選擇月日。
(時間週期不長,就是後30天的選擇。)

下拉的格式要像是

01/01
01/02
01/03
.
.
01/30

我是利用了 moment 來取得日期後。
再將其化為「月日」放上來。

你可以參考看看

froce iT邦大師 1 級 ‧ 2023-06-02 08:26:35 檢舉

目前我是改用day.js,比moment簡單。

froce iT邦大師 1 級 ‧ 2023-06-02 08:38:35 檢舉

每年額外去修改 中秋這種 照農曆 會變動的就好了

啊這果然就機關的行事曆啊,我個人會建議參照
https://www.dgpa.gov.tw/information?uid=83&pid=11013
這種UI設計,固定假期存在後端,加上星期六日,送到前端去幫他預設勾選放假就行了。現在的話可能可以去解析google公開的台灣假日的ics去帶。
https://calendar.google.com/calendar/ical/zh-tw.taiwan%23holiday%40group.v.calendar.google.com/public/basic.ics

你直接幫使用者直接寫入固定假日,萬一哪天他真的需要調撥就很麻煩了。所以我會建議,不管你要用哪種UI設計,一定要先給使用者確認對過一次日期是否正確。

我之前做是用這套件,因為他有整年的inline模式
https://reservas.med.up.pt/reservas/sites/all/libraries/multidatespicker/

我要發表回答

立即登入回答