Query UI. Widgets. Datepicker Calendar

Just wanted to explain that this article is not intended for hardcore pros, it is just a push to self-development, a kind of a small tour which explains the possibilities for beginners, for those who have no idea about UI (User Interface) in specific and jQuery as a whole. Well, let's go!

Download here.
Connecting the magical framework, location for the calendar and style sheet:



So, the preparations are complete.

To create a calendar all you need is only one HTML line:

Or if you want to embed a calendar to your site as part of the page:

And a couple of lines of js:

$(function(){
  $.datepicker.setDefaults(
    $.extend($.datepicker.regional[""])
  );
  $("#datepicker").datepicker();
});

Example 1.

And so now we have a working calendar in English, but what if we want to make the site in German or French? To change everything according to our needs you have to change only one setting, and this can be done dynamically:

$('#datepicker').datepicker('option', $.datepicker.regional["de"]);

Example 2.

The standard "default" is not always enough to execute various tasks. So let's just a little bit edit the settings:

$("#datepicker").datepicker({
  minDate: "-30", //The minimal date that can be selected, i.e. 30 days from the "now"
  maxDate: "+1m +1w +3d" //The maximal date that can be selected, i.e. + 1 month, 1 week, and 3 days from "now"
});

Example 3.

Events

$.datepicker.setDefaults($.extend(
  $.datepicker.regional[""])
);
$("#datepicker").datepicker({
  beforeShow: function(input) {
    $(input).css("background-color","#ff9");
  },
  onSelect: function(dateText, inst) {
    $(this).css("background-color","");
    alert("Selected: " + dateText +
      "\n\nid: " + inst.id +
      "\nselectedDay: " + inst.selectedDay +
      "\nselectedMonth: " + inst.selectedMonth +
      "\nselectedYear: " + inst.selectedYear);
  },
  onClose: function(dateText, inst) {
    $(this).css("background-color","");
  }
});

Example 4.

Listed above we've got three options, which contain callbacks. beforeShow - this function is triggered before the calendar is displayed. With the help of css-option the INPUT will be set to yellow background. In onSelect a certain function is defined, which will be triggered when you select date, it will display the selected date in alert and assign value to css-option as empty, that will return INPUT to the prior state. onClose function is triggered when closing the calendar - that is, it will return INPUT as White background.

Methods

Open in a window
$.datepicker.setDefaults($.extend({changeYear: true}, $.datepicker.regional["ru"]));
  $("#datepicker_open").click(function(){
    $("#datepicker").datepicker(
      "dialog",
      "23.04.2009",
    function(){
      alert("Event onSelect");
    },
    { showButtonPanel: true }
  );
});

Example 5.

In this example, I will demonstrate the work of the dialog method. We call this method by clicking on the link. The first argument is the name of the method, the second argument textDate - the default date on which calendar opens. In the argument onSelect we can set callback-function which will be called when selecting a specific date in the calendar. In the argument settings you can define an object with the new widget settings that will be applied to the calendar, which will open in the dialog window.

Well, I guess that's about it... Use it! And the following is a list of all the options, methods, and events.

