Using the date range picker

[Hyperbytes]

This 3m 30s video continues from the single date picker video video and demonstrates the date range picker.

[Hyperbytes]

NOTE ABOUT DATE FORMATTING
Generally date fields are formatted using the bootstrap date formats as below i.e. The date format, combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy.

d, dd: Numeric date, no leading zero and leading zero, respectively. Eg, 5, 05.
D, DD: Abbreviated and full weekday names, respectively. Eg, Mon, Monday.
m, mm: Numeric month, no leading zero and leading zero, respectively. Eg, 7, 07.
M, MM: Abbreviated and full month names, respectively. Eg, Jan, January
yy, yyyy: 2- and 4-digit years, respectively. Eg, 12, 2012.

HOWEVER when using the date picker, dates are formatted in accordance with moment.js which uses different formatting codes as below. Using the wrong set of codes can break the input!

	Token	Output
Month	M	1 2 … 11 12
	Mo	1st 2nd … 11th 12th
	MM	01 02 … 11 12
	MMM	Jan Feb … Nov Dec
	MMMM	January February … November December
Quarter	Q	1 2 3 4
	Qo	1st 2nd 3rd 4th
Day of Month	D	1 2 … 30 31
	Do	1st 2nd … 30th 31st
	DD	01 02 … 30 31
Day of Year	DDD	1 2 … 364 365
	DDDo	1st 2nd … 364th 365th
	DDDD	001 002 … 364 365
Day of Week	d	0 1 … 5 6
	do	0th 1st … 5th 6th
	dd	Su Mo … Fr Sa
	ddd	Sun Mon … Fri Sat
	dddd	Sunday Monday … Friday Saturday
Day of Week (Locale)	e	0 1 … 5 6
Day of Week (ISO)	E	1 2 … 6 7
Week of Year	w	1 2 … 52 53
	wo	1st 2nd … 52nd 53rd
	ww	01 02 … 52 53
Week of Year (ISO)	W	1 2 … 52 53
	Wo	1st 2nd … 52nd 53rd
	WW	01 02 … 52 53
Year	YY	70 71 … 29 30
	YYYY	1970 1971 … 2029 2030
	Y	1970 1971 … 9999 +10000 +10001
Note: This complies with the ISO 8601 standard for dates past the year 9999
Week Year	gg	70 71 … 29 30
	gggg	1970 1971 … 2029 2030
Week Year (ISO)	GG	70 71 … 29 30
	GGGG	1970 1971 … 2029 2030

[revjrblack]

Your tutorial helped a lot! I could not figure out how to render the output in the update form.

Here’s my followup question… When an update is necessary, do we render the start date and end date in separate fields in the update form?

[Hyperbytes]

yes,I always do, to be honest never did figure out how to render the output in a range picker rather than separate fields and never used that component since doing the video. Guess I should go back to it and work that one out.

[Teodor]

No, it doesn’t have to be two inputs. You can use just one, as there are start and end date dynamic attributes:

Where you bind the start and end dates from your database query:

So that it renders like:

[Hyperbytes]

Thanks @Teodor easy when you know how.

[revjrblack]

Thank you very much Teo!

You have an enviable perspective of the great worth of Wappler and many of its components. It is obvious that we need more help in understanding the implementation of this valuable utility. Especially in a ‘CRUD’ – or dashboard scenario.

When you have time, would that be possible Mr. Teo?

[Teodor]

Yes, i will create a couple of docs about date and date range picker tomorrow.

[revjrblack]

How’s the ‘couple of docs’ coming along?

[Teodor]

Here you can learn how to use date range picker with CRUD operations (insert/update):

Using the Date Range Picker with Insert and Update Record

You can use the Date Range Picker component with insert or update record forms, and store the start and end dates of the selected range in separate database field. We added a date range picker in a form on our page. This will be a server connect form, which will be used to insert data into a database table: [Screenshot_1] As we usually do, we start with creating the server action. Open the Server Connect panel and create a new server action: [Screenshot_2] Then select Globals: [Screensho…

[Teodor]

Here you can learn how to bind dynamic dates to the date range picker:

Using Date Range Picker with Dynamic Values

With the Date Range Picker you can display date ranges, coming from a dynamic data source, such as a database query. This is useful for Detail Pages or Update Record pages, where you want to edit a reservation for example. We created our page and added the Date Range Picker: [Screenshot_2] We also added a server connect component, which returns the start and end dates from a database: [Screenshot_3] Select the date range picker and scroll down to the dynamic attributes. Add new: [Screensh…

[revjrblack]

Thanks my friend… great work for a great cause.