Why Quasar Framework Date Component (QDate) is the best date picker field!

are you looking for a component that allows you to select a certain date or better yet are you looking for a component that allows you to select multiple dates well then how about range of dates but not just that how about multiple ranges of dates well in this video i'm going to show you all of those things and in the last section of the video coming right up i'm going to show you how to implement this type of component in conjunction with an input component excited well then let's talk about dates [Applause] in order for us to implement our very own quasar date component let us first create a basic implementation of this component let me show you how so as you can see here in our code we have a form that we left in our previous video so we left it as it is right so this time we're going to create our own quasar date component so how do we create just that so first we need to create our component first so here in our code we need to insert another div for us to create our component right so here we're going to create our own div so let's insert one right here let's see around here and then let's create a what they call this let's create a uh let's say the actual date component so for this case let's type the q dash data so what we're going to get is the q date component itself so something like this obviously it's going to ask for a v model so we're going to provide that v model so in our case we're going to create our v model in the form data object right here so we're going to create a date parameter here so let's say 2021 and then let's set this to what date is today okay so let's say 11 and then let's set this one to six so we have something like that next q date component we're going to add the v model so let's add a v model and then let's put the form data that date so what we're going to get is a component with a date as av model so in this case what what quasar is going to show us is exactly this component right here so around here you can see that we have created a date component so next now that we have implemented a basic setup of our date component we can select different dates as much as we want so that is one of the basic implementations of a q date let's say you want to use a landscape for example so what do we mean by a landscape so in this case our date component is in a portrait state right so it uses a vertical alignment so what if you want to use let's say the horizontal alignment so in that case we're going to use the landscape so in order to set up a landscape you simply need to add the landscape property so in this case it's simply adding a landscape property once you hit save what you're going to get is another orientation of the date component but this time it's oriented in a landscape sense right so it's using the horizontal alignment so component itself behaves similarly to the previous one except that it's aligned in a horizontal sense instead of the vertical sense which is the default so in the case of let's say you want to select multiple dates what we can do is we need to set up a v model that is an array so similar to our previous videos if you haven't watched that please do check it out as well so in our previous videos what we did was we can use a v model which is an array in order to create our own they call this multiple set of values so in this case we have a date as a string right so instead of a string let's use the array notation and then once we have that as you can see we have no date in our component right so if i select one we have a single date and then if i select another one we have let's say or rather we have november three right so in this case we set our q date into a landscape but we are missing the multiple properties so if we add the multiple property what you're going to get is something like this as soon as i click a date we're going to get the initial date and then if i click another date it's going to show us that we have selected two dates or rather two days so in this case we saw we have selected two and then if i click another one we're going to have three but if i click the same date again it's going to remove that date from the set of selections so in this case we're going to have two days in our what we call this in our selection of values so that is how quasar behaves in a multiple type of sense so let's say you want to select a range for example you want to select 5 to 10 days or for example you want the user to select a certain range of days let's say from let's say from november 1 to november 5. so in this in a scenario like that quasar is also able to handle that type of scenarios as well so how do we do that so in order to implement the scenario like that what we need to do first is we need to modify our component a little bit so instead of setting it as a multiple parameter we're going to set it to range this time so we're going to use a range and then at the same time going to modify our v model instead of using an array we're going to use an object this time so in this case let's set it to null for now so we have the array right so let's move it let's move it to null for now and then let's try setting a specific value so as you can see we can select a range of dates starting from november 1 to november 11. so how does that work okay so in order to visualize what actually happens with our date model we're going to display the model itself as is so let's move in our code here let's display the form data dot date so once we have that we're going to see our date in the screen any moment now so let's just wait for it to compile then we're going to get this one okay oh where is it hey where's my date okay let's see i think it's not visible ah okay so there it is so as you can see once we have selected our range of values let's say in this case we selected november 1 to november 9 what we're going to get is an object which contains a frown date and a two day so we have two values so what what quasar returns to us is an object that contains two values which is the start date and the end date in the form of from and two keys so using these two values you can set a specific range or you can choose whatever range you may desire to choose from so let's say let's choose the value three to eight so it's going to change the value immediately but do take note that when using this type of input you're always going to get an object which contains a from and a to value so that is what you're going to use in order to you know implement your own scenarios so that is how a range work so what if let's say you want to implement multiple ranges let's say i want to select november 1 to 5 and then 10 to 15 for example so in that case it is also possible so how do we implement something like that right so first what we're going to do is we're going to set an array so let's set an array first so we have the date here right so let's set this one to array and then let's save it and then what we're going to do next is we're going to modify our component a little bit so we have the q date component here right so we have range currently set so in order to allow multiple ranges we simply need to add the multiple parameters so let's add the multiple you hit save and then it's going to reload again and in the screen right here down on the lower left section you will see that our v model is currently an empty array right let's say i select november 1 to 8 so i have 8 days and then if i select let's say 17 to 22 what i'm going to get is another set of what they call is another set of dates so in this example you will see that we have a first range start or starting from november 1 to november 8 and then we have another range starting from november 17 to november 22. so quasar allows you to select multiple range of dates if that is what you need in your scenario so again in order to implement something like that you simply need to set your v model into an array and then you need to set the range property right here and then you need to set the multiple property as well so by setting these two values and setting an array as av model what you're going to get is a multiple range sets so it allows you to select multiple sets of dates as you can see in our example so let's say you would like to you know customize your quizar date component values let's say you want to change the title or in this case you want to set a specific value so how do you do that so quasar also allows you to customize the content of your title bar so in this case we're going to modify the title bar so by modifying the title bar we're going to lose this functionality right here so by default let's return this back to portrait so what we get is something like this right so if we select a date or rather let's remove the range and multiple so let's remove that one then let's set this back to 20 21 11 6 for example so by default that is the basic behavior of q date right so what if i wanted to let's say modify this title right here so how will i achieve that so in order to set that type of input you need you simply need to add a title and a subtitle property so in our component we're going to simply set the title to let's say a title here for example just for just for the sake of exam and then let's say we need to set the subtitle a sub title here so for example something like that so what we're going to get is we have a custom title and at the same time we have a custom subtitle in our component or quasar also allows you to do just that so let's see in the case of what do you call this let's say you have a for example there are certain scenarios that let's say you haven't selected a date right or upon page load there's no initial date to set for now so in those cases let's say you want to set a default date so how do we do just that so quizar also allows you to set a default date so going back in our code so going back here we can set that as well so we can do that by simply setting a default year month so in our property here we set a default year month and then we set the exact date that we want to use here as a default so let's say let's set the default to 1990 and then let's use the month of let's say july so seven so once i hit that save and then i remove the value of date let's set this one to null and then hey i hit save again what we're going to get is we got the default value which is the july of 1990s if you check our quasar date right here we have july as well as we have the year 1990. this type of scenario is useful for those cases where you have no initial values set as of yet so for example the initial state of the form is null for example so in that case if the v model is null then definitely you can set a default date to be used by the component so that is one useful feature so going back also aside from that you can also customize the default view so what do we mean by default view so what do you mean by default view is that by default quiz star uses the component as is so upon initial load the component will look exactly like this we're going to get a title here which is the date by default and then we're going to have a subtitle here which is or rather which contains another specific value and then we have the date selector right here but aside from that we also have this neat little feature that allows us to pick the specific month let's say july and then allows us to be a specific year so let's say that this one or let's say the 1990 for example so in the case of let's say you want to display the date component using the year first you can do that as well so it is possible also so we can customize the default view that quasar uses in order to display its date so instead of getting this default state right here we can set the default date or the default view to let's say the years or months so let's say let's use the years property so let's set the default view two years so something like that and then once we do that what's going to happen is we're going to get this type of view which is it displays the years first before anything else aside from that we can also use the months so let's say let's add the months here so months so something like that so what we're going to get is the months right here so if i select let's say may i'm going to get the may of 1990 so that is also one of the features of the quasar date component so it allows you to set a specific default view which is very useful in those cases where you want to let's say you want to set a year first or you want a selection that starts with the year first then suddenly proceeds with the month in other cases you want to use the month first and then you can choose the date so you can customize it based on your needs as well so how about those cases where let's see let's say i want to disable my 2d component for the meantime or let's say i want to use a or rather i want this component to be read only so it's only or it only allows the reading of values like other components we can use the disable and read only property in this component as well so in order to do that you simply need to let's remove these other properties first let's remove that one and then let's set this one to disable so once we do that what we're going to get is a disabled component wherein we cannot choose or set the date at all so in the case you want to set this one to read only what's going to happen is we can only read values from this component so read only okay so let's say let's set the date to 2021 1106 for example we're going to get is that exact value in our quiz our date component and we cannot change its values in any way at all so that is what it means by using a read-only property so let's say you want to customize your values let's say you want to set the let's say you want to customize the format of your output let's say you want to use the year month day type of format or let's say you want to use the month day year format so how do we multi or how do we modify our output values from the quiz our date component right so in this code we're going to show you how okay so let's say you want to let's set the for example let's set the value to year month day so in order to do that we're going to set a mask let's use the mask property and then we're going to set the specific value so in this case we're going to set the mass going to set it as yy yy meaning we're going to use the year value and then let's use the dash and then mn meaning the month in numeric format and then we're going to use the dd meaning the month or the day in numeric format as well so once i hit save and then let's see for example i select a specific value okay so let's set this one to okay so let's first say for example let's remove this one too let's set this one to null first and then let's remove the read only something like that if i select this date so as you can see our value right here is modified as well so let's say i want to set the month first so let's set this mask to mm yyyy or rather let's say the dd and then the yy meaning we're going to set the month the day and the year so let's remove these values let's hit save and let's see what happens so let's see i select the november 6. so as you can see our v model contains the value 11 6 20 21 meaning it formats our output values based on the mask that we use so as you will notice the queen stardate component allows us to modify our outputs based on what we want the output to be so in in this case in our example we set the month the day and the year right or we set the year the month then the day so aside from these values quasar also offers a handful of options that allows you to customize your actual output which is the what you call the masking feature so it masks your values based on the format that you set upon the mask property so are you having questions so far or you have difficulties implementing please don't hesitate to leave a comment down in the comment section we'll be happy to help you in any way so going back so here as you can see we just created our mass right so what if let's say i want to set a mask which contains the words instead of the numbers so we can do that as well so in this case let's see so let's experiment with our mask feature so let's say in our mask let's set the the specific value so let's say 4d meaning the word and then let's set to let's say 3m so in our earlier we use d2m right so this time we're going to use the 3m and in this case we're going to use the 4d but it's a lowercase character so let's see what happens when we do just that so aside from that let's set the day which is capital d just to check things out and then let's say let's use the same value which is the y so in this case what we're going to get is something like this so as you can see we have the wednesday we have november and we have the value 3 and then lastly we have the 2021 s value so how does masking work right so to demonstrate let's try experimenting with the values right here for now let's experiment with the letters so let's say let's use 4y so something like that right so what we're going to get is the year so what if i set this one to two values so what are we going to get if i do that we're going to get the last two digits of the year but what if i set this one to three instead of two right so you know just for curiosity's sake so if i do that we're going to get a 21 and then y meaning the y has no value in and of itself so it has no specific value for that type of mask but if we set this one to four letters we're going to get the exact year in numeric format so let's say let's use the single m so month right m stands for month so if i select this date let's say this one or this one or this one we're going to get the month but if i set this one to double m or rather 2m we're going to get the month again as well but if i set this one to 3m or three letter m characters what we're going to get is the abbreviated the abbreviated value of the month itself which is no in this case so let's say i choose may we're going to get may but if i choose let's say september we're going to get sep to abbreviate the september value but what happens if i add another n so what we're going to get this time is the full name of the month itself so we're going to get november so let's let's try the days right so let's say d so let's say i use d so if i select a date nothing happens meaning there's no such mass for that if i use two letters we're going to get the double digit day value so we're going to get 11 we're going to get 4 we're going to get 9 but if i set this one to 4 letter d something like this we're going to get the word which is wednesday right but let's say let's put this back to how we found it earlier something like this so if we do that and then we set up a day we're going to get this exact value right here what it means is that the mask offers a specific set of characters for you to display specific values so let's say for example for wednesday so let's remove this one and then let's set this one to only this type of value so we're going to get this and then let's say let's set the date mmm to mean our meaning the abbreviated month and then let's set the d two letter geese meaning the double digit date and then let's set this one to four num four letters of the year so what we're going to get is the day in word format we're going to get the month we're going to get the exact day into digit formula or in two digit values and then we're going to get the year in digit format as well so as you can see masking is a very useful feature that allows you to customize your date outputs in a much simpler and cleaner way without having to hold at all so quasar offers these functionalities by default so we don't have to do any coding that much we simply need to set the specific values for our masking property so that's how masking works in the quasar date component so this time let's say you want to customize your component right so as you can see we're still stuck with the blue color so let's say i want to set the let's say the red color right i like the red you know something's beautiful with the red so in this case let's set this one to red so how do we do that so in order to set the color of the component we simply need to add the color property and then let's set this one to red so what we're going to get is the red color for our component so if i click a date we're going to get the red variant of this component so let's say i want to use for example how about the text color right so you don't want white for example you want green so in this case we're going to set the text color property to green so once we do that we're going to get the green text inside of a red background which doesn't work quite as we expected so let's set this one to let's say black instead so black so what we're going to get is a black inside a red so that's how coloring works in the quasar component so let's say you have a dark background so how do we set the component on a dark background so we simply need to add a dark property right here by setting the dark property you're going to get the component in a darkened state so as you can see it's colored black which is very useful for those types of scenarios where you have a uh where your application rather is in the dark mode this type of scenario is very useful for those types of situations or rather for those types of use cases so for example what if i have a certain scenario where i need to highlight certain days to notif or in order to mark it as an important day or as an event so quasar component also allows you to set a highlight on specific dates to mark them as important dates or events so going back in our code we can do that by setting an events array or an array that contains a set of dates so in this case let's say let's set the events property to let's say the november one is important so let's set the date 2021 11 1 and then let's say the november 30. so let's set november 30 for example so let's set this value to 30. so what we just did was we created an array of dates right so there's nothing much going on here but in order to mark that specific dates that we just set earlier as an event in our q date component what we're going to need or what we're going to add is the events property so let's add the events and then let's set the form data the events so something like this so in order to show you guys let's just clean up the code a little bit so let's move this one here let's move this down let's move this now let's move this let's arrange this one there we go so here what we did was we added an events right so as you can see the dates november 1 and november 30 are highlighted meaning they are events or important dates that is set by the values in our events models which is this one right here so let's say i want to change the highlight color it also it is also possible to change those colors so we can do that by simply adding the events color property so event color let's say let's use yellow you know to mark it as an important or to highlight the value so as you can see we have a yellow colored highlight in our specific dates so this type of scenario again is also useful for those types of pop-ups where you need to highlight specific dates for example holidays or important meetings or something like that so you can set those highlighted values using an array of dates in string format so what if let's say i want to disable certain dates right so i want a specific date to be non-selectable so how do we do that so quizar also offers that kind of configuration so there are instances where you want to let's say you want to remove certain dates right so let's say a certain date is not selectable let's say november 5 for example so how do we implement something like that right so let's go back in our code and implement that exact scenario going back here in order to disable certain dates what we're going to do is we need to set a specific type of options so for example let's use a single date as a selectable option so in order to implement a certain range of selectable items you need to add a options array which contains all the dates that you want to be selectable so let's say let's set this one for example let's use these two values something like that so we just duplicated them right next what we need to add is the options property and then we're going to feed our options array inside of it so let's use the form data dot options what we're going to get is something like this right so we have a as you can see we cannot select anything at all so let's just check okay so let's see oh i have duplicate so okay um date options for example so i was using the wrong variable name okay so so let's grab this one and then let's set this here and let's set it to save and as you can see we only have two selectable dates the november 1 and november 30. because that was the value of dates that we set in our date options array so that is one way of limiting your certain inputs inside your quasar date so this scenario is useful for those cases where you would like to set specific values as a selectable options in your quasar date component for example you would like to allow the let's say allow users to select certain dates only to mark that it is a special date for example or it is the only date that it is usable or the only time that you can select that specific date so there are multiple scenarios but you can implement this type of situation or input so this is one feature with that quasar already has by default so quizar also allows you to limit the specific number of months that you can visit in your quiz or date component as well let's say you want the users to view only the months of november and december that is also possible so let's say our i want are you or rather let's say i want the users to only view the days between october to december so quiz our quasars date component allows you to do that as well so in order to set something like that we need to set the navigation min year month and navigation max year month meaning we can set the minimum and the maximum allowable months and years that you can traverse inside the component so by doing just that what we're going to get is this output right here so let's say our maximum is 20 21 and then let's set this one to 12 meaning december and then let's set the minimum so let's say minimum is 20 21 10. so meaning we can view the dates only starting from november or october to december so as you can see july august september and all of the dates prior to october are non-selectable but as you can see also that i can only select october november and december so what about years so in the case of years all of the years are disabled right so as you can see we can't select any year at all because our minimum and maximum values are set to the same year so in the case of let's say you would like to set five years so we can set this one as well or let's say two years so let's set this one to 2022 so once i do that what it means is that i can select only these two years so as you can see in the year 2021 i can only select up to october but in the coming year which is 2022 i can select as many or i can select all of the months because the maximum month that i've set is december as soon as i hit the next year meaning 2023 i cannot select any more at this date so quasar allows you to customize these specific boundaries as well so there are some useful scenarios where you can implement this type of scenario or this type of implementation let's say you want to limit the user's input of dates to between five years so let's say 2020 to 2025 let's say from july to december so something like that so quasar allows you to set this type of these types of date ranges rather and it also allows you to limit these boundaries based on your implementations and your specific values that you have set in the component themselves aside from that you can also implement this cute date component inside aq input so let's say let's say i have a specific scenario where i would like to you know have an input let's say an input bar and then i would like to add a button there that indicates that i can select a date right so in this case what what we can do is we can bind the queue date component inside the queue input so how do we do that so quasar also allows you to bind that type of input so how do we do that so first and foremost we need to create an input so in this case we simply need to add the input let's set the q input and then let's set the v model to date or form data that date rather that date so something like that now that we have an input what we can do next is we're going to set a template mode so inside the queue input we're going to add a button let's have the input here so we have q input so as you can see we have a q input element right next we're going to add a template so template and then let's use the v slot on b slot uh let's use the append for example so here we're going to add a certain icon in our input so q icon name date for example or calendar calendar let's use the calendar and then let's set the class to cursor pointer to indicate that whenever our mouse hovers over this icon it's going to use the hand icon do some the thing like this you know the hand icon like this so that it or rather that is what it means when you use a cursor pointer because there are some elements that every time you hover the mouse above it it doesn't change into the hand indicator so we have to force that using a class so now that we have an icon what we're going to have next or rather what we're going to add next is what give what we call a queue what they call this a q pop up proxy so what is this q pop up proxy what it means is that if i click the button it's going to show a pop-up so it's basically a proxy to another element so it's just a or what you call this it's just a utility temp or utility element of quasar that allows you to create pop-ups basically anywhere so in this case we created a proxy pop-up and then we're going to add a transition let's set the what they call this the transition show transition show okay so let's set this one to let's say scale you know just to add some a bit some bit of animation and then we're going to add the another one which is trend position let's say hi and then let's set this one to scale as well you know just to add some a little bit of flair you know the flare and then once we have that what we're going to do next is we're going to add the q date component itself inside of it so let's let's say let's grab this one and then let's put it right here so now that we have our queue date inside let's say you uh what do you call this yes so let's say i want to add a close button for example because what we're going to get is we have no close button right so as you can see i click here there's nothing so let's remove the dark feature we're going to get uh let's say the event okay so there we go so for example i said i select a certain value which is november 1. so i'm going to get that as a value so if i remove this one just to make things much cleaner and then let's remove the mask value and then let's set this one to default let's remove everything for now let's remove that one and then let's set this to red for example so something like that so here we have a q input let's say let's let's say that it's rounded and then outline so we're going to get something like this and then let's say label is date you know just for the sake of example so we have a date input right here so how do we set the input we simply click the date button right here and then we can select a specific date so let's say 18. so as you can see our component here has a value of november 18 and at the same time the input contains a certain value which is november 18 as well so this is how you implement a quasar date inside of a queue input so this is one of the most common scenarios where you would like to add a date selection inside an input so if you have any uh what you call this if you have any desired to do so or implement this type of feature well you can use this as a reference for that thank you guys for watching this tutorial video i hope you have learned something from it as well as i've learned how to implement your own quasar date component in your own applications if you have any further questions or clarifications please feel free to leave a comment down in the comments section if you like this video that you have seen so far please don't hesitate to leave a like as well as to hit that subscribe button to get notified of our latest updates as well as when new tutorial videos gets uploaded this is joshua from pixelate see you later pixelators

Channel: Pixel8 Academy

Views: 374

Keywords: Quasar Framework Date Component, Quasar Date Component, Quasar Framework QDate, QDate, Quasar Framework, Date Component, Date selector, Date field, vue js, Quasar Date, vuejs, vue, quasar framework, date picker

Id: pV0QR5OjSxo

Length: 39min 58sec (2398 seconds)

Published: Wed Nov 10 2021