complete English docs

2026-01-14 11:01:22 +08:00 · 2016-03-24 11:33:39 +03:00 · 2016-03-24 11:33:39 +03:00 · c6b34f1864
commit c6b34f1864
parent c9b7cc4b7e
4 changed files with 114 additions and 39 deletions
--- a/docs/index-ru.html
+++ b/docs/index-ru.html
--- a/docs/index.html
+++ b/docs/index.html
@ -129,15 +129,15 @@ $picker.datepicker({
 var currentDate = currentDate = new Date();
 $picker.data('datepicker').selectDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 10))
 </code></pre></div></article><article><h2 id="timepicker">Timepicker</h2><p>To enable timepicker use option<span class="example-inline"><code class="js">{timepicker: true}</code></span>- it will add current time and a couple of range sliders by which one can pick time.</p><p>By default current user time will be set. This value can be changed by<span class="example-inline"><code class="js">startDate</code></span>parameter.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><div data-timepicker="true" data-language="en" class="datepicker-here"></div></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-language='en'&gt;&lt;/div&gt;</code></pre></div><p><i>More detailed info about timepicker parameters you can find in <a href='#opts-timepicker' class='nav-link'>Options</a>.</i></p><h3 id="timepicker-format">Time format</h3><p>Time format is defined in localization object or in<span class="example-inline"><code class="js">timeFormat</code></span>parameter. By default (in Russian language) 24 hours format is used. For enabling 12 hours mode you must add<span class="example-inline"><code class="js">aa</code></span>or<span class="example-inline"><code class="js">AA</code></span>symbol in<span class="example-inline"><code class="js">timeFormat</code></span>. After what 'AM' and 'PM' sings will appear in timepicker widget.</p><p>Lets use 12 hours mode in Russian language:</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" data-timepicker="true" data-time-format="hh:ii aa" class="datepicker-here"></div><pre class="example-code"><code>&lt;div class=&quot;datepicker-here&quot; data-timepicker=&quot;true&quot; data-time-format='hh:ii aa'&gt;&lt;/div&gt;
-</code></pre></div><h3 id="timeformat-actions">Действия со временем</h3><p>Для задания максимально/минимально возможных значений часов или минут используйте параметры<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. Также время можно указывать в парамтерах<span class="example-inline"><code class="js">minDate</code></span>и<span class="example-inline"><code class="js">maxDate</code></span></p><p>Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Зададим стартовую дату
+</code></pre></div><h3 id="timeformat-actions">Actions with time</h3><p>For setting max/min hours or minutes values use<span class="example-inline"><code class="js">maxHours</code></span>,<span class="example-inline"><code class="js">minHours</code></span>,<span class="example-inline"><code class="js">maxMinutes</code></span>,<span class="example-inline"><code class="js">minMinutes</code></span>. You also could set time in<span class="example-inline"><code class="js">minDate</code></span>and<span class="example-inline"><code class="js">maxDate</code></span>. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.</p><p>Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.</p><div class="example"><div class="example--label">Example</div><div class="example-content"><input type="text" id="timepicker-actions-exmpl"><script>// Create start date
 var start = new Date(),
-		startHours = 9;
+	startHours = 9;

-// 09:00
+// 09:00 AM
 start.setHours(9);
 start.setMinutes(0);

