Jquery datepicker


Более удобный DateTimePicker разработка автора xdan.ru

JQuery UI — это набор пользовательских интерфейс виджетов, компонентов и эффектов. Datepicker — это небольшой виджет календарик, удобный прежде всего тем, что пользователь может легко выбрать нужную дату, при этом дата запишется в требуемом формате, и не будет требовать стандартизации. 

Вот так виджет Datepicker выглядит из под коробки в стандартном jQuery UI

Стандартный Dateicker из jQuery UI

 Все лаконично и просто. Но есть один большой минус. В нем нет редактирования времени. Собственно потому виджет и называется DatePicker, аналогичный виджет со временем должен был бы называться DateTimePicker) К сожалению такого виджета в библиотеке нет. Для простоты Datepicker,TimePicker и dateTimePicker обычно обобщают в одно понятие DatePicker.


К слову в html5 появились новые элементы ввода, в том числе Date и DateTime Picker'ы. Но мало того, что поддерживаются они не во всех браузерах, так еще и эта самая поддержка оставляет желать лучшего. Приведу пример, как выглядит html5 datepicker в разных браузерах

  <input type="date" name="datepicker"/><!--datepicker-->  <input type="time" name="timepicker"/><!--timepicker-->  <input type="datetime" name="datetimepicker"/><!--datetimepicker-->

Посмотрите, как оно будет выглядеть у вас в браузере

datepicker timepicker datetimepicker

Флагман тут Opera, в ней виджет выглядит примерно так, как и должен. 

Браузер DatePicker TimePicker DateTimePicker
Опера 11.1 DatePicker html5 opera 11.1

TimePicker html5 в opera 11
DateTimePicker html5 в opera 11
Chrome 10.0 DatePicker html5 в Chrome 10.0 Timepicker html5 в Chrome 10 DateTimePicker html5 в Chrome 10

Еще в таблице я привел Chrome, так как он в отличии от FireFox и IE хоть, как-то отображает новые input'ы. Выглядит это очень по спартански, Единственный плюс это стандартизованный ввод. 

Как я уже сказал не так давно вышедшие Firexox 4 и IE9, вообще никак не обрабатывают новые теги. 

Из всего вышесказанного можно сделать вывод, что нативный input type=date… нам не подходит. Также нам не подходит DatePicker из JQuery UI, в том случае если нам необходима работа не только с датой, но и со временем.

Есть еще одна не плохая разработка JSCal2. Он кросс браузерный и не требует ни каких дополнительных библиотек. Проще говоря, у вас не возникнет проблем с ним, какой бы библиотекой вы не пользовались (Prototype, mootools, jQuery) 


Разработка довольно таки интересная. Множество скинов на любой вкус, интернационализация, независимость от библиотек. Из минусов хочу отметить   громоздкость, излишняя кастомизация, иногда бывает лишней. Я пытался поставить ее на один сайт и у меня ничего не вышло. В Опере все было замечательно, а вот в других браузерах календарь открывался то вверх, то вниз, то вовсе не открывался. Эта разработка не для любителей простых решений. 

Хотя если сравнить jQuery UI DatePicker и JsCal2, то второй менее громоздок. Однако он не идет ни в какое сравнение с нативным  <input type="date" name="datepicker"/>.

Лично я люблю скрипты, которые для своей работы требуют подключения только одного скрипта.

Когда-то меня этим покорил nicedit. Всего две строчки в html коде и любой textarea на странице превращается в wysiwyg редактор


  <script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>  <script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>				

Взгляните на форму для добавления комментария)

Теперь от вступительной части наконец перейду к теме статьи. Задача: подключить к стандартному input, DateTimePicker, при этом желательно обойтись минимальным количеством подключаемых файлов. datePicker должен поддерживать редактирование даты и времени. Кроме того, скрипт должен быть из разряда подключил и забыл.

Мне удалось найти такую разработку. Создана она на основе jQuery UI Datepicke r. Но в отличии от оригинала, ядро jQuery UI, а также файлы эффектов зашиты в один  файл. Поэтому процесс внедрения не вызывает неудобство.  

Качаем архив с виджетом jQuery UI Datepicker 1.7.1

Затем подключаем необходимые файлы, и вуаля виджет готов к работе. Можно смело о нем забыть

  <script src="js/jquery_ui_datepicker/jquery_ui_datepicker.js"></s.  

ut class="datetime" value="2008-08-23 10:45:00" id="starttime"/> <script type="text/javascript"> jQuery(function(){ jQuery('input.datetime').datetime({ userLang : 'ru' }); }); </script>

Картинка для тех у кого не включен js)

jquery UI js DatePicker

xdan.ru

Full calendar datepicker. If you are not familiar with jquery ui, and you are looking for a way to add a datepicker to your website, it would be superfluous to read this article, where we will tell how to add and configure datepicker. It’s easy enough if you are already familiar with this library, but it will be very useful for beginners. This tutorial is also provided by several illustrative examples which you can try online.



First at all, you can download jQuery UI library here. Now, you can prepare an empty HTML file and add next code:

  <!-- add styles -->  <link href="css/ui-lightness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />  <!-- add scripts -->  <script src="js/jquery.191.js"></script>  <script src="js/jquery-ui-1.9.2.custom.min.js"></script> 

