Date Time Picker with React Native

[Music] right hello guys and welcome back to the rising tide I am Kim and in this video I'll be showing you how to create this custom daytime pick in react native so when you click on this button it's going to be a datetime picker showing you the ability to choose a date you can choose you can uh click up to select a month or a particular year if it is very far it is uh veryy in the past so that's what we'll be doing in this video so with this dat time Pier you have the ability to change it to pick either time date and time or some other Compass functionality such as um change the UI to show a different like a slider or different uh user different UI so that's what we'll be building in this video if you like the video please subscribe to the channel and let's get started all right so here I have a blank react native project with just a single component that says the time picker so if I check out this component as you can see I only have a text here saying daytime Pier which is what is displaying here so the first thing you need to do is you need to install a couple of dependencies for our project that is the daytime picker so I'm just going to open my terminal here and I'm going to run the command add and I'll give the name of the library which is ADD react native community and you give a day time picker and you hit enter and that's going to install it so this is the library I'm going to leave the script on how to install this in the description of the video so I already have it installed so I'm just going to cancel this and I'll go back into our project so back into our project you now need to call that Library so I'm just going to remove this text here and I will now call the date the date time uh time picker I'm going to import it up here so come here and say import from from ad react native the time Pi we're going to import uh the daytime pick Library so yes this one there couple of properties that you need to pass for in order for it to work so I'm just going to just pass them now the first one is the unchange function and so you need to call unchange and give it the function that you want it to run so I'm just going to call the handle dat change uh D [Music] change now create this function up here so I'll come here and I'll say cons and up a change and this function is going to take in two properties which I'll pass them in a second the first one is the event that is the type of event that happens when you click on the button if it's a cancel or a submit event and the second one is uh the selected date keep pressing this date room selected date so but down here we're going to give it some other property which is the mode that that that you want to display so there a lot of modes inside this Library instance date dat time uh as you can see here date dat time count just going to select the DAT cuz that's one you want to see right now and uh I guess that is the basics of what you need to have it running so save that and that's is going to reload my application it says all right I'm supposed to pass in a value prop as well that is also required because you must have an initial dat to start from so we to set the value to being a state I give it I I'll just call it date or create a new date so let's create this date up here so at the top of a component I'm just going to call the use State hook and say using this snippet I'm just going to create this date set this date to by default set it to null so by default there is no date we save that and that is just and that's going to fix that uh that error so as you can see the date is now displaying um one thing you we in our final product is that we actually made use of a button that is used to tole uh this St so I'm just going to copy it from my external screen and paste it in right now so I'll [Music] copy and paste it in here and then as for the styles for the for the button I'm just going to copy it as well so just copy it and paste it down here [Music] I it touchable is not imported so let me just import that here and then uh the function just set model so so we're going to change this here to say we create a different state and we'll call it show [Music] picker because this is this is the button that uh toggles the Picker to either that toggles this uh Pier Library so I'm going to set it to by defa to FSE and um down here when you say on when you press on this button I want to change this function to say show picker to true so we set show Pier to true so this is like a simple button with a style that has this text inside that says open uh dat pier and uh when you click on it it's going to open this dat Pier Library so I'm going to save that now and that should fix all of our errors so I cancel this you can see this is the button being displayed so down here we need to now passing um our condition ranging so that our button can work so down here I'm going to say if show picker we're now just going to say it should open this component so I'll wrap it inside this curly pces and I push this up so now when you click on the button it's going to uh pull up the show picker and when you click on okay it's going to cancel so for now this uh set date isn't doing anything so now let's create the functionality to set the date so we just need to all right so you just need to say if the event type is set is equal to because like I said there are three different events there is set there is dismiss when you click on cancel the dismiss is going to run event type is going to be dismissed so we say if the if if it is a set function we're going to create a new dat okay current [Music] date s go to select the [Music] date selected date or date and down here we're just going to say set the date to that current date so if I try to log in that current date down here say log this current dat um and if you check the console ignore all these other warnings this is a practice that I was doing before uh but now set the date as you can see this is our date string being set so this is like the current value of this uh set date string is is down here so like I said you can change the mode of this to show date time or whatever so if I come here and I change it to time we're going to have a Time picker instead so if I click on this you can see we have a Time picker and even with this time picker you can you can also change um you can also change the type if it's 24 hours so there's a property code if it's 24 hour which you can set to true or foral so I'm just going to set it to True by default it is false and then if I can't click okay if I click on it again it's going to bring in a 24hour timer so I don't know for all right so after setting this date to to the current what we need to do is we need to remove the show image speaker so we need to set show image speaker to false if not so we're going to have errors after closing it I set it to false now and all right so as you can see it's now 24 hours so if I click on this I can now click on something else and yeah so that is it so if I click on it again it will show because uh I'm actually closing it after that so I can just click like 20 2000 if you're like in the French or in a military country I don't know so um yeah so that is basically the gist of it so if you want to uh change some of the handlers you can also have other event handlers such as ontouch cancel on touch cancel on touch and on any of these events so you can attach any of these events to it you can also change the text of the of the button all right so this is here says okay and cancel and okay so you can also change the text of it to say something else so I come here [Music] confirm BTN text I can set it to something else say confirm instead of okay I can set to confirm and uh a similar thing I can set this one to dismiss this one will be cancel cancel BTN text so uh here you can customize this button the button text change the color and everything but for some reason those customizations are not working on my emulator but I'm sure if you if if anyone has any uh fix for that please let me know in the comment and I really appreciate it so uh that's basically the just of it thank you guys for watching to the end and uh please subscribe to the channel and I'll see you guys in the next one thank you and bye

Channel: Rising tide

Views: 1,645

Keywords: react native, react native project, react native expo, react native app, react native tutorial, expo react native, react, app development, react native date picker, react native datetime picker, date time picker, date time picker react native, javascript mastery, javascript projects, time picker in react js, time picker in react native, date time picker in react native expo, date range picker in react native, expo, expo project, expo datetimepicker, date picker

Id: m-JSNTfpsjw

Length: 11min 24sec (684 seconds)

Published: Wed Mar 20 2024