Options:

  • altField - jQuery selector for another field which should be updated when a date is selected from the Datepicker. The date format in this additional field is set with the option altFormat.
  • altFormat - the date format which will be used for altField option. These settings allow the user to see one date format, whereas for the calculations a different format can be used. A complete list of formats can be found here http://docs.jquery.com/UI/Datepicker/formatDate
  • appendText - text which is displayed after each date input field. Can be used, for example, to mark the field as required.
  • buttonImage - address of the button's popup image, which can be used to call the calendar. Used in conjunction with showOn, when it has the values "button" or "both". If the text has been set in the option buttonText, it becomes the value of the attribute alt of the image and is not displayed.
  • buttonImageOnly - if this option is true, the image, whose address is defined in the option buttonImage, will appear not on the button, but by itself and will work as a trigger.
  • buttonText - the text that will be displayed on the button, which you can use to call the calendar. Used in conjunction with showOn, when it has the values "button" or "both".
  • changeMonth - if this option is enabled by setting the value as true, it will allow to select the month from the drop-down list.
  • changeYear - if this option is enabled by setting the value as true, it will allow to select the year from the drop-down list.
  • closeText - this option is used in conjunction with showButtonPanel, if the latter is set to true. The value of the option closeText is defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • constrainInput - by default this option is set to true, and constrains the date format, defined in the options of the widget, in the input field. If you don't want to follow this format, set the option to false.
  • currentText - is used in conjunction with showButtonPanel, if the latter is set to true. The value of currentText option is defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • dateFormat - defines the format of the date. The value of dateFormat option is defined in the localization file, if it is in use, but this value can be redefined by specifying it. A complete list of all the formats can be found here http://docs.jquery.com/UI/Datepicker/formatDate
  • dayNames - an array containing the long names of the days of the week, starting from Sunday. Defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • dayNamesMin - an array of minimized 2-character names for days of the week, starting from Sunday. Defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • dayNamesShort - an array of minimized 3-character names for days of the week, starting from Sunday. Defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • defaultDate - sets the date, which will be highlighted on the first opening if the date field is empty. The option can be specified through the object Date, or as a number of days from the current day (e.g. +7 or -15), or as a string of values, which determine period ("y" for years, "m" for months, "w" for weeks, "d" for days, e.g. "+1 m +7 d"), and finally as null for current day.
  • duration - the duration of the animation effect when opening (closing) the calendar. Can have values of speeds in a string - "fast", "normal" (default), "slow" or time-number in milliseconds. If you leave the string empty, the calendar will be opened and closed without animation effects.
  • firstDay - sets the first day of the week: Sunday - 0, Monday - 1,... Defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • gotoCurrent - if this option is set to true, the button "Today" (only with showButtonPanel set to true) will point at the selected date instead of the current one.
  • hideIfNoPrevNext - if you constrain the range of available dates with options minDate and maxDate, then when you reach the end of the range, arrows "Back" and "Forward" will be disabled. But they can be completely hidden, by setting option hideIfNoPrevNext to true.
  • isRTL - this option must be set to true, if you are using a language written from right-to-left. Defined in the localization file, if it is in use.
  • maxDate - sets the maximum possible selectable date through the object Date, or as a number of days from the current day (e.g. +7), or as a string of values, which determine period ("y" for years, "m" for months, "w" for weeks, "d" for days, e.g. "+1 y +1 d"), or null for no limit.
  • minDate - sets minimum selectable date via Date object, or as a number of days from the current day (eg -7), or as a string of values, which determine period ("y" for years, "m" for months, "w" for weeks, "d" for days, e.g. "-1y-1m"), or null for no limit.
  • monthNames - an array containing the long month names. Defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • monthNamesShort - an array of abbreviated months names to 3-character. Defined in the localization file, if it is in use, but this value can be redefined by specifying it.
  • navigationAsDateFormat - by default the option is set to false. If set true, the function dateFormat will be applied to the values of the options nextText, prevText and currentText in order to display the previous and next month names when navigating.
  • nextText - the text displayed as a link for the next month. Defined in the localization file, if it is in use, but this value can be redefined by specifying it. If you use a stylesheet file ThemeRoller, this value is replaced by an icon.
  • numberOfMonths - This option sets the number of months to show at the same time. The value of the option may be either a number (straight integer) or an array consisting of two elements, which define, respectively, the number of rows and columns. For example, with two-elements [2, 3] the calendar will be displayed in two rows each having three months.
  • prevText - the text displayed as a link to the previous month. Defined in the localization file, if it is in use, but this value can be redefined by specifying it. If you use a stylesheet file ThemeRoller, this value is replaced by an icon.
  • shortYearCutoff - by default +10. This option is used only if you use in dateFormat two-digit year format and serves as a compensator for determining the century. If the value is provided as a number, then it is used directly. If the value is provided as a string, then it is converted to a number and added to the current year. Once the value of the cutoff year is determined, any dates, with a year value less than or equal to it are considered as of this century. Greater values - are considered as of the previous century.
  • showAnim - determines the type of animation when you open the calendar. By defaults set to show (when closing hide will be used). Without connecting additional files you can use the effects of "slideDown" and "fadeIn" (when closing, respectively, the effects of "slideUp" and "fadeout" will be used). You can also use any effects in jQuery UI Effects of course, only if you additionally connect them.
  • showButtonPanel - setting the value to true for this option will cause that the panel will display two buttons - "jump to current date" and "closing the calendar".
  • showCurrentAsPos - when displaying multi-month, the number provided to this option determines the position of the current month. The default value is 0, and the current month is displayed in the top left corner.
  • showMonthAfterYear - by default the value is set false and the header name of the month comes before the year. If set to true, name of the month will go after year.
  • showOn - by default this option is set to "focus", this makes the calendar appear when you click in the input field. Other possible values are - "button" and "both". Next to the input field a button will appear. In the case of "button", the calendar will open by clicking on the button, in the second case, by clicking on the button, as well as, by receiving focus to the input field.
  • showOptions - if you use one of the effects of jQuery UI Effects, via this option, it is possible to provide additional settings for the animation. For example: showOptions: {direction: "up"}.
  • showOtherMonths - by default set to false. If set to true, this will display on the calendar days preceding and/or following month, which is non-selectable.
  • stepMonths - set how many months to move in the calendar when clicking on "Next" and "Previous" links. By default it's 1 month shift.
  • yearRange - Control how many years to display in the drop-down list (when using the option changeYear).

