DatePicker pick_time manipulation

Anvil Q&A
1

Hi,

Is there any pythonic (non-javascript) way to work with hour/minutes drop-downs when pick_time is set to True? At the moment we can programmatically tell the calendar to restrict/enable dates from/to (see my project screen-shot)

calendar-selection
calendar-selection.png923Ɨ898 438 KB

, but how about hour and minute selectors?
For instance, you want a visit scheduler/calendar and your office hours start at 08:00, so the drop-down shows hours from 0800 to whatever (e.g 1700).

Or another one, you expose a calendar to your clients that can select visit time with minutes drop-down giving them 15,30,45 minutes optionsā€¦

Regards,
Archie
Edit to clarify my post:
when my pick_time is set to True , I can see both drop-downs for hours and minutes. What I am after is ability to display e.g 8-17 , insted of 1-23 in hours drop-down

2 Likes
3

Hi Archie,

Thereā€™s no built-in way to do that with the DatePicker component. If you use a DatePicker with pick_time set to False and add two extra DropDowns for hours and minutes, you could restrict the contents of the DropDowns that way.

1 Like
4

Hi Shaun,

That would definitely do the job,

Thank you,
Best
Archie

5

Beside to the point mentioned by Archie, they are some other ā€œflawsā€ regarding localization. In some countries the week starts on Monday. Following the daterangepicker documentation, the ā€œlocaleā€ object can be used for international settings. Guess, your international anvil user/developer would be thankfulā€¦:wink:

2 Likes
6

I got to your post, because I am trying to find, how to set the first day of the week as Monday in datepicker, you have idea how to do it ?

7

Unfortunately no, but I guess it has to be changed by the anvil guys because the change I suspect is around the components/DatePicker.js. A additional property is required to set the local setting: ā€œfirstDayā€: 1.
Found this information here: http://www.daterangepicker.com/#config. Enable the ā€œlocaleā€ option to see changes.

@shaun, @meredydd: are my assumptions correct? Possible to implement the request?

1 Like
8

Good suggestion @homebrew, weā€™ll consider that a feature request!

1 Like
9

@shaun if you guys are considering modifying the date picker, having an option to reduce the minutes to 15 minute blocks as @k4projekt suggests would be great :wink:

For now I will use the method you suggest.

3 Likes
10

Bumping this! Also would love to be able to restrict calendar time picker to 15 or even 5 minute blocks.

1 Like
11

Any news about this? Would also like this function :slight_smile:

1 Like
12

Hi everyone,

Thanks for showing interest in this. Thereā€™s no news at the moment but it is on our list.

Thanks,
Ryan

1 Like
13

Hi Ryan,

Thanks for letting us know. Do you know perhaps how to get the date from the datepicker to combine with a dropdown selected time value ? So itā€™s a datetime object to inject in the database?

Thanks!

14

From Anvil Docs | Basic Components

The DatePicker allows users of your app to select dates and times

(emphasis mine). So the user can select both the date and the time, from the same widget.

Then, you can ā€œquantizeā€ the time to the nearest 15 minutes, and push it back into the widget, so that the adjusted time shows.

15

You could also check out how the Pick a Time form works in this example app: How I Built Calendly in 3 Hours

16

I found a work arround for the stated problem.

import datetime

self.drop_down_1.items = [
(ā€˜10:00ā€™)
]

date = self.date_picker_1.date
year = int(date.strftime('%Y'))
month = int(date.strftime('%m'))
day = int(date.strftime('%d'))

hour = int(self.drop_down_1.selected_value[:2])
minutes = int(self.drop_down_1.selected_value[-2:])


combo = datetime.datetime.combine(datetime.date(year, month, day), 
                      datetime.time(hour, minutes))

print(combo)

This result in a valid datetime object that you can use to store in the DB.

1 Like