Date range only one input

Hi,
Scenario is like that
User choose a date for example he wants to start a job from 7/12/2018 (he doesn’t specify end date only 1 input)
but in the database i want to save dates automatically from 7/12/2018 to 8/12/2018 ( up to 1 month) so when company will search a user, and choose a date ( also have one input date ), if that date will be between user’s dates ( 7/12/2018 - 8/12/2018) this user will display…
it sounds easy but I spend more than 1 day but without success … maybe I’m missing something fundametal
I create a test page for that u can take a look


any suggestions would be greatly appreciated

Hi @valeri.kopaleishvili :slight_smile: I’m not 100% sure, but I think you would need a second, transparent input for the ending date that’s 1 month after the start date. When a date range value is saved it is in the format of:

Date Range Field = (Start Date Picker value)<–range–>(Transparent End Date Picker value):

The composer won’t allow you to do:
Date Range Field = (Start Date Picker value)<–range–>(Start Date Picker value + 1 month)

But you can style the End Date Input to be small and transparent, and it’s initial content to be:
(Start Date Picker’s value + 1 month):

This way, if the User selects 7/12 as their start for example, it will look like this once it’s saved:

Note: To ensure the End Date Picker’s value is always 1 month after the Start Date Picker Value, I placed a group around the End Date Picker, and reset its content each time the Start Date picker’s value is changed:

Editor:

Preview:

That should do it! :slight_smile: But feel free to let me know if you have any questions!

2 Likes

Thanks for your response and sorry for late answer cos of time difference living in middle east in Georgia…
Your post was helpful thanks again but what i want to accomplish is when company start searching for user it has only one input for search, which is date input and in the database start searching for date range which gives an error ( because the value is a date not date range )


I also used Airdatepicker (which is a plugin) it has option to enable Date-range option but in that case company also need to choose starting and ending date, which is out of my concept…
company need to be able to search the user between that dates EX: 7/13/2018-8/13/2018 , between these 30 days only using one date field for search
here is a link please take a look

Thanks!

I totally don’t understand your problem. You have a date. You want a second date. Not a problem. In Bubble it’s like this:

First-date = date value you got from some input

Second-date = First-date…+months:1

When you’re working with objects of date type, there are a bunch of date/time operators that will appear in the Bubble menus.

Which, in run mode will show us:

image

Get it?

Thanks for your answer, but what i wanted to accomplish was User choose a date ex: 7/13/2018 (only one input) and automatically in the database date range 7/13/2018-7/23/2018 will be saved ( 10 days for example), so company also search a user with only one input search field but in the workflow it searchs a date of range
I created a test page and its DONE if you like to take a look please check: (range is a 10 days)

No, I’m not going to look at your app. Here’s the point:

You have a value. Let’s call it “A”. This is what’s known as a variable, right? Variable A has a type.

In Bubble, variables are most commonly found as Fields in a database object, but you can also have “local” variables such as Custom States stored on an object. A value that we want to store in a variable may come to us from many sources: we might compute a value ourselves and shove it into the database, or a user might supply us with a value via an input, or we might retrieve a value from the database transform it in some way and do something with it.

Let us say that “A” is of type number. You want to know what number is “10 more than A”. Well, that number is just “A+10”, right?

Now let us say that “A” is a date. Dates are more complex objects, but Bubble provides us with a variety of operators for working with them. You want to know what date is “10 days more than A”. In Bubble, that looks like “A+(days):10”.

There is also a “date range” type which is even MORE complex. It’s like the “User” data type in your database. You can’t just print a “User”, right? it has a lot of different fields of various types. But you can print User’s First Name.

Date ranges are like that. A “date range” is also not printable as text. But we can construct and manipulate date range objects anyway. The way this is done is by specifying two different dates.

Let’s look at an example: Here, I’ve created a Text element and then added two Custom States to it. One of these of type date. The other is of type date range:

You will note that “SomeDate” (the date type variable) is currently set to 5/5/2012. This is like YOUR situation. You have a date. In your case, a user supplied it to you via an input.

So both of us have a date. Hooray! What can we do with that date? Lots of things. In your case, you want to know “what date is 10 more days than SomeDate?” Also, you want to construct a date range object that represents the time period from SomeDate to “SomeDate plus 10 days”.

