metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
287 lines (266 loc) • 13.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="The most popular HTML, CSS, and JS library in Metro style.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Date routines - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Date routines</a></li>
<li class="toc-entry"><a href="#_dateformat_format">Date to string</a></li>
<li class="toc-entry"><a href="#_dateformat_to_date">String to date</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Date routines</h1>
<p class="text-leader">
Metro 4 contains function to format date and time and output formatted string and create date from string by mask.
</p>
<!-- ads-html -->
<h3 id="_dateformat_function">Date to string</h3>
<p>
You can format date and time value to formatted string with special function.
This function is implemented as an extension of the Date object with name <code>format</code>.
This function has two parameters:
</p>
<ul>
<li><strong>format</strong> - format for output.</li>
<li><strong>locale</strong> - language for output.</li>
</ul>
<p class="remark info">
You can read more about locales in <a href="i18n.html">this article</a>.
</p>
<pre><code>
Date.prototype.format = function(format, locale){...}
var date = new Date();
console.log(date.format("%d-%m-%Y"));
</code></pre>
<h5 id="_dateformat_patterns">Patterns</h5>
<table class="table cell-border table-border options-table">
<thead>
<tr>
<th>Pattern</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>%a</code></td>
<td>The abbreviated name of the day of the week according to the locale.</td>
</tr>
<tr>
<td><code>%A</code></td>
<td>The full name of the day of the week according to the locale.</td>
</tr>
<tr>
<td><code>%b</code></td>
<td>The abbreviated month name according to the locale.</td>
</tr>
<tr>
<td><code>%B</code></td>
<td>The full name of the month according to the locale.</td>
</tr>
<tr>
<td><code>%c</code></td>
<td>Preferred date and time (UTC) representation for the locale.</td>
</tr>
<tr>
<td><code>%C</code></td>
<td>Century number (year/100) as a 2-digit integer.</td>
</tr>
<tr>
<td><code>%d</code></td>
<td>Day of the month as a decimal number (range 01 to 31).</td>
</tr>
<tr>
<td><code>%e</code></td>
<td>Day of the month as a decimal number (range 1 to 31).</td>
</tr>
<tr>
<td><code>%F</code></td>
<td>ISO 8601 date format (equivalent to %Y-%m-%d).</td>
</tr>
<tr>
<td><code>%G</code></td>
<td>ISO 8601 week-based year with century as a decimal number. The 4-digit year corresponds to the ISO week number (see %V). This has the same format and value as %Y, except that if the ISO week number belongs to the previous or next year, that year is used instead.</td>
</tr>
<tr>
<td><code>%g</code></td>
<td>Like %G, but without century, that is, with a 2-digit year (00-99).</td>
</tr>
<tr>
<td><code>%H</code></td>
<td>Hour as a decimal number using a 24-hour clock (range 00 to 23). See also %k.</td>
</tr>
<tr>
<td><code>%I</code></td>
<td>Hour as a decimal number using a 12-hour clock (range 01 to 12). See also %l.</td>
</tr>
<tr>
<td><code>%j</code></td>
<td>Day of the year as a decimal number (range 001 to 366).</td>
</tr>
<tr>
<td><code>%k</code></td>
<td>Hour as a decimal number using a 24-hour clock (range 0 to 23). See also %H.</td>
</tr>
<tr>
<td><code>%l</code></td>
<td>Hour as a decimal number using a 12-hour clock (range 1 to 12). See also %I.</td>
</tr>
<tr>
<td><code>%m</code></td>
<td>Month as a decimal number (range 01 to 12).</td>
</tr>
<tr>
<td><code>%M</code></td>
<td>Minute as a decimal number (range 00 to 59).</td>
</tr>
<tr>
<td><code>%p</code></td>
<td>Either "AM" or "PM" according to the given time value. Noon is treated as "PM" and midnight as "AM".</td>
</tr>
<tr>
<td><code>%P</code></td>
<td>Like %p but in lowercase ("am" or "pm").</td>
</tr>
<tr>
<td><code>%s</code></td>
<td>Number of seconds since the Epoch, 1970-01-01 00:00:00 +0000 (UTC).</td>
</tr>
<tr>
<td><code>%S</code></td>
<td>Second as a decimal number (range 00 to 59).</td>
</tr>
<tr>
<td><code>%u</code></td>
<td>Day of the week as a decimal (range 1 to 7), Monday being 1. See also %w.</td>
</tr>
<tr>
<td><code>%V</code></td>
<td>ISO 8601 week number of the year as a decimal number (range 01 to 53), where week 1 is the first week that has at least 4 days in the new year (that is, the first Thursday).</td>
</tr>
<tr>
<td><code>%w</code></td>
<td>Day of the week as a decimal (range 0 to 6), Sunday being 0. See also %u.</td>
</tr>
<tr>
<td><code>%x</code></td>
<td>Preferred date representation for the locale without the time.</td>
</tr>
<tr>
<td><code>%X</code></td>
<td>Preferred time representation for the locale without the date.</td>
</tr>
<tr>
<td><code>%y</code></td>
<td>Year as a decimal number without a century (range 00 to 99).</td>
</tr>
<tr>
<td><code>%Y</code></td>
<td>Year as a decimal number including the century.</td>
</tr>
<tr>
<td><code>%z</code></td>
<td>The +hhmm or -hhmm numeric timezone (that is, the hour and minute offset from UTC).</td>
</tr>
<tr>
<td><code>%Z</code></td>
<td>Timezone name or abbreviation.</td>
</tr>
</tbody>
</table>
<!-- ads-html -->
<h3 id="_dateformat_to_date">String to date</h3>
<p>
You can convert <code>string</code> to <code>date</code> by <code>mask</code> with special string extension function <code>toDate(mask)</code>.
</p>
<pre><code>
String.prototype.toDate = function(mask){...}
"1972-12-21 04:30:00".toDate("yyyy-mm-dd hh:ii:ss");
"21-12-1972".toDate("dd-mm-yyyy");
"21-12-1972".toDate("%d-%m-%y");
</code></pre>
<h5 id="_dateformat_patterns_2">Patterns</h5>
<table class="table cell-border table-border options-table">
<thead>
<tr>
<th>Pattern</th>
<th>Desc</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>%d, dd</code></td>
<td>Day definition.</td>
</tr>
<tr>
<td><code>%m, mm</code></td>
<td>Month definition.</td>
</tr>
<tr>
<td><code>%y, yy, yyyy</code></td>
<td>Year definition.</td>
</tr>
<tr>
<td><code>%h, hh</code></td>
<td>Hours definition.</td>
</tr>
<tr>
<td><code>%i, ii, mi</code></td>
<td>Minutes definition.</td>
</tr>
<tr>
<td><code>%s, ss</code></td>
<td>Seconds definition.</td>
</tr>
</tbody>
</table>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>