This 3m 30s video continues from the single date picker video video and demonstrates the date range picker.
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!
|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|
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?
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.
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:
Thanks @Teodor easy when you know how.
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?
Yes, i will create a couple of docs about date and date range picker tomorrow.
How’s the ‘couple of docs’ coming along?
Here you can learn how to use date range picker with CRUD operations (insert/update):
Here you can learn how to bind dynamic dates to the date range picker:
Thanks my friend… great work for a great cause.