16
Views
4
Comments
Solved
How to disable minute selection in DatePicker?
Application Type
Reactive

Hi everyone!


Is there a way to disable minute selection in the DatePicker? I would like it to always default to “00”. 

2019-11-11 17-10-24
Manish Jawla
 
MVP
Solution

Hi @Łukasz Kaproń ,

It was not easy to fix.

It took me multiple tries to achieve the desired result :) .

I have attached the sample .oap for your reference.

Solution: I have added custom Css to achieve this feature, you can check Css of the page. 

Regards,

Manish Jawla

CalendardatePicker.oap
2025-12-29 06-17-15
Deepak Raj M
Solution

Hi ,

You can use java script also to solve this 

  • Drag your DatePicker widget onto the screen. Give it a Name (e.g., DatePicker1).

  • Add a JavaScript block (Client Action → RunJavaScript). Place it on the OnReady event of the screen.

  • Use this code to configure Flatpickr:

    // Replace "DatePicker1" with your widget's Idvar datePicker = document.getElementById($public.FeedbackMessage.escapeId("DatePicker1"));if (datePicker) {    flatpickr(datePicker, {        enableTime: true,        noCalendar: false,        dateFormat: "Y-m-d H:00", // Minutes always 00        time_24hr: true,        minuteIncrement: 60, // disable minute selection        defaultMinute: 0     // always 00    });}

    🔹 Explanation:

    • minuteIncrement: 60 → only allows :00 as minutes.

    • defaultMinute: 0 → ensures it always defaults to 00.

    • dateFormat: "Y-m-d H:00" → forces display format with 00 minutes.

2025-01-23 09-22-22
ABHIJITH G
Champion

Hi @Łukasz Kaproń ,
If you are passing anything to the TimeFormat parameter of the DatePicker widget, just remove it or pass the value Entities.DatePickerTimeFormat.Disabled (using the static entity DatePickerTimeFormat). 


Hopes this helps

UserImage.jpg
Łukasz Kaproń

Hi

User should be able to select hour, but only selecting minutes should be disabled

2019-11-11 17-10-24
Manish Jawla
 
MVP
Solution

Hi @Łukasz Kaproń ,

It was not easy to fix.

It took me multiple tries to achieve the desired result :) .

I have attached the sample .oap for your reference.

Solution: I have added custom Css to achieve this feature, you can check Css of the page. 

Regards,

Manish Jawla

CalendardatePicker.oap
2025-12-29 06-17-15
Deepak Raj M
Solution

Hi ,

You can use java script also to solve this 

  • Drag your DatePicker widget onto the screen. Give it a Name (e.g., DatePicker1).

  • Add a JavaScript block (Client Action → RunJavaScript). Place it on the OnReady event of the screen.

  • Use this code to configure Flatpickr:

    // Replace "DatePicker1" with your widget's Idvar datePicker = document.getElementById($public.FeedbackMessage.escapeId("DatePicker1"));if (datePicker) {    flatpickr(datePicker, {        enableTime: true,        noCalendar: false,        dateFormat: "Y-m-d H:00", // Minutes always 00        time_24hr: true,        minuteIncrement: 60, // disable minute selection        defaultMinute: 0     // always 00    });}

    🔹 Explanation:

    • minuteIncrement: 60 → only allows :00 as minutes.

    • defaultMinute: 0 → ensures it always defaults to 00.

    • dateFormat: "Y-m-d H:00" → forces display format with 00 minutes.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.