Please pay attention, that you will need to put all the files of jQuery UI to appropriate folders (let’s keep all JS files in ‘js’ folder and all CSS in ‘css’ folder). Well, we have just linked all the necessary libraries and styles. Now, in order to add a calendar, we need to add a single line:

 <input id="datepicker" type="text" /> 

It is also possible to add this as an inline-object. In this case we don’t need to specify ‘type’ param:

 <div id="datepicker"></div> 

Finally, to complete this page and to initialize our datepicker, let’s add some JS code:

 <script> $(function(){  $.datepicker.setDefaults(  $.extend($.datepicker.regional[''])  );  $('#datepicker').datepicker(); }); </script> 
Live Demo 1

By default, the main interface is in English. But, you easily can change it via options, let’s say – German interface:


 $('#datepicker').datepicker('option', $.datepicker.regional['de']); 
Live Demo 2

We also can modify another params, for instance minDate and maxDate:

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

Events

This is an example how you can add your events:

 $.datepicker.setDefaults($.extend(  $.datepicker.regional['']) ); $('#datepicker').datepicker({  beforeShow: function(input) {  $(input).css('background-color','#ff0');  },  onSelect: function(dateText, obj) {  $(this).css('background-color','');  alert('Selected: ' + dateText +  "nnid: " + obj.id +  "nselectedDay: " + obj.selectedDay +  "nselectedMonth: " + obj.selectedMonth +  "nselectedYear: " + obj.selectedYear);  },  onClose: function(dateText, obj) {  $(this).css('background-color','');  } }); 
Live Demo 4

There are three event handlers: beforeShow – this function is triggered before the calendar is shown. With the help of css-option the INPUT will be set to yellow background. onSelect is triggered when you select a date, it alerts the selected date (with other params) and nullifies the value of background-color. onClose function is triggered when we have closed the calendar.



Methods

 <a id="datepicker_open">Open in a window</a> 
 $(function(){  $.datepicker.setDefaults(  $.extend($.datepicker.regional[''])  );  $('#datepicker_open').click(function(){  $('#datepicker').datepicker(  'dialog',  '28.05.2013',  function(){  alert('Event onSelect');  },  { showButtonPanel: true }  );  }); }); 
Live Demo 5

[sociallocker]

all examples in package

[/sociallocker]

This example demonstrates the dialog method. When we click on the link, it invokes the function. The first argument is the name of the method, the second argument textDate – the default date on which the calendar opens. In the argument onSelect we can set callback-function which will be invoked when you have selected a certain date in the calendar. In the argument settings you can define an object with the new widget settings that could be applied to the calendar.


Datepicker 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).

www.script-tutorials.com

Datepicker Options Methods in jQuery

There are several options and methods provided by jQuery Datepicker plugin. For example, the following list contains some of this jQuery plugin options that are used to customize date picker settings.

jquey_datepicker

Options

  • buttonImage – This option contains the path or name of an image to be shown, on clicking what the calendar widget will be the popup.
  • buttonImageOnly – This date picker option is to show only the image without any button effect around it.
  • buttonText – This option is like alt attribute of an HTML <img> tag, which is used to show alternate text given if there is any problem on showing an image to the browser.
  • showOn – It can contain values like focus, button and both to popup calendar widget with respective event occurrences, like, on focusing target input field, on clicking a button.
  • dateFormat – As we can guess easily for what this option is used, it is for giving required format of the selected date.
  • minDate, maxDate – It will show a minimum and a maximum number of dates that are able to select, respectively.

All options including those that are not specified in the above list, are used to apply changes with respect to a specific selector.

Let us have an example to work with date picker some of the options from the above list.

<html>  <head>  <title>JQuery DatePicker</title>  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  <script>  $( "#txtDate" ).datepicker({  showOn: "button",  buttonImage: "datepicker_icon.png",  buttonText: "Date Picker",  buttonImageOnly: true});  });  </script>  </head>  <body>  <div>Select Date: <input type="text" id="txtDate" /></div>  </body>  </html>  

If you don’t have such image as specified in above script, then, the value of the buttonText option will be shown to the browser.

phppot.com

jQuery UI is simply awesome and due to the ease of use, it is popular and widely used in almost any website that need interactive features.

And, in this post, we’ll look at one of the features provided, the Datepicker widget.

We will try to learn how to customize the calendar theme, so that you will be able to create your own theme that will correspond to your overall design. However, you need a bit of understanding in JavaScript and familiarity with CSS before following this tutorial.

  • Demo
  • Download Source

If you’re ready, let’s get started.

The Assets

Let’s prepare some of the essential assets for the calendar.

First, the calendar design will refer to this PSD file from Premium Pixels. So we’d better download it first to help us take a sample of the colors we need. Then, download two patterns from Subtle Patterns that we will use as the background of our calendar. In this example, we decided to use the following patterns: black denim and dark leather.

Jquery datepicker

We will also need a web development tool like Firebug to inspect element classes/ids generated by the jQuery UI.

Well, I think we’ve had enough preparation. Now let’s go to the first step.

Step 1: jQuery UI Datepicker

