× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Animation and controlling: Date Picker - Course Introduction to jQuery UI - Part 5 | web Developer courses

We will wrap up the datepicker discussion by taking about some more options, such as animation and controlling how many months and years to step.


Duration:  25 minutes

Summary: In this video, we proceed with the jQuery UI discussion. We will wrap up the datepicker discussion by taking about some more options, such as animation and controlling how many months and years to step. Then, we will talk about some events like onSelect and onClose where we will be adding css classes to the textbox control. The datepicker gives you the chance to manipulate the actual day before it shows it on the calendar. That way you can enable and disable that day depending on whether it is a holiday. Finally we will see how to call methods for the datepicker widget.

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, changeMonth, changeYear, showWeek, weekHeader, dayNames, defaultDate, duration, minDate, maxDate, nextText, prevText, numberOfMonth, showAnim, stepMonths, onSelect, onClose, beforeShowDay, beforeShow.

Transcript: Welcome back, everybody. This is Ayad Boudiab. I'm a Senior ,NET Application Developer, and we are in our jQuery UI course. In the previous video, I explained for you the Date Picker control, and we looked through some options. We saw how we can manipulate some of those options and the display for the Date Picker widget.

In this video, I'm going to just explain some more options, because the Date Picker has many of those options available for you to manipulate and control how the calendar and selections and the animations and the text, and so on, would look. We'll also experiment with some of the events available for our Date Picker control, and also I will show how you we can call a method, because the methods are called a little bit differently like we have seen in the previous widgets.

Let's go ahead and proceed. In this case, let's say if I need to display the calendar for the user, but I also need the option of seeing the month and the year so they can change them. I have, right now, the Date Picker. I'm picking the date with the Date Picker control using the pound sign. That the jQuery syntax. Here it is. That's the Date Picker. Then, I'm calling the Date Picker function, but I need to pass it the options I'm interested in.

As I mentioned, the option I'm interested in right now is the one that has to do with the ability to change the month and the year. So I can say something like, "Change Month," turn that to true, and I also give them the option to "Change Year." That's also true. Now when I preview my page and I select a date, I select Calendar. Something must be wrong with the actual control, because it should display when I click inside the box, and it's not displaying. Let's come back over here. You see that? I have a semi- colon instead of a colon, so that's for the "Change Year." Let's go ahead and save it and preview in the browser.

Now you'll notice that I can change the month, January all the way to December, and also I can change the year. That way I can move between them easily and then I would be able to decide which date I'm interested in. That's for the Change Month and the Change Year option.

Let's continue. All right. Now let's look at more options that I can work with. For example, I have the ability to Show Week, what week I'm in and also the Week Header. We can display that for the user. I can turn Show Week to be true, and I can also tell what the Week Header will be like. Week Header, the one that shows on the top, will be something like this. That's another option for the Week Header. Then, if I right click and show in the browser, click. Here's the Week, WK, and here's the Weeks Four, Five, Six, Seven, and Eight. As I move, the weeks are changing. That's the option of showing the week for the user, so they can choose which week they're interested in. That's the option for the week.

Now, how about if I want to show the day names that will show up? Of course, that will be an array, right? So the day names would be something like that, and since they are an array, I need to provide them with square brackets. That would be the day names that the user would be able to see. If I copy them over so you don't have to see me typing them one at a time, here are the day names: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday. These are the day names that will display. Then if I preview that in the browser and click on the calendar, you see the tool tips for the names. Of course, this might seem trivial, but I really know what those names are. Right? You don't have to tell me. If you're working with internationalization and you're displaying things in German or Chinese, then you'll be able to give some other clues as far as hovering over those elements and seeing what they are. It that's where it comes in handy in terms of setting those options.

Let's look at some more options, and then we'll look at Events. Now, how about showing the actual default date? The default day is today's date. How about if I want to show a different default date than today's date? You could provide the actual date, or you could provide some type of arithmetic to show the actual default date compared to today's date. So, I can say something like this, "Default Date." Then I can give it a value of plus five, so five from today's date, right? That's the full date that I would like to show. You know the default date would show up in a different color. That's the default date which was showing me "17" originally. Let's display that again so you can see it. You see that? "17" is showing up as the default date because it took today's date and then added five days to it ad shows 17 as the actual default date. Of course, since you can do plus five, you can do, say for example, minus five or minus two, or what have you. That's the option as far as the default date is concerned.

Now, can I show the calendar with some type of animation or some type of duration? Maybe I want it to be slow or I need some time to show the calendar. I don't want it to show quickly or disappear quickly. I have the option of showing the duration. That duration would be something like "Slow." Preview in the browser. I show the calendar slow. You see that? It takes time to show and hide. Also, instead of slow, I can also provide values. For example, I can say "5000" for the milliseconds. That's the actual duration, instead of the Slow or Fast. Then, when I am going to display it, it takes time to show. It takes about five seconds to show, and then also to fade out, five seconds.