-// Если сегодня суббота или воскресенье - 10:00
+// If today is Saturday or Sunday set 10:00 AM
 if ([6, 0].indexOf(start.getDay()) != -1) {
 	start.setHours(10);
 	startHours = 10
@ -145,16 +145,17 @@ if ([6, 0].indexOf(start.getDay()) != -1) {

 $('#timepicker-actions-exmpl').datepicker({
 	timepicker: true,
+	language: 'en',
 	startDate: start,
 	minHours: startHours,
 	maxHours: 18,
 	onSelect: function (fd, d, picker) {
-		// Ничего не делаем если выделение было снято
+		// Do nothing if selection was cleared
 		if (!d) return;

 		var day = d.getDay();
-		// Если выбранный день суббота или воскресенье, то устанавливаем
-		// часы для выходных, в противном случае восстанавливаем начальные значения
+		// If chosen day is Saturday or Sunday when set
+		// hour value for weekends, else restore defaults
 		if (day == 6 || day == 0) {
 			picker.update({
 				minHours: 10,
@ -169,32 +170,33 @@ $('#timepicker-actions-exmpl').datepicker({
 	}
 })</script></div><pre class="example-code"><code>&lt;input type='text' id='timepicker-actions-exmpl' /&gt;
 &lt;script&gt;
-	// Зададим стартовую дату
+	// Create start date
 	var start = new Date(),
 		startHours = 9;

-	// 09:00
+	// 09:00 AM
 	start.setHours(9);
 	start.setMinutes(0);

-	// Если сегодня суббота или воскресенье - 10:00
-	if ([6,0].indexOf(start.getDay()) != -1) {
+	// If today is Saturday or Sunday set 10:00 AM
+	if ([6, 0].indexOf(start.getDay()) != -1) {
 		start.setHours(10);
 		startHours = 10
 	}

 	$('&#35;timepicker-actions-exmpl').datepicker({
 		timepicker: true,
+		language: 'en',
 		startDate: start,
 		minHours: startHours,
 		maxHours: 18,
-		onSelect: function(fd, d, picker) {
-			// Ничего не делаем если выделение было снято
+		onSelect: function (fd, d, picker) {
+			// Do nothing if selection was cleared
 			if (!d) return;

 			var day = d.getDay();
-			// Если выбранный день суббота или воскресенье, то устанавливаем
-			// часы для выходных, в противном случае восстанавливаем начальные значения
+			// If chosen day is Saturday or Sunday when set
+			// hour value for weekends, else restore defaults
 			if (day == 6 || day == 0) {
 				picker.update({
 					minHours: 10,
@ -244,7 +246,8 @@ Possible values are the same as in<span class="example-inline"><code>view</code>
 	   navTitles: {
 		   days: '&lt;h3&gt;Check in date:&lt;/h3&gt; MM, yyyy'
 	   }
-   })</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;monthsShort&quot;</code></span></p></header><p>Field name from localization object which should be used as months names, when view is 'months'.</p></div></article><article><h2 id="events">Events</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when selecting date</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- formatted date.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- JavaScript Date object
+   })</code></pre></div><div class="param"><header class="param-header"><h3>monthsField</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot;monthsShort&quot;</code></span></p></header><p>Field name from localization object which should be used as months names, when view is 'months'.</p></div><div class="param"><header class="param-header"><h3 id="opts-timepicker">timepicker</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">boolean</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">false</code></span></p></header><p>If<span class="example-inline"><code>true</code></span>, when timepicker widget will be added.</p></div><div class="param"><header class="param-header"><h3 id="opts-dateTimeSeparator">dateTimeSeparator</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">&quot; &quot;</code></span></p></header><p>Separator between date and time</p></div><div class="param"><header class="param-header"><h3 id="opts-timeFormat">timeFormat</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">string</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
+For using 12 hours mode, add "aa" or "AA" to your<span class="example-inline"><code class="js">timeFormat</code></span>parameter, e.g.<span class="example-inline"><code class="js">{timeFormat: &quot;hh:ii AA&quot;}</code></span>Possible values are:</p><ul><li><span class="param-inline"><strong>h</strong></span>- hours</li><li><span class="param-inline"><strong>hh</strong></span>- hours with leading zero</li><li><span class="param-inline"><strong>i</strong></span>- minutes</li><li><span class="param-inline"><strong>ii</strong></span>- minutes with leading zero</li><li><span class="param-inline"><strong>aa</strong></span>- day period - 'am' or 'pm'</li><li><span class="param-inline"><strong>AA</strong></span>- day period capitalized</li></ul></div><div class="param"><header class="param-header"><h3 id="opts-minHours">minHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxHours">maxHours</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">23</code></span></p></header><p>Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-minMinutes">minMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">0</code></span></p></header><p>Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-maxMinutes">maxMinutes</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">59</code></span></p></header><p>Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.</p></div><div class="param"><header class="param-header"><h3 id="opts-hoursStep">hoursStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Hours step in slider.</p></div><div class="param"><header class="param-header"><h3 id="opts-minutesStep">minutesStep</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">number</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">1</code></span></p></header><p>Minutes step in slider.</p></div></article><article><h2 id="events">Events</h2><div class="param"><header class="param-header"><h3>onSelect(formattedDate, date, inst)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when selecting date</p><ul><li><span class="param-inline"><strong>formattedDate</strong><i>string</i></span>- formatted date.</li><li><span class="param-inline"><strong>date</strong><i>Date|array</i></span>- JavaScript Date object
 if<span class="example-inline"><code class="js">{multipleDates: true}</code></span>, then it will be an array of js dates.</li><li><span class="param-inline"><strong>inst</strong><i>object</i></span>- plugin instance.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeMonth(month, year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when months are changed.</p><ul><li><span class="param-inline"><strong>month</strong><i>number</i></span>- month number (from 0 to 12), to which transition is done.</li><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeYear(year)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when year is changed</p><ul><li><span class="param-inline"><strong>year</strong><i>number</i></span>- year, to which transition is done.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeDecade(decade)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when decade is changed</p><ul><li><span class="param-inline"><strong>decade</strong><i>array</i></span>- array which consists of two years: first year in decade and last year in decade.</li></ul></div><div class="param"><header class="param-header"><h3>onChangeView(view)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's view is changed</p><ul><li><span class="param-inline"><strong>view</strong><i>string</i></span>- view name, to which transition is done (days, months, years).</li></ul></div><div class="param"><header class="param-header"><h3>onRenderCell(date, cellType)</h3><p class="param-header--row"><span class="param-header--label">Type</span><span class="example-inline"><code class="js">function</code></span></p><p class="param-header--row"><span class="param-header--label">Defaults</span><span class="example-inline"><code class="js">null</code></span></p></header><p>Callback when datepicker's cell is rendered.</p><ul><li><span class="param-inline"><strong>date</strong><i>Date</i></span>- current cell date</li><li><span class="param-inline"><strong>cellType</strong><i>string</i></span>- current cell type (day, month, year).</li></ul><p>The callback must return object which may consists of three fields:</p><pre class="example-code"><code class="js">{
 	html: '', // Custom cell content
 	classes: '', // Extra css classes to cell
--- a/docs/jade/pages/index-ru.jade
+++ b/docs/jade/pages/index-ru.jade
@ -725,11 +725,16 @@ block content

 		.param
 			+param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
-			p Разделитель между датой и временем
+			p Разделитель между датой и временем.

 		.param
 			+param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
-			p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет. Возможные варианты:
+			p Формат времени. По умолчанию берется из локализации. Если передать значение сюда, то оно будет иметь больший приоритет.
+				| Для включения 12-ти часового режима добавьте 'aa' или 'AA' в параметр
+				+example-inline('timeFormat','js')
+				|, например
+				+example-inline('{timeFormat: "hh:ii AA"}','js')
+				| Возможные варианты:
 			ul
 				li
 					+param('h')
--- a/docs/jade/pages/index.jade
+++ b/docs/jade/pages/index.jade
@ -309,8 +309,8 @@ block content
 				:code
 					<div class="datepicker-here" data-timepicker="true" data-time-format='hh:ii aa'></div>

-		h3#timeformat-actions Действия со временем
-		p Для задания максимально/минимально возможных значений часов или минут используйте параметры
+		h3#timeformat-actions Actions with time
+		p For setting max/min hours or minutes values use
 			+example-inline('maxHours','js')
 			| ,
 			+example-inline('minHours','js')
@ -318,25 +318,26 @@ block content
 			+example-inline('maxMinutes','js')
 			| ,
 			+example-inline('minMinutes','js')
-			| . Также время можно указывать в парамтерах
+			| . You also could set time in
 			+example-inline('minDate','js')
-			| и
+			| and
 			+example-inline('maxDate','js')
-		p Давайте создадим календарь, где пользователь может выбрать время с 09:00 до 18:00, а в субботу и воскресенье с 10:00 до 16:00.
+			|. For setting hours you must use values between 0 and 23, event if 12 hours mode is on. Plugin will automatically transform given values to 12 hours format.
+		p Lets create calendar where user can choose time between 09:00 am and 06:00 pm on working days and on Saturday and Sunday between from 10:00 am to 04:00 pm.

 		+example
 			+example-content
 				input(type='text')#timepicker-actions-exmpl
 				script.
-					// Зададим стартовую дату
+					// Create start date
 					var start = new Date(),
-							startHours = 9;
+						startHours = 9;

-					// 09:00
+					// 09:00 AM
 					start.setHours(9);
 					start.setMinutes(0);

-					// Если сегодня суббота или воскресенье - 10:00
+					// If today is Saturday or Sunday set 10:00 AM
 					if ([6, 0].indexOf(start.getDay()) != -1) {
 						start.setHours(10);
 						startHours = 10
@ -344,16 +345,17 @@ block content

 					$('#timepicker-actions-exmpl').datepicker({
 						timepicker: true,
+						language: 'en',
 						startDate: start,
 						minHours: startHours,
 						maxHours: 18,
 						onSelect: function (fd, d, picker) {
-							// Ничего не делаем если выделение было снято
+							// Do nothing if selection was cleared
 							if (!d) return;

 							var day = d.getDay();
-							// Если выбранный день суббота или воскресенье, то устанавливаем
-							// часы для выходных, в противном случае восстанавливаем начальные значения
+							// If chosen day is Saturday or Sunday when set
+							// hour value for weekends, else restore defaults
 							if (day == 6 || day == 0) {
 								picker.update({
 									minHours: 10,
@ -371,32 +373,33 @@ block content
 				:code
 					<input type='text' id='timepicker-actions-exmpl' />
 					<script>
-						// Зададим стартовую дату
+						// Create start date
 						var start = new Date(),
 							startHours = 9;

-						// 09:00
+						// 09:00 AM
 						start.setHours(9);
 						start.setMinutes(0);

-						// Если сегодня суббота или воскресенье - 10:00
-						if ([6,0].indexOf(start.getDay()) != -1) {
+						// If today is Saturday or Sunday set 10:00 AM
+						if ([6, 0].indexOf(start.getDay()) != -1) {
 							start.setHours(10);
 							startHours = 10
 						}

 						$('#timepicker-actions-exmpl').datepicker({
 							timepicker: true,
+							language: 'en',
 							startDate: start,
 							minHours: startHours,
 							maxHours: 18,
-							onSelect: function(fd, d, picker) {
-								// Ничего не делаем если выделение было снято
+							onSelect: function (fd, d, picker) {
+								// Do nothing if selection was cleared
 								if (!d) return;

 								var day = d.getDay();
-								// Если выбранный день суббота или воскресенье, то устанавливаем
-								// часы для выходных, в противном случае восстанавливаем начальные значения
+								// If chosen day is Saturday or Sunday when set
+								// hour value for weekends, else restore defaults
 								if (day == 6 || day == 0) {
 									picker.update({
 										minHours: 10,
@ -683,6 +686,69 @@ block content
 			+param-header('monthsField','string','"monthsShort"')
 			p Field name from localization object which should be used as months names, when view is 'months'.

+		.param
+			+param-header('timepicker', 'boolean', 'false', 'opts-timepicker')
+			p If
+				+example-inline('true')
+				| , when timepicker widget will be added.
+
+		.param
+			+param-header('dateTimeSeparator', 'string', '" "', 'opts-dateTimeSeparator')
+			p Separator between date and time
+
+		.param
+			+param-header('timeFormat', 'string', 'null', 'opts-timeFormat')
+			p
+				| Desirable time format. Taken from localization by default. If value passed here, then it will be used instead.
+				| For using 12 hours mode, add "aa" or "AA" to your
+				+example-inline('timeFormat','js')
+				| parameter, e.g.
+				+example-inline('{timeFormat: "hh:ii AA"}','js')
+				| Possible values are:
+			ul
+				li
+					+param('h')
+					| - hours
+				li
+					+param('hh')
+					| - hours with leading zero
+				li
+					+param('i')
+					| - minutes
+				li
+					+param('ii')
+					| - minutes with leading zero
+				li
+					+param('aa')
+					| - day period - 'am' or 'pm'
+				li
+					+param('AA')
+					| - day period capitalized
+
+		.param
+			+param-header('minHours', 'number', '0', 'opts-minHours')
+			p Minimal hours value, must be between 0 and 23. You will not be able to choose value lower than this.
+
+		.param
+			+param-header('maxHours', 'number', '23', 'opts-maxHours')
+			p Maximum hours value, must be between 0 and 23. You will not be able to choose value higher than this.
+
+		.param
+			+param-header('minMinutes', 'number', '0', 'opts-minMinutes')
+			p Minimal minutes value, must be between 0 and 59. You will not be able to choose value lower than this.
+
+		.param
+			+param-header('maxMinutes', 'number', '59', 'opts-maxMinutes')
+			p Maximum minutes value, must be between 0 and 59. You will not be able to choose value higher than this.
+
+		.param
+			+param-header('hoursStep', 'number', '1', 'opts-hoursStep')
+			p Hours step in slider.
+
+		.param
+			+param-header('minutesStep', 'number', '1', 'opts-minutesStep')
+			p Minutes step in slider.
+
 	article
 		h2#events Events
 		.param