First, go to jQuery UI download page. In this page you’ll be presented with a few options, as follows; the UI Core, Widgets, Interactions and Effects.

We should deselect all the components, as we don’t need all of them.

Then, in the Widgets section select only the datepicker. The jQuery UI will select the essential dependencies automatically, and then download the file.

Link all the downloaded files — except the CSS — to your HTML blank document, as follows:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>  <script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>

Step 2: Customizing the Datepicker

In this step, we will configure a datepicker with the following options.

<script type="text/javascript">  	$(function(){  		$('#datepicker').datepicker({  			inline: true,  			showOtherMonths: true,  			dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],  		});  	});  </script>

The above code will instruct the jQuery to display the calendar on an element with datepicker id. So, we need put the following div tag with — datepicker ID — in the body section to form the calendar:

<div id="datepicker"></div>

Now the calendar should have already been generated and appear like this, plain without any styles, but still has the functionality.

Jquery datepicker

Step 3: The Styles

Now let’s begin styling the calendar. We will start off by normalizing all the elements – as usual – and creating a new stylesheet, in this example I name it datepicker.css. Then link them all to the HTML document.

<link href="css/normalize.css" rel="stylesheet" type="text/css"/>  <link href="css/datepicker.css" rel="stylesheet" type="text/css"/>

Then, we will first attach a background to the body so our HTML doesn’t look too plain.

body {  	background: url('../img/darkdenim3.png') repeat 0 0 #555;  }

Next, we will specify the datepicker’s width, position it to the center and add drop shadow to give the prominece effect to the calendar.

.ui-datepicker {  	width: 216px;  	height: auto;  	margin: 5px auto 0;  	font: 9pt Arial, sans-serif;  	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);  }

We will also remove the default underline decoration from every anchor tag.

.ui-datepicker a {  	text-decoration: none;  }

The calendar in jQuery UI is formed with a table. So, let’s add 100% width for the table, so it will have the same maximum width as the wrapper above; that is 216px

.ui-datepicker table {  	width: 100%;  }

Styling the Header Section

The datepicker has a header section containing Month & Year of the calendar. This section will have the dark leather texture we’ve downloaded before with slightly white font color and 1px white shadow at the top.

