Is it possible to exclude a specific day of the week in date picker?
We have a scheduling system set up for our cleaning business, but we are closed on Sundays. We don’t want people to request pickups on that day or expect drop offs. How can that be blocked out?
Thank you!
hey there! Were you able to solve this? I am trying to do the same thing!
One option would be simple validation on the selected value, and if it is a Sunday raise a warning on the screen and ask the user to select again.
Technically speaking it should be possible.
I believe the element used in Bubble is the following.
Therefore…
It would just need to be added by bubble team to the standard eleement.
Or someone would have to build a plugin based on it with extended options.
Regards,
Jon
And this gives me an idea.
@emmanuel would it make sense to add a javascript field in standard elements to be able to inject JS with extended options. I believe that you have a lot of elements were only a subset of options is provided.
This way the OP could use the date picker element and inject the following code to disable Sundays.
$(’.datepicker’).pickadate({
disable: [
1
]
})
Instead of having to create an element from scratch that is a duplicate of a standard one you provide.
It’s an interesting idea, but not sure it is wise to let people add code to some elements whose code isn’t public. We’re working on a forking feature though for plugins, which is in a similar spirit.
The user could just as easily drop an html element onto the page and put the JavaScript in there, the same way as I did for modifying the RichTextControl, see this page for the example… https://dave-auld-demo-stuff.bubbleapps.io/version-test/richtexteditor_demo
Hi Dave,
Actually I tried this just out of interest before you proposed, but when I didn’t get any results I assumed it was not possible this type of injection.
Now that I see your example I see that I’m probably using the wrong selector or the is something specific to this element that prevents this.
Any ideas?
Regards,
Jon
Just got to tickle it with the right feather …
var $input=$('input.date_div.picker__input').pickadate();
var picker=$input.pickadate('picker');
picker.set("disable", [1,4,7]);
Emmanuel has a good point here. Although this is accessing a publicly shared API for the date picker, the selector is specific to the implementation, and could change on any Bubble update, breaking the workaround.
You make it sound so easy 
Thanks man! Care to explain how on earth did you manage to identify the right selector? 
It was driving me nuts!
Use google chrome right click the element and inspect, should take you to the source highlighting the element, then you just work your way up the DOM tree until you find the element that actually represents the ‘thing’ that you can apply the customisation to.
There are sometimes other wrappers etc. that can get in the way, so the right click and inspect, just takes you to the general area in the DOM tree.
I see now where I made the mistake
Need to recycle my DOM manipulation learnings
Thanks all!
Related to providing an advanced feature to inject JS…this is actually doable with the HTML as not proven by me, but proven
It’s just to avoid cluttering html elements all over the pages which make it less user friendly.
If Bubble exposed the selector for the element through a variable it could always be referencing the right selector even with future changes.
Also in the information icon in the header, Bubble could add information about the plugin used(if used) and a link to the API/documentation if it exists.
And this could be considered like an advance/expert mode for elements that could be checked/unchecked in the APP settings. Even with a notice that there is no support out of the box for that part. So no tickets to help me with a custom js tweak. Only forum.
So basically it’s what we have right now with Custom HTML, but neat.
Man, I did not follow how to get from the picker to the end result, but I am excited to see there is progress with this.
Shouldn’t something like this be a standard option in the element settings anyway? I could imagine this being incredibly useful in many different situations.