library-mirrors/datetimepicker
1
0
Fork 0
mirror of https://github.com/xdan/datetimepicker.git synced 2024-11-18 06:24:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge pull request #420 from greuff/master

Browse Source 
Documentation update for setDateFormatter
This commit is contained in:
Valeriy 2016-03-25 14:30:46 +05:00
commit f442a83391
1 changed files with 13 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
doc.tpl
View File

@ -362,41 +362,18 @@ jQuery('#_datetimepicker_weekends_disable').datetimepicker({
}); });
// ]]></script> // ]]></script>
<hr id="use_other_date_parser" /> <hr id="use_other_date_parser" />
<h4>Use other date parser<a href="#use_other_date_parser">#</a></h4> <h4>Use another date parser/formatter<a href="#use_other_date_parser">#</a></h4>
<p><a href="http://www.xaprb.com/blog/2005/12/12/javascript-closures-for-runtime-efficiency/" target="_blanc" rel="nofollow">Date-functions library</a>, Baron Schwartz, used in DateTimePicker for parse and format datetime certainly good, but it is licensed under the LGPL. It is not bad and not good. In this example, you see how use other date parse library</p> <p>By default, datetimepicker uses <a href="https://github.com/kartik-v/php-date-formatter">php-date-formatter</a> for parsing and formatting the date and time displayed. You can replace the library by setting a custom DateFormatter. Simply supply an object that implements the <tt>parseDate</tt> and <tt>formatDate</tt> methods. This example uses the popular <a href="http://momentjs.com/">MomentJS</a> library:</p>
<p>Before start, remove code below jquery.datetimepicker.js. Remove all after comment </p> <pre><code data-language="javascript">$.datetimepicker.setDateFormatter({
<pre><code data-language="javascript">// Parse and Format Library</code></pre> parseDate: function (date, format) {
<p>After this add in page next code, as previously </p> return moment(date, format);
<pre><code data-language="html">&lt;script src="jquery.datetimepicker.js"&gt;&lt;/script&gt;</code></pre> },
<p>After this you must define two methods for Date object</p>
<pre><code data-language="javascript">Date.parseDate = function( input, format ){ formatDate: function (date, format) {
// you code for convert string to date object return moment(date).format(format);
// simplest variant - use native Date.parse, not given format parametr
return Date.parse(input);
};
Date.prototype.dateFormat = function( format ){
//you code for convert date object to format string
//for example
switch( format ){
case 'd': return this.getDate();
case 'H:i:s': return this.getHours()+':'+this.getMinutes()+':'+this.getSeconds();
case 'h:i a': return ((this.getHours() %12) ? this.getHours() % 12 : 12)+':'+this.getMinutes()+(this.getHours() &lt; 12 ? 'am' : 'pm');
} }
// or default format });
return this.getDate()+'.'+(this.getMonth()+ 1)+'.'+this.getFullYear(); </code></pre>
};</code></pre>
<p>It is only example, it is not real code. For real project this.getDate() must be replace to (this.getDate()&lt;0:'0':'')+this.getDate()</p>
<p>This approach will work in a particular project, but does not work in another. Therefore use the other libraries for working with dates - <a href="http://momentjs.com/" target="_blanc" rel="nofollow" title="Other library for parse time">Moment.js</a>.</p>
<h3>How to use moment.js with jquery datetimepicker</h3>
<p> Add this code in page</p>
<pre><code data-language="html">&lt;script src="http://momentjs.com/downloads/moment.min.js"&gt;&lt;/script&gt;</code></pre>
<p>After this, again re-define 2 methods</p>
<pre><code data-language="javascript">Date.parseDate = function( input, format ){
return moment(input,format).toDate();
};
Date.prototype.dateFormat = function( format ){
return moment(this).format(format);
};</code></pre>
<p>After this, you can init datetimepicker with moment.js <a href="http://momentjs.com/docs/#/parsing/string-format/" target="_blanc" rel="nofollow">format</a></p> <p>After this, you can init datetimepicker with moment.js <a href="http://momentjs.com/docs/#/parsing/string-format/" target="_blanc" rel="nofollow">format</a></p>
<pre><code data-language="javascript">jQuery('#datetimepicker').datetimepicker({ <pre><code data-language="javascript">jQuery('#datetimepicker').datetimepicker({
format:'DD.MM.YYYY h:mm a', format:'DD.MM.YYYY h:mm a',