diff --git a/docs/index.html b/docs/index.html index 6899e22..4c8d7be 100644 --- a/docs/index.html +++ b/docs/index.html @@ -9,12 +9,13 @@ $promo.datepicker({ </head> </html>

Datepicker will automatically initialize on elements with class.datepicker-here, options may be sent viadataattributes.

<input type='text' class="datepicker-here" data-position="right top" />

Manual initialization

// Initialization
 $('#my-element').datepicker([options])
-// Access to an instance of an object
-$('#my-element').data('datepicker')

Examples

Initialization with default options

Example
<input type='text' class='datepicker-here', data-language='en' />

Selecting multiple dates

Pass the parameter{multipleDates: true}for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number{multipleDates: 3}.

Example
<input type="text"
+// Access instance of plugin
+$('#my-element').data('datepicker')

Examples

Initialization with default options

Example
<input type='text' class='datepicker-here', data-language='en' />

Selecting multiple dates

Pass parameter{multipleDates: true}for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number{multipleDates: 3}.

Example
<input type="text"
 	   class="datepicker-here"
+	   data-language='en'
 	   data-multiple-dates="3"
 	   data-multiple-dates-separator=", "
-	   data-position='right top'/>

Permanently visible calendar

Initialize the plugin on non text input element, such as<div> … </div>,or pass the parameter{inline: true}.

Example
<div class="datepicker-here" data-language='en'></div>

Month selection

Example
<input type="text"
+	   data-position='top left'/>

Permanently visible calendar

Initialize plugin on non text input element, such as<div> … </div>,or pass the parameter{inline: true}.

Example
<div class="datepicker-here" data-language='en'></div>

Month selection

Example
<input type="text"
 	   class="datepicker-here"
 	   data-language='en'
 	   data-min-view="months"
@@ -77,11 +78,11 @@ $('.my-datepicker').datepicker({
 	dateFormat: 'mm/dd/yy',
 	firstDay: 0
 };

Available localizations located indist/js/i18ndirectory.

Options

inline

Typeboolean

Defaultsfalse

If true, then datepicker will be always visible.

language

Typestring|object

Defaults"ru"

Datepicker's language. If string is passed, then language will be searched inDatepicker.languageobject. -If object is passed, then data will be taken from this object directly.

If some fields are missing, they will be taken from default localization object ('Russian').

startDate

TypeDate

Defaultsnew Date()

Which date must be shown at first initialization.

firstDay

Typenumber

Defaults""

Day index from which week will be started. Possible values are from 0 to 6, where 0 - sunday и 6 - saturday. -By default value is taken from current localization, but if it passed here, then it will have higher priority.

weekends

Typearray

Defaults[6, 0]

Array of day's indexes, which must be considered as holidays. Class.-weekend-will be added to relevant cells. -. By default its saturday and sunday.

dateFormat

Typestring

Defaults""

Format of date, it's combination of d, m, yyyy, D, M, и т.д. By default value is taken from current localization, but if it passed here, then it will have higher priority.

toggleSelected

Typeboolean

Defaultstrue

If true, then clicking on selected cell will remove selection.

position

Typestring

Defaults"bottom left"

Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis. +If object is passed, then data will be taken from this object directly.

If some fields are missing, they will be taken from default localization object ('Russian').

startDate

TypeDate

Defaultsnew Date()

This date will be shown at first initialization.

firstDay

Typenumber

Defaults""

Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 6 - Saturday. +By default value is taken from current localization, but if it passed here then it will have higher priority.

weekends

Typearray

Defaults[6, 0]

Array of day's indexes which will be considered as weekends. Class.-weekend-will be added to relevant cells. +. By default its Saturday and Sunday.

dateFormat

Typestring

Defaults""

Desirable date format. It's combination of d, m, yyyy, D, M, etc. By default value is taken from current localization, but if it passed here, then it will have higher priority.

toggleSelected

Typeboolean

Defaultstrue

If true, then clicking on selected cell will remove selection.

position

Typestring

Defaults"bottom left"

Position of datepicker relative to text input. First value is name of main axis, and second is position on that axis. For example{position: "right top"}- will set datepicker's position from right side on top of text input.

offset

Typenumber

Defaults12

Offset from the main positioning axes.

view

Typestring

Defaults"days"

Start datepicker view. Possible values are:

minView

Typestring

Defaults"days"

Minimal datepicker's view, on that view selecting cells will not trigger rendering next view, instead it will activate it. -Possible values are the same as inview.

showOtherMonths

Typeboolean

Defaultstrue

If true, then days from other months will be visible.

selectOtherMonths

Typeboolean

Defaultstrue

If true, then one can select days form other months.

moveToOtherMonthsOnSelect

Typeboolean

Defaultstrue

If true, then selecting days from other month, will cause transition to that month.

showOtherYears

Typeboolean

Defaultstrue

If true, then years from other decades will be visible.

selectOtherYears

Typeboolean

Defaultstrue

If true, then on can select years from other decades

moveToOtherYearsOnSelect

Typeboolean

Defaultstrue

If true, then selecting year from other decade, will cause transition to that decade.

minDate

TypeDate

Defaults""

The minimum date for selection. All dates, running before it can't be activated.

maxDate

TypeDate

Defaults""

The maximum date for selection. All dates which comes after it cannot be selected.

disableNavWhenOutOfRange

Typeboolean

Defaultstrue

If true, then at the date, which would be less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated.

multipleDates

Typeboolean|number

Defaultsfalse

If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.

multipleDatesSeparator

Typestring

Defaults","

Dates separator, which will be used when concatenating dates to string.

todayButton

Typeboolean

Defaultsfalse

If true, then button "Today" will be visible.

clearButton

Typeboolean

Defaultsfalse

If true, then button "Clear" will be visible.

showEvent

Typestring

Defaults"focus"

Event type, on which datepicker must be shown.

autoClose

Typeboolean

Defaultsfalse

If true, when after date selection, datepicker will be closed.

prevHtml

Typestring

Defaults<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>

Contents of 'next' button.

nextHtml

Typestring

Defaults<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>

Contents of 'prev' button.

navTitles

Typeobject

Defaults

navTitles = {
+Possible values are the same as inview.

showOtherMonths

Typeboolean

Defaultstrue

If true, then days from other months will be visible.

selectOtherMonths

Typeboolean

Defaultstrue

If true, then one can select days form other months.

moveToOtherMonthsOnSelect

Typeboolean

Defaultstrue

If true, then selecting days from other month, will cause transition to that month.

showOtherYears

Typeboolean

Defaultstrue

If true, then years from other decades will be visible.

selectOtherYears

Typeboolean

Defaultstrue

If true, then on can select years from other decades

moveToOtherYearsOnSelect

Typeboolean

Defaultstrue

If true, then selecting year from other decade, will cause transition to that decade.

minDate

TypeDate

Defaults""

The minimum date for selection. All dates, running before it can't be activated.

maxDate

TypeDate

Defaults""

The maximum date for selection. All dates which comes after it cannot be selected.

disableNavWhenOutOfRange

Typeboolean

Defaultstrue

If true, then at the date, which would be less than minimum possible or more then maximum possible, navigation buttons ('forward', 'back') will be deactivated.

multipleDates

Typeboolean|number

Defaultsfalse

If true, then one can select unlimited dates. If number is passed, then amount of selected dates will be limited by it.

multipleDatesSeparator

Typestring

Defaults","

Dates separator, which will be used when concatenating dates to string.

todayButton

Typeboolean

Defaultsfalse

If true, then button "Today" will be visible.

clearButton

Typeboolean

Defaultsfalse

If true, then button "Clear" will be visible.

showEvent

Typestring

Defaults"focus"

Event type, on which datepicker should be shown.

autoClose

Typeboolean

Defaultsfalse

If true, when after date selection, datepicker will be closed.

prevHtml

Typestring

Defaults<svg><path d="M 17,12 l -5,5 l 5,5"></path></svg>

Contents of 'next' button.

nextHtml

Typestring

Defaults<svg><path d="M 14,12 l 5,5 l -5,5"></path></svg>

Contents of 'prev' button.

navTitles

Typeobject

Defaults

navTitles = {
 	  days: 'MM, <i>yyyy</i>',
 	  months: 'yyyy',
 	  years: 'yyyy1 - yyyy2'
@@ -89,7 +90,7 @@ Possible values are the same as inview
 	   navTitles: {
 		   days: '<h3>Check in date:</h3> MM, yyyy'
 	   }
-   })

monthsField

Typestring

Defaults"monthsShort"

Which field from localization object must be used as months names, when view is 'months'.

Events

onSelect(formattedDate, date, inst)

Typefunction

Defaultsnull

Callback when selecting date

monthsField

Typestring

Defaults"monthsShort"

Field name from localization object which should be used as months names, when view is 'months'.

Events

onSelect(formattedDate, date, inst)

Typefunction

Defaultsnull

Callback when selecting date

onChangeMonth(month, year)

Typefunction

Defaultsnull

Callback when months are changed.

onChangeYear(year)

Typefunction

Defaultsnull

Callback when year is changed

onChangeDecade(decade)

Typefunction

Defaultsnull

Callback when decade is changed

onChangeView(view)

Typefunction

Defaultsnull

Callback when datepicker's view is changed

onRenderCell(date, cellType)

Typefunction

Defaultsnull

Callback when datepicker's cell is rendered.

The callback must return object which may consists of three fields:

{
 	html: '', // Custom cell content
 	classes: '', // Extra css classes to cell
@@ -107,7 +108,7 @@ if{multipleDates: true}

API

Plugin instance is accessible throughdataattribute.

var myDatepicker = $('#my-elem').datepicker().data('datepicker');
 myDatepicker.show();

show()

Shows datepicker.

hide()

Hides datepicker.

next()

Renders next month, year or decade, depending on current view.

prev()

Renders previous month, year or decade, depending on current view.

selectDate(date)

Activates passed date. If{multipleDates: false}and date is already active, then it will be deactivated. If{multipleDates: true}then another active date will be added.

removeDate(date)

Removes selection from passed date.

clear()

Clears all selected dates.

update(field[, value])

This method updates datepicker's options. After calling this method, datepicker will be redrawn. -You can update several parameters at one time, just pass on object with necessary fields.

var datepicker = $('#my-elem').datepicker().data('datepicker');
+You can update several parameters at one time, just pass in object with necessary fields.
var datepicker = $('#my-elem').datepicker().data('datepicker');
 // Single parameter update
 datepicker.update('minDate', new Date())
 // Multiple parameters
diff --git a/docs/jade/pages/index.jade b/docs/jade/pages/index.jade
index 0603525..7ee261e 100644
--- a/docs/jade/pages/index.jade
+++ b/docs/jade/pages/index.jade
@@ -54,7 +54,7 @@ block content
 		+example-code('js').
 			// Initialization
 			$('#my-element').datepicker([options])
-			// Access to an instance of an object
+			// Access instance of plugin
 			$('#my-element').data('datepicker')
 	article
 		h2#examples Examples
@@ -67,24 +67,25 @@ block content
 					
 		h3 Selecting multiple dates
 		p
-			| Pass the parameter
+			| Pass parameter
 			+example-inline('{multipleDates: true}','js')
 			| for selection of multiple dates. If you want to limit the number of selected dates, pass the desired number
 			+example-inline('{multipleDates: 3}','js')
 			| .
 		+example
 			+example-content
-				input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left').datepicker-here
+				input(type='text' data-multiple-dates='3' data-multiple-dates-separator=', ', data-position='top left', data-language='en').datepicker-here
 			+example-code('html')
 				:code
 					
+						   data-position='top left'/>
 		h3 Permanently visible calendar
 		p
-			| Initialize the plugin on non text input element, such as
+			| Initialize plugin on non text input element, such as
 			+example-inline('
 …  
', 'html')
 			| ,or pass the parameter
 			+example-inline('{inline: true}', 'js')
@@ -227,22 +228,22 @@ block content
 			p If some fields are missing, they will be taken from default localization object ('Russian').
 		.param
 			+param-header('startDate', 'Date', 'new Date()')
-			p Which date must be shown at first initialization.
+			p This date will be shown at first initialization.
 		.param
 			+param-header('firstDay', 'number', '""')
 			p.
-				Day index from which week will be started. Possible values are from 0 to 6, where 0 - sunday и 6 - saturday.
-				By default value is taken from current localization, but if it passed here, then it will have higher priority.
+				Day index from which week will be started. Possible values are from 0 to 6, where 0 - Sunday and 6 - Saturday.
+				By default value is taken from current localization, but if it passed here then it will have higher priority.
 		.param
 			+param-header('weekends', 'array', '[6, 0]')
 			p
-				| Array of day's indexes, which must be considered as holidays. Class
+				| Array of day's indexes which will be considered as weekends. Class
 				+example-inline('.-weekend-','css')
 				| will be added to relevant cells.
-				| . By default its saturday and sunday.
+				| . By default its Saturday and Sunday.
 		.param
 			+param-header('dateFormat', 'string', '""')
-			p Format of date, it's combination of d, m, yyyy, D, M, и т.д. By default value is taken from current localization, but if it passed here, then it will have higher priority.
+			p Desirable date format. It's combination of d, m, yyyy, D, M, etc. By default value is taken from current localization, but if it passed here, then it will have higher priority.
 			ul
 				li
 					+param('d')
@@ -354,7 +355,7 @@ block content
 			p If true, then button "Clear" will be visible.
 		.param
 			+param-header('showEvent','string','"focus"')
-			p Event type, on which datepicker must be shown.
+			p Event type, on which datepicker should be shown.
 		.param
 			+param-header('autoClose', 'boolean', 'false')
 			p If true, when after date selection, datepicker will be closed.
@@ -386,7 +387,7 @@ block content
 					   })
 		.param
 			+param-header('monthsField','string','"monthsShort"')
-			p Which field from localization object must be used as months names, when view is 'months'.
+			p Field name from localization object which should be used as months names, when view is 'months'.
 
 	article
 		h2#events Events
@@ -527,7 +528,7 @@ block content
 					| - new value.
 			p.
 				This method updates datepicker's options. After calling this method, datepicker will be redrawn.
-				You can update several parameters at one time, just pass on object with necessary fields.
+				You can update several parameters at one time, just pass in object with necessary fields.
 			+example-code('js').
 				var datepicker = $('#my-elem').datepicker().data('datepicker');
 				// Single parameter update