That's the option of the actual duration that I'd like to show. Sometimes you need to limit the user on a specific date. You need to show them the calendar, but say you want them to only go back or forward one year. You don't want them to choose dates beyond these extremes. You have the option of doing so by using the Min Date and Max Date. With the Min Date and Max Date, you also have some possibilities of providing values. You can provide the actual date. You can provide also some arithmetic, like I showed with the default date.

In this case, let's say that I want to give the user a Min Date and Max Date. Min Date, I can provide a value. I'll come back to this in a second. The for the Max Date, I can also provide a value. In this case, let's say the value for the next date is 03/01/2012. That's the Max Date that I want the user to choose. Then for the Min Date, I can say something like this: Minus 1M for the month and minus one day back. Not only can I choose the actual date. Of course, I can use the dates like I did with the Max Date to provide them here with the Min Date. But I'm showing you the possibility of providing different ways of giving the Min Date and Max Date. So I can go back one month and one day, and here I'm providing an actual date. These are the values for the Min Date and Max Date. Let's preview that in the browser. For February and March 1st, you see that everything else is blurred out. I cannot select any of those dates because I said March 1st is the next date.

Now going back one month and one day with Min Date, here I am. I cannot select any of those dates because these are my boundaries. This is very powerful because you don't want the user to provide inappropriate dates. That's one of the options that you have available.

You know the text that you see on the calendar, let me go back to it for a second. You know that you see on the calendar over here. You have the "Previous" and the "Next" and so on. This is the text you can show on the calendar. Also, you have the option within the Date Picker to say, for example, "Next Text" and "Previous Text." I can say "Next Text" to be something like that, or "Greater Than." I can present the Next Text. Also, for the "Previous Text" or for the "Prev Text," that is, I can also provide something like this for the previous and the next text..

If I try to view that in the browser as well, I'll end up with the following. This is the Previous Text and this is the Next Text. Of course, Prev and Next would have been much clearer, but I'm telling you here than you can use different options. Again, this would come in handy when it works with internationalization.

Now how about manipulating the number of months? Can I manipulate the number of months? I have the option of saying "Number of Months" to be two. Preview that. Did I spell that correctly? Let's go back to it. Oops, I spelled the O uppercase. It should be "number of months," with lowercase. Preview that in the browser, and here's two months showing up on my calendar.

Maybe you're working with some type of financial calculations, or for example, some type of educational institution where the user needs to look at their calendars to see what they have in their semester or quarter. So you need to look at the current month and the next month at the same time. You have the option of providing that and of showing the number of months to display. The user will be easily looking at those two months and deciding what date to choose.

Also, I can show animation. I can make it fade in, fold, or slide down. These are the values that I can also provide. So "Show," and then for animation, the actual value could be something like "Fade In." That's one of the values I can provide. Again, the other values could be "Fold" and "Slide Down." Here's the calendar. When I see the calendar, I click on it. It fades in, fades out, and fades in. That's one of the options I can provide with my animation. Or I can say something like "Slide Down." That's another option I can have for the calendar.

So you see the calendar sliding down, right? That's as far as animation is concerned. When I'm clicking Next, I can step more than one month at a time. This comes in handy when you need to jump a certain number of months, instead of just going one month at a time. So step months to be for example two, and when I try to preview that and I can click Next, look we are in February, jumping April, June, August, and October. So I can jump two months at a time, if I need to allow the user to have that possibility.

Let's move on to the actual events. I need to provide some events here for the user. I went inside my method, inside the Date Picker, and I need to provide some functionality. For example, on Select, when the user selects a date, on Select, and I need to provide for that a function. In this case, I'm not working with an actual option. I'm working with an actual event. On Select, when the user selects a date, I want a function. The function takes a date text. That's the text the user has selected, an instance of that control, which is the widget that I'm working with. For that function, what do you want to do here? For example, I can provide an alert that says something like, "The date selected is," and then providing the actual date. That's coming in as a parameter. Then also, something like . . . let's close that and make sure we cover all the parentheses correctly and the codes. Then something like "New Line," so we can move it to the next line. Then we will set the date to be tomorrow.

That's an option that I can have. Then let's set the date to be tomorrow. I can select my Date Picker. That's just the same text in here. I'm getting my Date Picker. I select that using the pound sign. That's the basic jQuery way of picking up that actual element by ID. Then Date Picker and then what function can I use? For example, I can say "Set Date" to be +1. So one day to be the next day.

I'm showing you two things, actually, in here. The first thing I'm showing you is basically how to work with events. Inside the Date Picker, instead of providing curly braces and providing the actual options, I'm giving you the actual event that's happening. That even takes a function with two parameters: One, the actual date text that's been selected, and then an instance of that widget. Then in here I'm alerting some values, and then I'm using the actual Date Picker.

