Skip to content

Commit 4c7eeab

Browse files
atmulyanaatmulyana
committed
update manual: css, add section Node.js module
1 parent ca1075b commit 4c7eeab

File tree

1 file changed

+86
-89
lines changed

1 file changed

+86
-89
lines changed

‎JsSimpleDateFormat-Manual.html‎

Lines changed: 86 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,16 @@
77
head, body, table {
88
font-size: large;
99
}
10-
small {
11-
font-size: medium;
10+
body {
11+
margin: 1cm;
1212
}
1313
code, pre {
1414
font-family: monospace;
1515
font-size: 1rem;
1616
}
17+
pre {
18+
background-color: #eee;
19+
}
1720
h3 {
1821
font-size: 1.25rem;
1922
}
@@ -24,6 +27,9 @@
2427
h4 {
2528
font-size: 1.125rem;
2629
}
30+
h6 {
31+
font-size: 0.8rem;
32+
}
2733
li {
2834
margin-top: 5px;
2935
}
@@ -36,19 +42,17 @@
3642
</head>
3743
<body>
3844
<div style="text-align: justify;">
39-
<h2>JsSimpleDateFormat&nbsp;&nbsp; <small>v2.1</small><br>
40-
<small><small><small>Author: AT Mulyana&nbsp;&nbsp; &nbsp;&nbsp;
41-
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; Last edited: 15 January 2020<br>
42-
</small></small></small></h2>
43-
<h4><br>
44-
</h4>
45+
<h2 style='display:inline'>JsSimpleDateFormat</h2>
46+
<h6 style='display:inline'>&nbsp;&nbsp;v2.1</h6>
47+
<h6 style='margin-top:0px'>Author: AT Mulyana&nbsp;&nbsp; &nbsp;&nbsp;
48+
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; Last edited: 23 January 2020</h6>
4549
<h3>Table of Contents</h3>
4650
<ul>
4751
<li><a href="#Description">Description</a></li>
4852
<li><a href="#Date_and_Time_Patterns">Date and Time Patterns</a></li>
4953
<li><a href="#Class_JsSimpleDateFormat">Class <code>JsSimpleDateFormat</code></a></li>
5054
<li><a href="#Class_JsDateFormatSymbols">Class <code>JsDateFormatSymbols</code></a></li>
51-
<!--<li><a href="#Used_as_Nodejs_Module">Used as Node.js Module</a></li>-->
55+
<li><a href="#Used_as_Nodejs_Module">Used as Node.js Module</a></li>
5256
</ul>
5357

5458
<h3><a name="Description">Description</a></h3>
@@ -456,12 +460,10 @@ <h3><a name="Date_and_Time_Patterns">Date and Time Patterns</a></h3>
456460
NOTE: year 0 means 1 BC, year -1 means 2 BC and so on. So if you set year to 0
457461
then it will be shown as 1, -1 will be shown as 2 and so on. Perhaps, it's better
458462
to show era designator field.
459-
460463
<p>For parsing, if the number of pattern letters is more than 2,
461464
the year is interpreted literally, regardless of the number of
462465
digits. So using the pattern "MM/dd/yyyy", "01/11/12" parses to
463-
Jan 11, 12 A.D.
464-
</p>
466+
Jan 11, 12 A.D.</p>
465467
<p>For parsing with the abbreviated year pattern ("y" or "yy"),
466468
<code>JsSimpleDateFormat</code> must interpret the abbreviated year
467469
relative to some century. The begin of century is set by
@@ -587,8 +589,8 @@ <h5><a name="Net_Date_and_Time_Patterns">.NET Compatible Date and Time Patterns<
587589
</td>
588590
<td>
589591
One letter is the tenths of a second.<br/>
590-
Two letters is the hundredths of a second.<br/>
591-
Three or more letters is the milliseconds.
592+
Two letters is the hundredths of a second.<br/>
593+
Three or more letters is the milliseconds.
592594
</td>
593595
</tr>
594596
<tr>
@@ -621,10 +623,10 @@ <h5><a name="Net_Date_and_Time_Patterns">.NET Compatible Date and Time Patterns<
621623
</td>
622624
<td>
623625
For formatting, it's like <a href="#letter_z">z</a> letter in Java version.<br/>
624-
For parsing, beside accepted format in Java version,<br/>
625-
one letter accepts format: "+7" and "+07"<br/>
626-
two letters accepts format: "+07"<br/>
627-
three or more letters accepts format: "+07:00"
626+
For parsing, beside accepted format in Java version,<br/>
627+
one letter accepts format: "+7" and "+07"<br/>
628+
two letters accepts format: "+07"<br/>
629+
three or more letters accepts format: "+07:00"
628630
</td>
629631
</tr>
630632
</tbody>
@@ -641,30 +643,27 @@ <h4>Constructor</h4>
641643
is English. If you want to change the default pattern, you may create your
642644
own class which inherits <code>JsSimpleDateFormat</code> and then overwrite
643645
<code>_getDefaultPattern</code> method, like the below one. Suppose the
644-
default pattern you want is <nobr>"MMM dd, yyyy HH:mm a"</nobr>:
645-
646+
default pattern you want is <nobr>"MMM dd, yyyy HH:mm a"</nobr>:
646647
<pre>
647-
function MyJsSimpleDateFormat() {
648-
JsSimpleDateFormat.apply(this,arguments);
649-
}
650-
MyJsSimpleDateFormat.__extends__(JsSimpleDateFormat, {
651-
_getDefaultPattern: function() {
652-
return "MMM dd, yyyy HH:mm a";
653-
}
654-
});
655-
</pre>
656-
648+
function MyJsSimpleDateFormat() {
649+
JsSimpleDateFormat.apply(this,arguments);
650+
}
651+
MyJsSimpleDateFormat.__extends__(JsSimpleDateFormat, {
652+
_getDefaultPattern: function() {
653+
return "MMM dd, yyyy HH:mm a";
654+
}
655+
});
656+
</pre>
657657
<p><code>__extends__</code> method is written in JsSimpleDateFormat.js.
658658
If using usual way, we write like this:</p>
659-
660659
<pre>
661-
function MyJsSimpleDateFormat() {
662-
JsSimpleDateFormat.apply(this,arguments);
663-
}
664-
MyJsSimpleDateFormat.prototype = new JsSimpleDateFormat();
665-
MyJsSimpleDateFormat.prototype._getDefaultPattern = function() {
666-
return "MMM dd, yyyy HH:mm a";
667-
}
660+
function MyJsSimpleDateFormat() {
661+
JsSimpleDateFormat.apply(this,arguments);
662+
}
663+
MyJsSimpleDateFormat.prototype = new JsSimpleDateFormat();
664+
MyJsSimpleDateFormat.prototype._getDefaultPattern = function() {
665+
return "MMM dd, yyyy HH:mm a";
666+
}
668667
</pre>
669668
</li>
670669
<li><a name="contructor2"><code>JsSimpleDateFormat(sPattern)</code></a><br/>
@@ -803,37 +802,32 @@ <h4>Method</h4>
803802
create your own class inherited from <code>JsSimpleDateFormat</code>
804803
and overwrite <code>_getInitDate</code> method as below (suppose you want
805804
the iniatial date time is the current date time):<br/>
806-
807805
<pre>
808-
function MyJsSimpleDateFormat() {
809-
JsSimpleDateFormat.apply(this,arguments);
810-
}
811-
MyJsSimpleDateFormat.__extends__(JsSimpleDateFormat, {
812-
_getInitDate: function() {
813-
return new Date();
814-
}
815-
});
806+
function MyJsSimpleDateFormat() {
807+
JsSimpleDateFormat.apply(this,arguments);
808+
}
809+
MyJsSimpleDateFormat.__extends__(JsSimpleDateFormat, {
810+
_getInitDate: function() {
811+
return new Date();
812+
}
813+
});
816814
</pre>
817-
818815
<p><code>__extends__</code> method is written in JsSimpleDateFormat.js.
819816
If using usual way, we write like this:</p>
820-
821817
<pre>
822-
function MyJsSimpleDateFormat() {
823-
JsSimpleDateFormat.apply(this,arguments);
824-
}
825-
MyJsSimpleDateFormat.prototype = new JsSimpleDateFormat();
826-
MyJsSimpleDateFormat.prototype._getInitDate = function() {
827-
return new Date();
828-
}
818+
function MyJsSimpleDateFormat() {
819+
JsSimpleDateFormat.apply(this,arguments);
820+
}
821+
MyJsSimpleDateFormat.prototype = new JsSimpleDateFormat();
822+
MyJsSimpleDateFormat.prototype._getInitDate = function() {
823+
return new Date();
824+
}
829825
</pre>
830-
831826
<p>This method will return <code>null</code> if the string cannot be parsed
832827
to be a valid date time. Note, the method may not use the entire text, only
833828
a substring positioned at index 0. For example, "Jan 3, 2008 is Thursday"
834829
will be parsed successfully using pattern "MMM d, yyyy" even if the
835830
remaining string " is Thursday" doesn't match the pattern.</p>
836-
837831
<b>Parameters:</b>
838832
<ul>
839833
<li><code>s</code> is a string to be parsed.
@@ -855,14 +849,12 @@ <h4>Method</h4>
855849
if the parsing failed. It notes the index when the error begins to happen.
856850
If an error occurs, the <code>index</code> property will not be updated but the
857851
<code>errorIndex</code> property will be updated. Example:
858-
859852
<pre>
860-
var oDf = new JsSimpleDateFormat("MMM d, yyyy");
861-
var s = "The date of Jan 3, 2008 is Thursday";
862-
var oPos = {index: 12, errorIndex: -1};
863-
var oDate = oDf.parse(s, oPos);
853+
var oDf = new JsSimpleDateFormat("MMM d, yyyy");
854+
var s = "The date of Jan 3, 2008 is Thursday";
855+
var oPos = {index: 12, errorIndex: -1};
856+
var oDate = oDf.parse(s, oPos);
864857
</pre>
865-
866858
<p>After parsing, <code>index</code> property will be updated become 23.
867859
As example above, initiate the value of <code>errorIndex</code> property
868860
to -1 because if an error occurs, it will be updated to the non negative
@@ -873,11 +865,9 @@ <h4>Method</h4>
873865
<br/>
874866
If you don't need the return back about index but only want to determine the
875867
starting index, you may do it like this:</p>
876-
877868
<pre>
878-
var oDate = oDf.parse(s, {index:3});
869+
var oDate = oDf.parse(s, {index:3});
879870
</pre>
880-
881871
<p>For further information, see another <a href="#method_parse"><code>parse</code></a>
882872
method.</p>
883873
<b>Parameters:</b>
@@ -949,18 +939,17 @@ <h3><a name="Class_JsDateFormatSymbols">Class <code>JsDateFormatSymbols</code></
949939
<br/>
950940
Below is an example how to change the keywords:
951941
<pre>
952-
var oDf = new JsSimpleDateFormat("MMM d, yyyy");
953-
var oSymbols = new JsDateFormatSymbols();
954-
oSymbols.setAmPmStrings(['AM','PM']);
955-
oSymbols.setEras(['AD','BC']);
956-
oSymbols.setMonths(['January','February','March','April','May','June','July','August','September','October','November','December']);
957-
oSymbols.setShortMonths(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
958-
oSymbols.setShortWeekdays(['Sun','Mon','Tue','Wed','Thu','Fri','Sat']);
959-
oSymbols.setWeekdays(['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
960-
oDf.setDateFormatSymbols(oSymbols);
961-
alert(oDf.format(new Date()));
942+
var oDf = new JsSimpleDateFormat("MMM d, yyyy");
943+
var oSymbols = new JsDateFormatSymbols();
944+
oSymbols.setAmPmStrings(['AM','PM']);
945+
oSymbols.setEras(['AD','BC']);
946+
oSymbols.setMonths(['January','February','March','April','May','June','July','August','September','October','November','December']);
947+
oSymbols.setShortMonths(['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']);
948+
oSymbols.setShortWeekdays(['Sun','Mon','Tue','Wed','Thu','Fri','Sat']);
949+
oSymbols.setWeekdays(['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']);
950+
oDf.setDateFormatSymbols(oSymbols);
951+
alert(oDf.format(new Date()));
962952
</pre>
963-
964953
<p>Of course, you should change the words in the example above to be the
965954
appropriate words according to your language.<br/>
966955
<br/>
@@ -972,18 +961,16 @@ <h3><a name="Class_JsDateFormatSymbols">Class <code>JsDateFormatSymbols</code></
972961
<a href="http://www.loc.gov/standards/iso639-2/php/English_list.php">http://www.loc.gov/standards/iso639-2/php/English_list.php</a>,
973962
but you may choose what you like. Nevermind if for your own. Create a JavaScript file and
974963
write the code like the below one inside this JavaScript file.</p>
975-
976964
<pre>
977-
JsDateFormatSymbols.__symbols__.xx = {
978-
amPmStrings: ['AM','PM'],
979-
eras: ['AD','BC'],
980-
months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
981-
shortMonths: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
982-
shortWeekdays: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
983-
weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
984-
};
965+
JsDateFormatSymbols.__symbols__.xx = {
966+
amPmStrings: ['AM','PM'],
967+
eras: ['AD','BC'],
968+
months: ['January','February','March','April','May','June','July','August','September','October','November','December'],
969+
shortMonths: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
970+
shortWeekdays: ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'],
971+
weekdays: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday']
972+
};
985973
</pre>
986-
987974
<p>Alter the words in the example above to be the appropriate words
988975
according to your language. Insert that JavaScript file in your HTML
989976
document after inserting JsSimpleDateFormat.js.</p>
@@ -1067,8 +1054,18 @@ <h4>Method</h4>
10671054
</li>
10681055
</ul>
10691056

1070-
<!--<h3><a name="#Used_as_Nodejs_Module">Used as Node.js Module</a></h3>-->
1057+
<h3><a name="Used_as_Nodejs_Module">Used as Node.js Module</a></h3>
1058+
To install JsSimpleDateFormat package, you can use console command:
1059+
<pre>
1060+
npm install jssimpledateformat
1061+
</pre>
1062+
In javascript source, you can follow the example below:
1063+
<pre>
1064+
import DateFormat, {JsDateFormatSymbols} from 'jssimpledateformat';
10711065

1066+
let df = new DateFormat('d MMM yyyy HH:mm:ss', new JsDateFormatSymbols('en'));
1067+
console.log(df.format(new Date()));
1068+
</pre>
10721069
</div>
10731070
</body>
10741071
</html>

0 commit comments

Comments
 (0)