Customize Bubble Date / Time Picker

Tips
1

Hey guys,

just want to share a little trick how to customize the bubble date / time picker.

This is my result, which can be customized as you want:

Bildschirm­foto 2023-02-03 um 13.07.13
Bildschirm­foto 2023-02-03 um 13.07.132760×640 43.8 KB

Bildschirm­foto 2023-02-03 um 13.09.09
Bildschirm­foto 2023-02-03 um 13.09.092762×714 23.6 KB

which can be achieved with adding the following code:

<style>
div.picker__holder{
background-color: #272727!important;
border: 1px solid #272727!important;
border-radius: 20px!important;
padding-bottom: 15px!important;
}

div.picker__footer{
background: none!important;}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
  border: 0px ;
  background: #363636;
  font-size: 0.8em;
  font-color: #f5f5f5;
  padding: 0.66em 0;
  font-weight: bold;
  width: 33%;
  display: inline-block;
  vertical-align: top;
  margin-right:5px;
  border-radius: 20px;
  width: auto;
  padding-left: 8px;
  padding-right: 8px;
  height: 30px;
color: #f5f5f5;
}

.picker__button--close:before {
  content: "Ă—";
  top: -0.1em;
  vertical-align: top;
  font-size: 1.1em;
  margin-right: 0.35em;
  color: #fb0000;
}

.picker__button--today:before {
  top: -0.05em;
  width: 0;
  border-top: 0.66em solid #5198e6;
  border-left: 0.66em solid transparent;
}

.picker__button--today:hover,
.picker__button--clear:hover,
.picker__button--close:hover {
  cursor: pointer;
  color: #f5f5f5;
  background: #474747;
}

.picker--focused .picker__day--selected {
  background: #FF0000;
  color: #ffffff;
border: 0px;
}

.picker__weekday {
   padding-bottom: 0.25em;
  color: #f5f5f5;
}

.picker__month,
.picker__year {
  font-weight: 500;
  color: #f5f5f5;
}

.picker__year {
  color: #f5f5f5;
  font-size: 0.8em;
}


.picker__nav--prev:hover,
.picker__nav--next:hover {
  background: none;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #e0e0e0;
  background: #363636;
  border-radius: 20px;
}

.picker__day--highlighted {
  border: none;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background-color: #FF0000

;
  color: #ffffff;
border: 0px;
}

.picker__weekday {
   padding-bottom: 0.25em;
  color: #f5f5f5;
}

.picker__month,
.picker__year {
  font-weight: 500;
  color: #f5f5f5;
}

.picker__year {
  color: #f5f5f5;
  font-size: 0.8em;
}


.picker__nav--prev:hover,
.picker__nav--next:hover {
  background: none;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #e0e0e0;
  background: #363636;
  border-radius: 20px;
}

.picker__day--highlighted {
  border: none;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background-color: #FF0000
!important;
  color: #f5f5ff;
border-radius:20px;
}

.picker__day {
  color: #f5f5f5;
}

.picker__day--today {
  color: #f5f5f5;
font-weight: 1000;
}

.picker__nav--prev:before,
.picker__nav--next:before {
  content: " ";
  border-top: 0.5em solid transparent;
  border-bottom: 0.5em solid transparent;
  border-right: 0.75em solid #f5f5f5;
  width: 0;
  height: 0;
  display: block;
  margin: 0 auto;
}

.picker__nav--next:before {
  border-right: 0;
  border-left: 0.75em solid #f5f5f5;
}

.picker__day--highlighted {
  border-color: #363636!important;
}

.picker__input.picker__input--active {
  border-color: #FF0000!important;
}

.picker__list-item {
  background: #272727;
color: #f5f5f5;
  border-color: #f5f5f5;
}

.picker__list-item:hover {
  color: #f5f5f5;
  background: #474747;
  border-color: #f5f5f5;
}

.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
  background: #FF0000;
  color: #f5f5f5;
  border-color: #f5f5f5;
}