Look at what I'm doing. Set Date to be one. What's Set Date? Set Date is one of the methods that I'm calling. That's how you call a method for a specific Date Picker and the parameter that you're providing for that method. Calling the method, then the parameter you're providing. I'm setting that date to be tomorrow's date.

So I'll work with events. I will call the methods. Then let's try to preview that in the browser, selecting 13. The date selected is 02/13/2012. We will set the date to be tomorrow, and then you know the date is set to 13, which is actually tomorrow. Let's say for example, selecting 7 and then we'll set the date to be tomorrow, and here it is. Today is the 12th, and it's setting the date to be tomorrow's date, which is the 13th. That's how I can call the methods for this specific control.

Let me comment those out so they don't interrupt me when I'm working with the other type of events. Now what's the second event that I can work with? For example, I can work with an event like "On Close." Let me provide this functionality for you. "On Close" would look something like this. "On Close" is an event, but it takes that function that it will trigger when the user tries to close the calendar. So the function takes the date text, and then ends actual instance like the first one did on "Select." It's the same way.

If the date text is empty, if the user did not select anything, I'm going to alert him: "No date was selected." Then I say the Date Picker, which is the actual control, and then I say add a class. I'm adding a cascading style sheet class to that specific control, which is a text box. I'm adding this class, and I'm adding that class. Well, you say, "How did I come up with those? Where are those classes? I didn't see you writing them." Well, that's what I did. I went in and I opened the specific file, and since I have the Dark Hive, I open my style sheet from there. I start scrolling through those, and I selected the actual classes that I'm interested in.

That's how I did that. There are all these classes already provided for me. Like corner all, so I said, "Okay, it' nice to make corners around the text." So I selected that one. I called that using the "Add Class" from CSS. So I can save this right now. Remember, this method is on close. So right click and view in the browser. It displays. I didn't select anything, so I'm going to click outside the box. I went outside the box and clicked. No date was selected. It triggers that method on close. It looked at the date that I was selecting. It found out that no date was selected, based on the parameters passed into that method. No date was selected.

Click OK, and you notice that it rounded the boxes and gave them that different style of the class, alerting the user that something isn't right. That's one option that I chose. Of course, you could do that in many different ways, but I'm just showing you how you can actually add some of those CSS classes to your code.

That's how the On Close would work. Let me show you one more. Comment that out. There are actually two events. You can say "Before Show," meaning before you show the calendar. That's one event you can work with. You can say "Before Show Day," meaning before you show an actual day. That's what the event would look like. "Before Show Day" means before you show any specific day as they are rendered, before you show them what you want to happen. You can call a function, for example, "Check Day." You call a function. The name of the function is Check Day. Or you just simply write the actual function and you provide the date as a parameter.

When it takes that date, it's up to you what you want to do with it. The function "Check Day" will actually take that specific date, and I named that function "Check Day" by the way. If the day coming in, Get Day is 12 and the month is 8, be careful in here, because JavaScript works with the months from 0 to 11, not 1 to 12. By saying 8 in here, I mean September. Be careful with that. Again, the months go from 0 to 11, not from 1 to 12. I'm saying that if it is September 12th, return an array.

That array takes three parameters. The "False" means don't make it selectable, and no parameters are passed in here. Then the actual text that it would show is my birthday. Otherwise, just make that date selectable and don't provide anything. How would I know those parameters? I just looked it up in the documentation. I looked up what this function would return. That documentation told me you can return an array with those values.

Let's go ahead and save that and then try to preview it. "Before Show Day," right? It's going to display the calendar. Okay. Well, nothing happened here. For every one of those days, something happened. Now, let's go to September and see if there's anything in there. Here's September. You notice that the 12th of September is actually not selectable. When I hover over it, it says my birthday. Basically, before you rendered every single day, what do you want to do with it?

For this specific one, I said to make it not selectable, and that's why I passed that parameter as "False." I also provided the actual text that says my birthday, which means that's not a selectable date because it's my birthday. You could use any of the other holidays that you are interested in, but you notice that "Before Show Day" is being called on every one of those. I was able to make them selectable. I don't have any problem with those, but only for this specific date. I make that my birthday, and the tool tip is showing me that that's my birthday. That's what the tool tip would show from this one. By saying "False," mean make it not selectable, and this one make it selectable.

As you see, there's a lot to learn about the Date Picker control. I kind of gave you the basics that you can work with. Please stay tuned for the upcoming videos of jQuery UI. If you have any questions, drop us a line on Mr. Bool's website. Thank you very much for listening. I'm Ayad Boudiab, and you take care.

Senior Software Engineer with experience in C#, JavaScript, jQuery, Knockout JS, Kendo UI, HTML5, and SQL Server. Ayad has more than 20 years experience in technical training and teaching. Contributor to MrBool for about 7 years.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 2,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 1,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,33
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login