Events:

  • beforeShow - here you can define the function that will be called just before the calendar is opened. The function takes as argument an object that describes the input field which the widget is working with.
  • beforeShowDay - with this option you can set the customized function which takes the selected date as an argument. The function must return an array, where the element with index equal to [0] - true or false indicates whether or not the selection of this date is possible. The element with index [1] contains the class name (-s) to display the date. The element with index [2] (optional) - the popup tooltip for the date. The function will be called for every date in the calendar if hovered over it with the mouse cursor.
  • onChangeMonthYear - here you can define the function which will be called every time you change the month or the year in the calendar. The function has three arguments. The first two arguments - are the new year and month, the third argument - datepicker object.
  • onClose - with this option you can define the function to be called if the calendar was closed without any date being selected.
  • onSelect - this option defines the function that will be called if any date is selected in the calendar.

Methods:

  • destroy - .datepicker ("destroy" removes completely the functionality of the widget Datepicker. Returns the elements into pre-initialization state.
  • disable - .datepicker ("disable") temporarily disables all the functionality of the widget. To re-enable it, use the method enable.
  • enable - .datepicker ("enable") enables the use of all the functionality of the widget, if it was prior disabled by the method disable.
  • option - .datepicker ("option", optionName, [value]) by using this method you can get or set the value of any widget option after initialization.
  • dialog - .datepicker ("dialog", dateText, [onSelect], [settings], [pos]) opens the Datepicker in the dialog mode. In the argument dateText a date is provided, on which the calendar is opened. Other arguments are optional. In the argument OnSelect a function can be passed, which will be called when selecting a date in the calendar, in the argument settings an object can passed with new widget settings, in the argument pos - coordinated, on which a dialog field will be open. You can use the mouse events, to determine the coordinates.
  • isDisabled - .datepicker ("isDisabled") the method returns true, if to the widget the method disable was used, and false if not.
  • hide - .datepicker ("hide", [speed]) hides the previously opened calendar.
  • show - .datepicker ("show") opens the calendar.
  • getDate - .datepicker ("getDate") the method returns the date which was selected in the calendar.
  • setDate - .datepicker ("setDate", date) method allows you to set the date in the calendar. The value of the argument date can be a string (e.g.: 25.10.1917).

Continue reading here: HTML5: placeholder attribute with cross-browser support

Was this article helpful?

0 0