Both of these things are possible. Here’s how we can find the day that is 10 more days than SomeDate (this is exactly like what I did previously with “Current Date/Time”, right?):

In run mode, this will show us:

Groovy. We have two dates!

You ask, “How can I construct a date range object from those two dates? I need to take those dates and store them in the database or something.”

OK, recall that there’s a custom state on my text object of date range type. Let’s put a value in there that represents the date range between SomeDate and “10 more days than SomeDate”. We can do that in a workflow. So I’m just gonna create a button that, when we click it, constructs a date range object and shoves it into that custom state. (This is just like what you want to do, except you want to write the value to the database. But you know how to do that.)

Here’s the button:

And here’s the workflow I associate with that button (this is what will happen when the button is clicked):

Hmm… How do I represent a date range object? Here’s how: We take two date values and combine them with the ← range → operation. So in our case we want SomeDate ranged with SomeDate+10 days:

Ok, so SomeDate and then range with SomeDates+(days):10… Let’s try to set that:

Hey, wait a minute… Where are all my date operations? Well, because of the way expressions are evaluated in Bubble, the “+(days)” operation and others are only available in the first field of the ← range → operator. Not a problem, we’ll just do it like this:

So let’s see if that really constructs a date range object:

See what I did there? As I said, date range objects are not printable, but we can understand them as a “start” and “end” date. Now, when I run this page, I initially see this (there is no date range stored in this element, so we’re just gonna see blanks:

So now I click the button. Clicking the button makes a date range and stores it in this element’s “ADateRange” field. So now we see:

Hooray! Now you know how to make date ranges!

5 Likes

@valeri.kopaleishvili My apologies, I completely skipped over the part about the company searching for a User! The only thing I changed is the data source of the repeating group to be a Search for Calendars, with the constraint that the Date Range “contains (point)” selected in the Date/Time Picker Search element (chosen by a Company):

Right now, it looks like there’s only one Calendar thing in the database (July 19th through July 29th):

So when the Current User enters any date between those dates (such as July 21), this result will still display:

*I added the End Date text in the repeating group just for this example but that can be removed of course! Feel free to let me know if you have any questions :slight_smile:

Yes, thank you so much for your detail explain information, everything is cool and working except the one thing
when I started implemented in my actual App I got problem with data source, it doesn’t give me options to choose, and in the Error field it says 'Remember to fill out constraint_type" but the information in the database is saved and written…
I’m not able to choose option when I click “Click” option in the red square
please see the screenshot

I also think if its a bug ?!

1 Like

@valeri.kopaleishvili Ohh! That happens to me sometimes too! If you restart your browser, delete that constraint where you can’t click “Click”, and then try again, is there a difference?

If not, are you able to click “Click” in a different browser?

Still the same I tried in Opera, internet explorer, Chrome, and in Mozilla only difference which I had was in Mozilla (Check the screen shot) but it doesn’t change anything, I mean i don’t have option ‘contains’ to choose ( ether non o the options) :))

1 Like

@valeri.kopaleishvili I’m not sure if this is a bug or on purpose when getting data from a different app using the App connector. When recreating the issue, I also wasn’t able to click “Click” to set up a date range constraint when getting data from a different Bubble app. I would file a bug report on this using the form below :slight_smile:

I submmited bug report but they said its not a bug, reply was : “It’s often an issue with the result of the dynamic data not being of the type that the editor expects”
and editor error says " Remember to fill out constraint_type"
I don’t get non of these, cos have field name is “date range” and data type is also ‘Date Range’ where data is saved in User APP , when I add constraint in Company APP choosing “date range” (from User APP) it doesn’t gives me options to choose… ‘Click’ is not clickible and appears this error which i mentioned above…


When you has this problem how did you fix it?!

I specifically also create a new field in USER APP which data type is also Data Range and tried to add new constraint in Company APP but still the same problem comes up “Click” is not clickable and saying about the same issue, so the problem is App can’t perceive this data type (data range ) from another App using API … that’s my suspicion…

Right! I definitely think it’s a bug as well. Sometimes a video helps show the issue, so I’ll PM that to you to send back to Bubble if that helps!

This topic was automatically closed after 70 days. New replies are no longer allowed.