Duration: 18 minutes
Summary: In this video, we continue our discussion of jQuery UI widgets. Specifically, we will be talking about the date picker control. We have the option of making the date picker inline and it will show on the page as soon as the page loads. But most of the time, we are interested in clicking in a textbox where the calendar will show and we can select a date. That is what we will be concentrating on for these couple of date picker videos. We will start by talking about the options available to us like altField, disabled, altFormat, autoSize, and appendText. In the next video, we will talk about more options and see what method and events we have available.
Methodology of the development of example: Good coding standard and simplified design to illustrate the key points.
Technology Used: jQuery UI and Visual Studio 2010
Keyword: jQuery UI, Visual Studio 2010, Date Picker, inline, disabled, altField, altFormat, appendText, autoSize, buttonText, showOn.
Transcript: Welcome back everybody. This Ayad Boudiab. I am a Senior .NET Application Developer, and we are continuing our discussion of jJQuery UI. As I mentioned in the previous videos, in this case we are just covering all the widgets available within jQuery UI, and then we will talk about additional features later. But for now we're just taking them one feature at a time and trying to understand how the properties or the options for these features would work for the specific widget and then how the events, the methods would work, and which ones we have available.
So one of the key ideas that I mentioned in the first video is basically how your pages are structured. We need to make sure that we are referring to the correct jQuery version that you are interested in, and then on top of that you have the jQuery UI version that you are working with, and also we don't want to forget the CSS style sheet that makes everything look the way it does.
These three key features are discussed on the first video. So in this case then, I'm assuming that we're referencing the key ideas here. Here they are on the top. You've got the jQuery and jQuery UI. They are right now in the current folder under the JS, there actually, that's why I'm referencing them this way, and then you've got the custom CSS, which is available inside Dark Hive, because that's the option that I chose. This is the slide sheet. Then you reference jQuery. Then you reference jQuery UI.
Now inside here I have a function for when the DOM is ready, what I want to do. Right now, I don't have anything. So down here in the body, I got an H2 with a class demo headers. It says just Date Picker, and then an ID div inside of that with an ID Date Picker. I'm just simply taking what I have currently and viewing that in the browser. I just end up with something like Date Picker, nothing else.
So then what else do I need in order to get the Date Picker to come up? What do I have down here? I named it date picker. So I need to use jQuery to reference that Date Picker. I use my dollar sign and then the time, because I'm referencing something by ID, so Date Picker. Having picked up the Date Picker, now I need to call the Date Picker function. That function needs to have options passed to it, and as I mentioned in the first video, the options would pass then in the curly braces. Now in this case, I'm going to make this one in line, so inline is through. Now what does that provide me with? So I got the Date Picker based on the ID and then called the Date Picker function and then I passed my options, in this case only in line being through. Start to preview that in the browser and that's what I end up with. So I have a calendar. I can switch between the month. I can select certain days. I can select those. Nothing is showing anywhere, but at least I can select them. This is the calendar showing in line with the page, and I can work with those dates. I can select those dates.
Now most of your work you will be providing the user with a text box, and then the user can select a date. After they click the text box, they can select a date, and the date selected will show up in the text box. So we need to modify our code a little bit to make this happen. Now if I tweak this one a little bit differently down here, I'm going to provide instead of that div . . . let's comment that out. Instead of that div, I'm going to provide an input so the user will be able to type something. Type is text. Then I'm going to give them the ID as Date Picker, simply that. So I have input the user will be seeing a text box, in this case, typical text and the ID being Date Picker.
Let's take what we have over here and try to edit it a little bit. Let me copy it, and again I'm just doing this so you can follow with the videos what steps we went through. So I have the Date Picker and then inline. I'm going to take out the inline option. So I called the Date Picker with the Date Picker ID, and then we just call the function Date Picker on that. Try to preview that in the browser. I see a text box, click on it. I have a calendar that shows up. Select a date. The date is in the calendar. So now I have something a little bit better to work with because I don't most of the time, in some situations you want the calendar to show on the inline, so basically the calendar is always displayed, users can select things from the calendar, you can work with it. But in many situations all you want is a place for the user to type a date, and when they click in there, you want the calendar to show up. That calendar is showing up in here, and then I can basically move through the calendar, select a specific date, and that date would show up in the text box.
Now let's look at the third option. Let's comment that out. Down here, in addition to this input text box, let's comment that out and have something that basically will work a little bit differently. Something like this. I have an input text, text one, and another input, text two and then I have just an equal sign and arrow pointing to the right side. Let me give it the ID that I had for the first one. This is the Date Picker, and then the second one, let's give it text box two for now. I'll change that in a second, but for now let's keep it as text box two.
Just scroll up to here and try to make some modifications to what we currently have. Let's take the text, so Date Picker, I have a constructor or a function that builds that Date Picker, and then I have some properties that I would like to change. I can provide an alternate field where you want the text to go in that field. So it's not only the first field that I'm working with. I want the text to go to that field. Not only do I want the text to go to the next field, but I want it maybe to be in a different format. How do we go about doing that?
Let's go ahead down here first and change this one from being text to date field or something like that. Scroll up here and then inside my options I can provide an alt field, which is an alternative field, and give that field the value that I want. But watch out for one thing in here. Make sure you put the pound sign referencing that specific ID. So date field, it's referencing that field with a comma, and then all text or alt format because remember I want that to be in a different format, I want that to be in a different field. I want it to be in a different format, and that format would be year year-month month-day day. That's the format that I want it to be in. Let's go ahead and save this.
Remember I have two input boxes, one called Date Picker, one called Date Field. Then when I click on that Date Picker, I have an alternative field that is provided called Date Field with a different format. Right click, preview in the browser, and you see two text boxes with the dashes in between and then something here.
So let me select a date. I selected a date, 2/8/2012, but also my selection went into the second text box with the format that I specified being 2012- month-day. So I could by making a selection from here, I could make that selection also show in a different text box by providing the ID. But watch out for thing though, if you take out the pound, it would not work. So make sure you are referring to that using the pound.
Now, let's go ahead and proceed with the other options. For the text box down here, I think I would have those as commented out, and I will revert back to the Date Picker that I had up here. So just a simple Date Picker with an ID, that's all that I have. Comment this line out and let's proceed with other options that we have for the Date Picker. What else do I have? What other options can I work with? I can, for example, append some text to the Date Picker by simply saying "append text" and whichever text you want. For example, append text and then provide the text that you're interested in, something like "date goes here" or something like that. You have the text that you're interested in would go in that specific location. So preview in browser. It should provide me with a text box, and then I should be able to see the one with the text. It should say text goes here and here it is. So I just say date goes here, and then of course this would give us the date, but you could be providing more critical information than that. I'm just showing you the option that you have available so you can provide that to the user as an append text.
Moving forward, let's look at other options. There's also, I can auto size the place where the date would go, the text box. So I can say, in this case, auto size. Preview that, see it? It was a different size. It was larger than this text box that you see, but I was able to auto size it differently, and it gave me a trimmer text box to work with. That's one option you can have for the user.
I can also make some button that could show up on the side of the text box so the user can select from, because the user might not have any visual indication that if he clicks on that text box he would see a calendar. So we need to give them some type of visual indication for that, and that could be something like button text. For example, I can use the dot dot dot that we normally use. That's for the user to select from. There's something in there that you need to select and make that show on. The option in here I could say button. I could say both. In this case, I would say both. I will have the button showing up right beside. I forgot the comma. I have the text showing up right beside the text box so the user can select a specific date. So let's go ahead and preview that. Yes, I want to save.
So we've got the selection in this case, nothing but the selection. When I click on it, I have the calendar and I can select my date. This is a better visual indication for the user to know there is a date that you need to select. You notice how the text is big. So maybe try to remember that. You have about twice the size, and the how about if I come back and make the option of auto size being true. Let's make that auto size being true and preview that in the browser, and you notice that now it's shorter and then I can select the date.
So there are a lot more options for the calendar to work with and also we don't' forget about the events and the methods that I would like to discuss. So I'll discuss that with you in the upcoming video. Please stay tuned and thank you very much for listening. I'm Ayad Boudiab and you take care.