.picker__list-item--highlighted:hover,
.picker--focused .picker__list-item--highlighted {
  cursor: pointer;
  color: #f5f5f5;
  background: #FF0000;
}

.picker__day--infocus:hover,
.picker__day--outfocus:hover {
  cursor: pointer;
  color: #f5f5f5;
  background: #474747 ;
}

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
  cursor: pointer;
  color: #f5f5f5;
  background: #363636 ;
border-radius: 20px;
}

.picker__select--month,
.picker__select--year {
background-color: #363636;
color: #f5f5f5;
  border: 0px ;
border-radius: 20px;
  height: 2em;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
  background: #FF0000;
  color: #f5f5f5;
}

</style>

Steps to reproduce:

  1. Create an html element
  2. copy the code into the html document
  3. customize the colors as you want
  4. enjoy your customized date / time picker

It is also possible to change the arrows border width, add some stuff and more.

Maybe someone can also build a little plugin with some inputs to change the colours, roundness, fonts and more, as I am not into building bubble plugins yet.

4 Likes
2

Nice one! Thanks for sharing

3

Thanks @daviddr17 !

Do you know if it would be possible to modify this code for picking up years only?

4

Not yet, but I will have a look later today and let you know what I found out. :+1:

1 Like
5

Thanks so much!

6

I checked it and with pure css its not possible, because the year is not clickable. I can hide the months with

display: none!important;

but then you are not able to select something anymore.

Maybe someone can help out here?

7

No worries, thanks anyway!

8

@daviddr17 can you share how you to change the language of date/time picker text? I’ve tried changing the browser language and that didn’t seem to work. Is it based on system language or something else? Thanks.

9

I would say this is bubble related. So in general it should be the selected language from your bubble settings or the language from your current user.

You could do a quick check if the following is working:

yoururl.com/yourpath?lang=es_es

you can change es_es to de_de or some other bubble language codes. If this is changing the date selections language it has something to do with your current users language or your app settings.

1 Like
10

@daviddr17 I managed to figure out that it can be controlled by the app settings, just like you mentioned. But thanks for the quick check method! Should be handy.

11

I’m experiencing some odd behavior when using this in conjunction with time. The date picker is also not respecting conditionals that would make it disabled. Anyone else having similar issues?

12

@Dexx what do you mean with odd behavior exactly?

I just had a look why the conditional is not working, but cannot see anything in the css code which could block that, as normally that should be js related. Maybe a javascript expert can share an idea here how to do that?

13

When clicking on the element, the calendar and time popups are not consistent, sometimes the date pops up, sometimes the time, sometimes neither and you have to click a bunch of times to get the one you want. They also overlay each other. Normally the date picker drops down from the date part of the elkement and the time picker from the time part, but they are popping up wherever.

In regards to consitionals, I have a condition that if the datepicker’s parent element’s status not “Pending”, the date picker should be disabled. This doesn’t seem to be working.

I thought it was odd this was happening with pure CSS, but I can’t figure it out either.

1 Like
14

Hey guys, do you know if with this Date/time picker is possible to block a specific day or days to pick? and if is possible to set different times regarding the day? I’m trying to create a app for booking a table in a restaurant with thouse conditions. Thank you guys!

15

I just checked the manual and saw that they are using AI now for generating answers which are not included. Anybody else who has noticed that? :smiley:

The answer told me that with the date time picker from bubble it is not possible to block certain days, but you can set a minimum and maximum. You can also set that either only a date, a date and a time, or only a time should be selected as well as a time interval.

Maybe you should have a look at the manual in the data section and especially operators.

1 Like
16

Thanks David, I know is not available to do it by settings but I know is possible to modify a bit of html code and achieve this. I’m looking specifily where I have to add the html and what/how do I have to do

17

@mmendezgracia I don’t think it is possible with pure html. Maybe some JS can help out here. Another way to achieve it would be some conditionals:

If date pickers date = xx.xx.xxxx → change date to xx.xx.xxxx and maybe have an alert or popup saying that this date is not possible.

You can do that either by having a conditional at the element or a do when workflow.

1 Like