.ui-datepicker-header {  	background: url('../img/dark_leather.png') repeat 0 0 #000;  	color: #e0e0e0;  	font-weight: bold;  	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);  	-moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);  	box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);  	text-shadow: 1px -1px 0px #000;  	filter: dropshadow(color=#000, offx=1, offy=-1);  	line-height: 30px;  	border-width: 1px 0 0 0;  	border-style: solid;  	border-color: #111;  }

Next, let’s center the Month position.

  .ui-datepicker-title {  	text-align: center;  }

Replace the Next and Prev text with the sprite arrow images sliced from the PSD.

.ui-datepicker-prev, .ui-datepicker-next {  	display: inline-block;  	width: 30px;  	height: 30px;  	text-align: center;  	cursor: pointer;  	background-image: url('../img/arrow.png');  	background-repeat: no-repeat;  	line-height: 600%;  	overflow: hidden;  }

Then, adjust the arrow position respectively.

.ui-datepicker-prev {  	float: left;  	background-position: center -30px;  }  .ui-datepicker-next {  	float: right;  	background-position: center 0px;  }

While the day names section is wrapped within a thead, based on our design reference, it will have a slightly white gradient. And, to simplify our task, we will use this tool to generate the gradient code:

.ui-datepicker thead {  	background-color: #f7f7f7;  	background-image: -moz-linear-gradient(top, #f7f7f7 0%, #f1f1f1 100%);  	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));  	background-image: -webkit-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);  	background-image: -o-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);  	background-image: -ms-linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);  	background-image: linear-gradient(top, #f7f7f7 0%,#f1f1f1 100%);  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );  	border-bottom: 1px solid #bbb;  }

The day names text will have the dark grey color of #666666 and they will also have a thin white text-shadow to give it the pressed effect.

.ui-datepicker th {  	text-transform: uppercase;  	font-size: 6pt;  	padding: 5px 0;  	color: #666666;  	text-shadow: 1px 0px 0px #fff;  	filter: dropshadow(color=#fff, offx=1, offy=0);  }

At this point, the calendar will appear like this:

Jquery datepicker

Styling the Dates

The calendar dates are wrapped within td or table data. So, we will set the padding to 0 to remove the spaces between the td and give it a right border of 1px.

.ui-datepicker tbody td {  	padding: 0;  	border-right: 1px solid #bbb;  }

Except for the last td, which will not have right border. We set the right border to 0 for this.

.ui-datepicker tbody td:last-child {  	border-right: 0px;  }

The table row will be almost the same. It will have a 1px border bottom except for the last row.

.ui-datepicker tbody tr {  	border-bottom: 1px solid #bbb;  }  .ui-datepicker tbody tr:last-child {  	border-bottom: 0px;  }

Styling the Default, Hover and Active State

In this step we will define the date hover and active styles. We will first define the date default state by specifying the dimension; center the date text position, add gradient color and inner white shadow.

.ui-datepicker td span, .ui-datepicker td a {  	display: inline-block;  	font-weight: bold;  	text-align: center;  	width: 30px;  	height: 30px;  	line-height: 30px;  	color: #666666;  	text-shadow: 1px 1px 0px #fff;  	filter: dropshadow(color=#fff, offx=1, offy=1);  }  .ui-datepicker-calendar .ui-state-default {  	background: #ededed;  	background: -moz-linear-gradient(top, #ededed 0%, #dedede 100%);  	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));  	background: -webkit-linear-gradient(top, #ededed 0%,#dedede 100%);  	background: -o-linear-gradient(top, #ededed 0%,#dedede 100%);  	background: -ms-linear-gradient(top, #ededed 0%,#dedede 100%);  	background: linear-gradient(top, #ededed 0%,#dedede 100%);  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );  	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);  	-moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);  	box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);  }  .ui-datepicker-unselectable .ui-state-default {  	background: #f4f4f4;  	color: #b4b3b3;  }

When you hover over the date, it will turn to slightly white.

  .ui-datepicker-calendar .ui-state-hover {  	background: #f7f7f7;  }

When the date is in an active state, it will have the following styles.

  .ui-datepicker-calendar .ui-state-active {  	background: #6eafbf;  	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);  	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);  	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);  	color: #e0e0e0;  	text-shadow: 0px 1px 0px #4d7a85;  	filter: dropshadow(color=#4d7a85, offx=0, offy=1);  	border: 1px solid #55838f;  	position: relative;  	margin: -1px;  }

Now, the calendar should look much better.

Jquery datepicker

Fixing the Position

At this point, look at the date carefully. When you click on the date at the first or the last column, you will notice that the active state overflowing a pixel off the calendar edge.

Jquery datepicker

So here, we will do a some small fixes.

First we will decrease the date width to 29px, and set the right margin of the last column and left margin of the first column to 0 to reverse the -1px margin we have set previously for the active state.

.ui-datepicker-calendar td:first-child .ui-state-active {  	width: 29px;  	margin-left: 0;  }  .ui-datepicker-calendar td:last-child .ui-state-active {  	width: 29px;  	margin-right: 0;  }  

The date at last row of the calendar will also have a similar treatment.

.ui-datepicker-calendar tr:last-child .ui-state-active {  	height: 29px;  	margin-bottom: 0;  }

Now, let’s see the result. Well, the calendar now looks beautiful and fits perfectly as our design reference. And, you can see the demo and download the source to examine the code from the links below the image.

Jquery datepicker

  • Demo
  • Download Source

Bonus: Extend the Calendar

Well, today we have learned quite a lot on how to create a custom theme for jQuery UI Datepicker. But you shouldn’t to stop here, as there are still many things that can be extended from this datepicker. Depending on your jQuery and CSS proficiency you extend the calendar to be like this – text input with an overlay datepicker.

Jquery datepicker

  • Demo
  • Download Source

Further Reading

For further reading on jQuery UI. You can read the complete documentation here:

  • Getting Started with jQuery UI
  • Theming jQUery UI
  • jQuery UI: Theming API classes

Final Thoughts

Thank you for reading and following this tutorial, I hope you find it useful. And, If you have any feedback or would like to add things that might be missing from this tutorial, feel free to point it out in the comment section below. Thanks (again).

www.hongkiat.com

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).datepick({  	pickerClass: '', // CSS class to add to this instance of the datepicker  	showOnFocus: true, // True for popup on focus, false for not  	showTrigger: null, // Element to be cloned for a trigger, null for none  	showAnim: 'show', // Name of jQuery animation for popup, '' for no animation  	showOptions: {}, // Options for enhanced animations  	showSpeed: '_default', // Duration of display/closure  	popupContainer: null, // The element to which a popup calendar is added, null for body  	alignment: 'bottom', // Alignment of popup - with nominated corner of input:  		// 'top' or 'bottom' aligns depending on language direction,  		// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'  	fixedWeeks: false, // True to always show 6 weeks, false to only show as many as are needed  	firstDay: null, // First day of the week, 0 = Sunday, 1 = Monday, ...  		// defaults to calendar local setting if null  	calculateWeek: null, // Calculate week of the year from a date, null for calendar default  	monthsToShow: 1, // How many months to show, cols or [rows, cols]  	monthsOffset: 0, // How many months to offset the primary month by  	monthsToStep: 1, // How many months to move when prev/next clicked  	monthsToJump: 12, // How many months to move when large prev/next clicked  	changeMonth: true, // True to change month/year via drop-down, false for navigation only  	yearRange: 'c-10:c+10', // Range of years to show in drop-down: 'any' for direct text entry  		// or 'start:end', where start/end are '+-nn' for relative to today  		// or 'c+-nn' for relative to the currently selected date  		// or 'nnnn' for an absolute year  	shortYearCutoff: '+10', // Cutoff for two-digit year in the current century  	showOtherMonths: false, // True to show dates from other months, false to not show them  	selectOtherMonths: false, // True to allow selection of dates from other months too  	defaultDate: null, // Date to show if no other selected  	selectDefaultDate: false, // True to pre-select the default date if no other is chosen  	minDate: null, // The minimum selectable date  	maxDate: null, // The maximum selectable date  	dateFormat: null, // Format for dates, defaults to calendar setting if null  	autoSize: false, // True to size the input field according to the date format  	rangeSelect: false, // Allows for selecting a date range on one date picker  	rangeSeparator: ' - ', // Text between two dates in a range  	multiSelect: 0, // Maximum number of selectable dates, zero for single select  	multiSeparator: ',', // Text between multiple dates  	onDate: null, // Callback as a date is added to the datepicker  	onShow: null, // Callback just before a datepicker is shown  	onChangeMonthYear: null, // Callback when a new month/year is selected  	onSelect: null, // Callback when a date is selected  	onClose: null, // Callback when a datepicker is closed  	altField: null, // Alternate field to update in synch with the datepicker  	altFormat: null, // Date format for alternate field, defaults to dateFormat  	constrainInput: true, // True to constrain typed input to dateFormat allowed characters  	commandsAsDateFormat: false, // True to apply formatDate to the command texts  	commands: this.commands, // Command actions that may be added to a layout by name    	// Localisation settings  	monthNames: ['January', 'February', 'March', 'April', 'May', 'June',  	'July', 'August', 'September', 'October', 'November', 'December'],  	monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],  	dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],  	dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],  	dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],  	dateFormat: 'mm/dd/yyyy', // See format options on parseDate  	firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...  	renderer: this.defaultRenderer, // The rendering templates  	prevText: '<Prev', // Text for the previous month command  	prevStatus: 'Show the previous month', // Status text for the previous month command  	prevJumpText: '<<', // Text for the previous year command  	prevJumpStatus: 'Show the previous year', // Status text for the previous year command  	nextText: 'Next>', // Text for the next month command  	nextStatus: 'Show the next month', // Status text for the next month command  	nextJumpText: '>>', // Text for the next year command  	nextJumpStatus: 'Show the next year', // Status text for the next year command  	currentText: 'Current', // Text for the current month command  	currentStatus: 'Show the current month', // Status text for the current month command  	todayText: 'Today', // Text for the today's month command  	todayStatus: 'Show today's month', // Status text for the today's month command  	clearText: 'Clear', // Text for the clear command  	clearStatus: 'Clear all the dates', // Status text for the clear command  	closeText: 'Close', // Text for the close command  	closeStatus: 'Close the datepicker', // Status text for the close command  	yearStatus: 'Change the year', // Status text for year selection  	monthStatus: 'Change the month', // Status text for month selection  	weekText: 'Wk', // Text for week of the year column header  	weekStatus: 'Week of the year', // Status text for week of the year column header  	dayStatus: 'Select DD, M d, yyyy', // Status text for selectable days  	defaultStatus: 'Select a date', // Status text shown by default  	isRTL: false // True if language is right-to-left  });    $.datepick.regionalOptions[] // Language/country-specific localisations    $.datepick.commands = { // Command actions that may be added to a layout by name  	// name: { // The command name, use '{button:name}' or '{link:name}' in layouts  	//		text: '', // The field in the regional settings for the displayed text  	//		status: '', // The field in the regional settings for the status text  	// // The keystroke to trigger the action  	//		keystroke: {keyCode: nn, ctrlKey: boolean, altKey: boolean},  	//		enabled: fn, // The function that indicates the command is enabled  	//		date: fn, // The function to get the date associated with this action  	//		action: fn} // The function that implements the action  	prev: {...}, // Previous month  	prevJump: {...}, // Previous year  	next: {...}, // Next month  	nextJump: {...}, // Next year  	current: {...}, // Currently selected month  	today: {...}, // Today's month  	clear: {...}, // Clear the datepicker  	close: {...}, // Close the datepicker  	prevWeek: {...}, // Previous week  	prevDay: {...}, // Previous day  	nextDay: {...}, // Next day  	nextWeek: {...} // Next week  }    $.datepick.defaultRenderer = { // The standard datepicker renderer  	picker: '...', // Overall structure  	monthRow: '...', // One row of months  	month: '...', // A single month  	weekHeader: '...', // A week header  	dayHeader: '...', // Individual day header  	week: '...', // One week of the month  	day: '...', // An individual day  	monthSelector: '...', // jQuery selector, relative to picker, for a single month  	daySelector: '...', // jQuery selector, relative to picker, for individual days  	rtlClass: '...', // Class for right-to-left (RTL) languages  	multiClass: '...', // Class for multi-month datepickers  	defaultClass: '...', // Class for selectable dates  	selectedClass: '...', // Class for currently selected dates  	highlightedClass: '...', // Class for highlighted dates  	todayClass: '...', // Class for today  	otherMonthClass: '...', // Class for days from other months  	weekendClass: '...', // Class for days on weekends  	commandClass: '...', // Class prefix for commands  	commandButtonClass: '...', // Extra class(es) for commands that are buttons  	commandLinkClass: '...', // Extra class(es) for commands that are links  	disabledClass: '...' // Class for disabled commands  }    $.datepick.setDefaults(settings) // Set global defaults  $.datepick.multipleEvents(fns) // Apply multiple callbacks to an event    $.datepick.formatDate(format, date, settings) // Format a date  $.datepick.parseDate(format, value, settings) // Parse a date from a string  // Calculate a date  $.datepick.determineDate(dateSpec, defaultDate, currentDate, dateFormat, settings)  $.datepick.daysInMonth(year, month)  $.datepick.dayOfYear(year, month, day)  $.datepick.iso8601Week(year, month, day) // ISO 8601 week of year  $.datepick.today()  $.datepick.newDate(year, month, day)  $.datepick.year(date, year) // Set year for a date  $.datepick.month(date, month) // Set month for a date  $.datepick.day(date, day) // Set day for a date  $.datepick.add(date, amount, period) // Add periods to a date    $(selector).datepick('option', settings) // Update multiple settings  $(selector).datepick('option', name, value) // Update a single setting  $(selector).datepick('option', name) // Retrieve a current setting  $(selector).datepick('destroy') // Remove datepicker functionality  $(selector).datepick('enable') // Enable datepicker and field  $(selector).datepick('disable') // Disable datepicker and field  $(selector).datepick('isDisabled') // Determine if a datepicker is disabled  $(selector).datepick('show') // Display a popup datepicker  $(selector).datepick('hide') // Close a popup datepicker  $(selector).datepick('clear') // Close a popup datepicker and clear its field  $(selector).datepick('getDate') // Retrieve the selected dates  $(selector).datepick('setDate', dates, endDate) // Set the selected dates  $(selector).datepick('retrieveDate', elem) // Retrieve the date for a selected datepicker element  $(selector).datepick('performAction', action) // Execute a named command  $(selector).datepick('changeMonth', offset) // Move a number of months  $(selector).datepick('showMonth', year, month) // Show a specific month and year  $(selector).datepick('changeDay', offset) // Move a number of days  $(selector).datepick('selectDate', elem) // Select the date for a datepicker element    // And in the extension module    $.datepick.weekOfYearRenderer // Renderer showing week of the year  $.datepick.themeRollerRenderer // Renderer using ThemeRoller styling  $.datepick.themeRollerWeekOfYearRenderer // Renderer combining the above two    $.datepick.noWeekends // onDate callback to not allow weekend dates  $.datepick.changeFirstDay // onShow callback to allow changing the first day of the week  $.datepick.hoverCallback(onHover) // onShow callback to follow date hovers  $.datepick.highlightWeek // onShow callback to highlight a hovered week  $.datepick.showStatus // onShow callback to show a status bar  $.datepick.monthNavigation // onShow callback to navigate to other months/years  $.datepick.selectWeek // onShow callback to select an entire week  $.datepick.selectMonth // onShow callback to select an entire month  

keith-wood.name

Сразу оговорюсь, цикл этих статей не рассчитан на матерых профи, она является всего лишь толчком к развитию, этаким небольшим экскурсом по возможностям для новичков, для тех кто не имеет понятия о UI и jQuery в целом.
Ну, поехали!

Скачиваем: http://jqueryui.com/download
Подключаем шаманский фреймворк, локализацию для календаря и таблицу стилей:

<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" />  <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>  <script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>  <script src="js/i18n/jquery-ui-i18n.js" type="text/javascript"></script>  

Итак, приготовления закончены.

Чтобы создать календарь нужна всего лишь одна строка html:

<input id="datepicker" type="text" />

Либо если Вы хотите встроить календарь в сайт как элемент страницы:

<div id="datepicker"></div>

И пара строк js:

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

И так мы получили вполне работающий календарь на русском, но вдруг мы делаем сайт на английском или украинском? Чтобы изменить ситуацию в нашу пользу надо всего лишь изменить один параметр, причем делать это можно динамически:

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

Стандартного функционала «по умолчанию» не всегда хватает на выполнение тех или иных задач. Поэтому чуть-чуть подредактируем настройки:

$("#datepicker").datepicker({   minDate: "-30",			//Минимальная дата которую можно выбрать, т.е. -30 дней от "сейчас"   maxDate: "+1m +1w +3d" //Максимальная дата которую можно выбрать, т.е. + 1 месяц, 1 неделя, и 3 дня от "сейчас"  });  

события

$.datepicker.setDefaults($.extend(   $.datepicker.regional["ru"])  );  $("#datepicker").datepicker({   beforeShow: function(input) {   $(input).css("background-color","#ff9");   },   onSelect: function(dateText, inst) {   $(this).css("background-color","");   alert("Выбрано: " + dateText +   "nnid: " + inst.id +   "nselectedDay: " + inst.selectedDay +   "nselectedMonth: " + inst.selectedMonth +   "nselectedYear: " + inst.selectedYear);   },   onClose: function(dateText, inst) {   $(this).css("background-color","");   }  });  

В листинге выше у нас получилось целых три опции, в которых есть коллбэки.
beforeShow — это та функция, которая будет вызвана перед отображением календаря.
С помощью css-опций она установит инпуту желтый фон.
В onSelect определена функция, которая будет вызвана при выборе какой либо даты, она выведет выбранную дату в alert и передаст пустое значение css-опции, что вернет инпуту прежний вид.
onClose функция которая сработает при закрытии календаря — т.е.вернет инпуту белый фон.

методы

<a id="datepicker_open">Открыть в окне</a>
$.datepicker.setDefaults({changeYear: true}, $.extend($.datepicker.regional["ru"]));  $("#datepicker_open").click(function(){   $("#datepicker").datepicker(   "dialog",   "23.04.2009",   function(){   alert("Событие onSelect");   },   { showButtonPanel: true }   );  });  В приведенном примере я демонстрирую работу метода dialog. Мы вызываем этот метод при щелчке на ссылке. Первый аргумент – это название метода, второй аргумент textDate – дата на которой по умолчанию будет открываться календарь. В аргументе onSelect можно передать callback-функцию, которая будет вызвана при выборе конкретной даты в календаре. В аргументе settings можно передать объект с новыми настройками виджета, которые будут применены к календарю, который будет открыт в диалоговом окне.

Ну вот вроде бы и все… Пользуйтесь! А далее приведен список всех опций, методов и событий.

  • altField — jQuery селектор для другого поля, которое должно быть обновлено, как только будет выбрана дата в Datepicker. Формат даты в этом дополнительном поле устанавливается с помощью опции altFormat.
  • altFormat — формат даты, который будет использоваться для опции altField. Эти настройки позволяют показывать пользователю один формат даты, тогда как для вычислений может использоваться другой формат. Полный список возможных форматов можно найти на http://api.jqueryui.com/datepicker/
  • appendText — текст, который будет отображаться после каждого поля выбора даты. Можно использовать, например для того, чтобы пометить поле как обязательное для заполнения.
  • buttonImage — адрес картинки, которая будет отображаться на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’. Если был определен текст в опции buttonText, он становится значением атрибута alt картинки.
  • buttonImageOnly — если для этой опции установить значение true, то картинка, адрес которой определен в опции buttonImage, будет отображаться не на кнопке, а сама по себе.
  • buttonText — текст, отображающийся на кнопке, с помощью которой можно вызывать календарь. Используется совместно с опцией showOn, когда та принимает значения ‘button’ или ‘both’.
  • changeMonth — если в этой опции передать значение true, будет возможно выбирать месяц из выпадающего списка.
  • changeYear — если в этой опции передать значение true, будет возможно выбирать год из выпадающего списка.
  • closeText — эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опции closeText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • constrainInput — по умолчанию опция имеет значение true и принуждает строго соблюдать формат даты, определенный в опциях виджета, в текстовом поле ввода. Чтобы иметь возможность не соблюдать этот формат, следует установить опцию в false.
  • currentText — эта опция используется совместно с showButtonPanel, если последняя имеет значение true. Значение опция currentText определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • dateFormat — определяет формат даты. Значение опции dateFormat определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Полный список возможных форматов можно найти на
    http://docs.jquery.com/UI/Datepicker/formatDate
  • dayNames — массив, содержащий полные названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • dayNamesMin — массив, содержащий 2-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • dayNamesShort — массив, содержащий 3-хбуквенную аббревиатуру названия дней недели, начиная с воскресенья. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • defaultDate — устанавливает дату, которая будет подсвечена при первом открытии, если поле выбора даты пустое. Опция может быть определена через объект Date, либо как количество дней от текущего для (например +7 или -15), либо как строка значений, определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1m +7d’), и наконец как null для текущего дня.
  • duration — длительность эффекта анимации при открытии (закрытии) календаря. Может принимать значения в виде строки — ‘fast’, ‘normal’ (по умолчанию), ‘slow’ или в виде числа в миллисекундах. Если передать пустую строку, календарь будет открываться и закрываться без эффекта анимации.
  • firstDay — опция устанавливает первый день недели: воскресенье – 0, понедельник – 1,… Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • gotoCurrent — если установить значение опции в true, то кнопка «Сегодня» (доступная при showButtonPanel: true) будет указывать на выбранную дату взамен текущей.
  • hideIfNoPrevNext — если Вы ограничиваете диапазон доступных дат с помощью опций minDate и maxDate, то при достижении края диапазона, стрелки «Назад» и «Вперед» становятся неактивными. Но их можно и совсем скрывать, передав в опции hideIfNoPrevNext значение true.
  • isRTL — для этой опции необходимо установить значение true, если используется язык с написанием справа налево. Определяется в файле локализации, если он используется.
  • maxDate — устанавливает максимальную возможную для выбора дату через объект Date или как число дней от текущего (например +7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘+1y +1m’), или null для отсутствия ограничения.
  • minDate — устанавливает минимальную возможную для выбора дату через объект Date или как число дней от текущего (например -7) или как строку значений определяющих период (‘y’ для лет, ‘m’ для месяцев, ‘w’ для недель, ‘d’ для дней, например ‘-1y -1m’), или null для отсутствия ограничения.
  • monthNames — массив, содержащий полные названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • monthNamesShort — массив, содержащий 3-хбуквенную аббревиатуру названия месяцев. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его.
  • navigationAsDateFormat — по умолчанию опция имеет значение false. Если установить значение true, функция dateFormat будет примерена к значениям опций nextText, prevText и currentText с тем, чтобы отображать при навигации, например предыдущее и следующее названия месяцев.
  • nextText — текст, который отображается в качестве ссылки на следующий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.
  • numberOfMonths — эта опция определяет, сколько месяцев сразу нужно показать. Значение опции может быть просто числом или массивом, состоящим из двух элементов, которые определяют соответственно количество строк и столбцов. Например, значение [2, 3] отобразит календарь в две строки по три месяца.
  • prevText — текст, который отображается в качестве ссылки на предыдущий месяц. Определяется в файле локализации, если он используется, но это значение можно переопределить, явно указав его. Если используется файл стилей ThemeRoller’а, это значение заменяется иконкой.
  • shortYearCutoff — значение по умолчанию +10. Эта опция используется только при условии использования в dateFormat двузначной записи года и выполняет роль компенсатора для определения века. Если значение передано в виде числа, используется как есть. Если значение передано в виде строки, конвертируется в число и добавляется к текущему значению года. После того как значение определено, все данные, выступающие в качестве значения года, и меньшие и равные ему считаются годами текущего века. Значения большие – считаются годами предыдущего века.
  • showAnim — определяет тип анимации при открывании календаря. По умолчанию имеет значение show (при закрывании будет использован hide). Без подключения дополнительных файлов могут быть использованы эффекты ‘slideDown’ и ‘fadeIn’ (при закрывании соответственно будут использоваться эффекты ‘slideUp’ и ‘fadeOut’). Так же возможно использование любых эффектов jQuery UI Effects при условии их дополнительного подключения.
  • showButtonPanel — установка значения true для этой опции приведет к тому, что будет показана панель с двумя кнопками – переход к сегодняшней дате и закрытие календаря.
  • showCurrentAsPos — когда используется отображение сразу нескольких месяцев, число, переданное в этой опции, определяет позицию текущего месяца. По умолчанию используется значение 0, и текущий месяц отображается в верхнем левом углу.
  • showMonthAfterYear — по умолчанию используется значение false и в заголовке название месяца идет перед годом. При использовании значения true название месяца будет следовать за годом.
  • showOn — по умолчанию эта опция имеет значение ‘focus’, что заставляет календарь открываться при щелчке в поле ввода. Другие возможные значения — ‘button’ и ‘both’. Рядом с полем ввода появится кнопка. В первом случае календарь будет открываться по щелчку на кнопке, а во втором случае как по щелчку на кнопке, таки при получении фокуса полем ввода.
  • showOptions — если Вы используете один из эффектов jQuery UI Effects, с помощью этой опции ему можно передать дополнительные настройки. Например: showOptions: {direction: ‘up’}.
  • showOtherMonths — по умолчанию имеет значение false. Если использовать true, на календаре будут отображаться дни предыдущего и/или следующего месяца без возможности их выбора.
  • stepMonths — определяет насколько месяцев сдвигать календарь при щелчке по ссылкам Следующий и Предыдущий. По умолчанию – 1.
  • yearRange — управление диапазоном лет, отображаемых в выпадающем списке (при использовании опции changeYear).
  • beforeShow — здесь можно определить функцию, которая будет вызываться перед открытием календаря. Функция принимает в качестве аргумента объект, характеризующий текстовое поле ввода с которым работает виджет.
  • beforeShowDay — в этой опции можно определить пользовательскую функцию, которая будет принимать в качестве аргумента выбранную дату. Функция должна возвратить массив, где элемент с индексом [0] – true или false показывает, возможен или нет выбор этой даты. Элемент с индексом [1] содержит имя класса (классов) для отображения даты. Элемент с индексом [2] (опционально) – текст всплывающей подсказки для даты. Функция будет вызываться для каждой даты в календаре в момент наведения указателя мыши.
  • onChangeMonthYear — здесь можно определить функцию, которая будет вызываться при смене месяца или года в календаре. Функция принимает три аргумента. Первые два аргумента – это новые значения года и месяца, третий аргумент – объект datepicker.
  • onClose — в этой опции определяется функция, которая будет вызвана, когда календарь был закрыт без выбора какой-либо даты.
  • onSelect — в этой опции определяется функция, которая будет вызвана, когда в календаре выбрана какая-либо дата.
  • destroy — .datepicker(‘destroy’) полностью удаляет всю функциональность виджета Datepicker. Возвращает элементы в состояние, предшествующее инициализации.
  • disable — .datepicker(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.
  • enable — .datepicker(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.
  • option — .datepicker(‘option’, optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.
  • dialog — .datepicker(‘dialog’, dateText, [onSelect], [settings], [pos]) открывает виджет Datepicker в режиме диалогового окна. В аргументе dateText передается дата, на которой должен быть открыт календарь. Остальные аргументы необязательные. В аргументе onSelect можно передать функцию, которая будет вызвана в момент выбора даты в календаре, в аргументе settings можно передать объект с новыми настройками виджета, в аргументе pos – координаты, в которых будет открыто диалоговое окно. Здесь можно использовать события мыши, чтобы определить координаты.
  • isDisabled — .datepicker(‘isDisabled’) метод возвращает значение true, если к виджету был применен метод disable и false в противном случае.
  • hide — .datepicker(‘hide’, [speed]) скрывает ранее открытый календарь.
  • show — .datepicker(‘show’) открывает календарь.
  • getDate — .datepicker(‘getDate’) метод возвращает дату, выбранную в календаре.
  • setDate — .datepicker(‘setDate’, date) метод позволяет установить дату в календаре. Значением аргумента date может быть строка (например: 25.10.1917)

easywebscripts.net


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.