# Dateの時間のみを別途変更する方法

**URL:** <https://www.nocode-faq.com/t/topic/3785>\
**Category:** bubble\
**Created:** [2023 年 7 月 17 日午前 8:07 UTC](https://www.nocode-faq.com/t/topic/3785 "2023-07-17T08:07:05Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![yunsu](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yunsu](https://www.nocode-faq.com/u/yunsu)\
**Post date:** [2023 年 7 月 17 日午前 8:07 UTC](https://www.nocode-faq.com/t/topic/3785/1 "2023-07-17T08:07:05Z")

</div>

画像のように、Date/TimePickerで選択した日付をDBに保存し、開始時間・終了時間のカラムに  
選択した日付＋ドロップダウンの時間（例：Date/TimePickerが7月30日でドロップダウンの値が6:00なら、保存されるdateはJul 30,2023 6:00 amとなる）にしたいと考えています。

「Date/TimePickerの値 change hours to ドロップダウンの値」で実装可能かと考えたのですが、画像のように上手くいかず。

お力添えいただけますと幸いです。  
よろしくお願いいたします。

 ![スクリーンショット 2023-07-17 17.06.21](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/b5d8798ca4178aa0b80020fef8a3b50da24b269d.png)  
 ![スクリーンショット 2023-07-17 16.56.22](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/b/bed13d30c125681f5ffcef4d7a4733661781dca3.png)  
 ![スクリーンショット 2023-07-17 17.27.37](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/f5b0e948e5fc43db736c57064ac60308922033e7.jpeg)  
 ![スクリーンショット 2023-07-17 16.57.15](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/0f771acdb3a0d3538518d41d2d8c1a590d34e91a.png)

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2023 年 7 月 17 日午後 1:46 UTC](https://www.nocode-faq.com/t/topic/3785/2 "2023-07-17T13:46:56Z")

</div>

change hours toとchange minutes toで、時と分の両方を変える必要があります。  
なので、そのDropdownの形式ならもう少し変換が必要。

ですが、Date time pickerなら、デフォルトで時刻を選択できる機能も付いているので、この場合恐らくそれを使った方が良いと思いますよ。

Input typeをDate & Timeにして、Time intervalを好きな間隔に設定すればOKです。

 ![2023-07-17_23h45_41](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/82f2caec758a69524a53faf79f54b0f7cda9bd70.png)

---

<div class="post-metadata">

**Author:** ![yunsu](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yunsu](https://www.nocode-faq.com/u/yunsu)\
**Post date:** [2023 年 7 月 17 日午後 2:36 UTC](https://www.nocode-faq.com/t/topic/3785/3 "2023-07-17T14:36:37Z")

</div>

Akiさん  
返信ありがとうございます！

そちらのやり方が1番簡単なのは承知しているのですが、今回はできれば質問した方法で実装したく…

change hours toとchange minutes toで各々変換する必要があるのはわかるのですが、画像の選択以降で上手く変換できずの状態です。  
ご教授いただけますと大変助かります。

---

<div class="post-metadata">

**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\
**Post date:** [2023 年 7 月 17 日午後 2:57 UTC](https://www.nocode-faq.com/t/topic/3785/4 "2023-07-17T14:57:49Z")

</div>

そもそものDropdownでの選択肢が、時と分に分かれていないので、split byこれを分け、converted to numberでtext型をnumber型に変換します。

Date time picker’s value change hours to Dropdown’s value:split by (:):first item converted to number change minutes to Dropdown’s value:split by (:):last item converted to number

これでいけると思いますー。

---

<div class="post-metadata">

**Author:** ![yunsu](https://avatars.discourse-cdn.com/v4/letter/y/e47c2d/32.png) [@yunsu](https://www.nocode-faq.com/u/yunsu)\
**Post date:** [2023 年 7 月 18 日午前 1:01 UTC](https://www.nocode-faq.com/t/topic/3785/5 "2023-07-18T01:01:47Z")

</div>

Akiさん  
上記の方法で実装することができました！  
本当に助かりました  
ありがとうございました！