Skip to content

Commit

Permalink
Added attribute and CSS customization reference and custom formatting…
Browse files Browse the repository at this point in the history 
… example. Updated theme.
  • Loading branch information
@atesgoral
atesgoral committed Feb 4, 2015
1 parent d857dbb commit b58debf
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 6 deletions.
118 changes: 113 additions & 5 deletions index.html
View file
Expand Up @@ -28,7 +28,23 @@
<script>
hljs.initHighlightingOnLoad();

angular.module('demo', [ 'mp.datePicker' ]);
angular.module('demo', [ 'mp.datePicker' ]).run(function ($rootScope) {
$rootScope.formatDateYYYYMMDD = function (date) {
function pad(n) {
return n < 10 ? '0' + n : n;
}

return date && date.getFullYear()
+ '-' + pad(date.getMonth() + 1)
+ '-' + pad(date.getDate());
};

$rootScope.parseDateYYYYMMDD = function (s) {
var tokens = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);

return tokens && new Date(tokens[1], tokens[2] - 1, tokens[3]);
};
});
</script>
</head>
<body>
Expand Down Expand Up @@ -79,7 +95,7 @@ <h4>Demo Source</h4>
<h3 id="overview">Overview</h3>

<p><strong>angular-date-picker</strong> is a lightweight calendar that acts
like a custom input element through regular <a href="https://docs.angularjs.org/api/ng/directive/ngModel">ng-model</a> bindings. It is:</p>
like a custom input element through regular <a href="https://docs.angularjs.org/api/ng/directive/ngModel">ngModel</a> bindings. It is:</p>

<ul>
<li>Pure CSS &ndash; does not use any images</li>
Expand Down Expand Up @@ -122,15 +138,107 @@ <h3 id="usage">Usage</h3>
-->angular.module('app', [ 'mp.datePicker' ]);<!--
--></code></pre>

<p>Then use the <strong>&lt;date-picker&gt;</strong> element along with an <strong>ng-model</strong> directive for two-way binding with a scope variable:</p>
<p>Then use the <code>&lt;date-picker&gt;</code> element along with an <code>ng-model</code> directive for two-way binding with a scope variable:</p>

<pre><code class="lang-html"><!--
-->&lt;date-picker ng-model=&quot;date&quot;&gt;
&lt;/date-picker&gt;<!--
--></code></pre>

<p>Feel free to override the styles defined in <strong>angular-date-picker.css</strong> to match the style of your application.</p>
</div>
<p>By default, the locale date format is used. To use a custom format, first set up a formatter and a parser in your scope:</p>

<pre><code class="lang-js"><!--
-->$scope.formatDate = function (date) {
function pad(n) {
return n &lt; 10 ? '0' + n : n;
}

return date &amp;&amp; date.getFullYear()
+ '-' + pad(date.getMonth() + 1)
+ '-' + pad(date.getDate());
};

$scope.parseDate = function (s) {
var tokens = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s);

return tokens &amp;&amp; new Date(tokens[1], tokens[2] - 1, tokens[3]);
};<!--
--></code></pre>

<p>Then pass these functions to the <code><a href="#format-date">format-date</a></code> and <code><a href="#parse-date">parse-date</a></code> attributes:</p>

<pre><code class="lang-html"><!--
-->&lt;date-picker ng-model=&quot;date&quot; format-date=&quot;formatDate&quot; parse-date=&quot;parseDate&quot;&gt;
&lt;/date-picker&gt;
&lt;input ng-model=&quot;date&quot;&gt;<!--
--></code></pre>

<p><a href="javascript:void(0)" ng-click="isFormattingExampleShown = !isFormattingExampleShown">Toggle Example</a></p>

<div ng-if="isFormattingExampleShown" ng-init="date = null; formatDate = formatDateYYYYMMDD; parseDate = parseDateYYYYMMDD">
<date-picker ng-model="date" format-date="formatDate" parse-date="parseDate"></date-picker>
<input ng-model="date">
</div>

<h4>Attributes</h4>

<dl>
<dt id="format-date">format-date</dt>
<dd><strong>Optional.</strong> Allows for custom formatting of date values selected by the date picker, before they are fed back to the model. This must be a function that takes a <code>Date</code> object and returns a string. By default, the locale date format is used via <code>Date.prototype.toLocaleDateString()</code>.</dd>

<dt id="parse-date">parse-date</dt>
<dd><strong>Optional.</strong> Allows for custom parsing of date values coming from the model. This must be a function that takes a string and returns a <code>Date</code> object. By default, the <code>Date</code> constructor is used.</dd>

<dt>on-date-selected</dt>
<dd><strong>Optional.</strong> Expression to evaluate when a date is picked. This is a convenience feature to do things like close a calendar dropdown when a date is picked, especially for cases where watching the model for changes may not be enough. <strong>Example:</strong> <code>on-date-selected="closeDropdown()"</code></dd>
</dl>

<h4>Theming</h4>

<p>You can override the styles defined in <strong>angular-date-picker.css</strong> to match the style of your application. The classes and specifiers that are used are:</p>

<dl>
<dt>.angular-date-picker</dt>
<dd>The top-level container for the entire calendar.</dd>

<dt>.angular-date-picker > ._month</dt>
<dd>The header containing the month and year.</dd>

<dt>.angular-date-picker > ._month > button</dt>
<dd>The previous month and next month buttons.</dd>

<dt>.angular-date-picker > ._month > button._previous</dt>
<dd>The previous month button.</dd>

<dt>.angular-date-picker > ._month > button._next</dt>
<dd>The next month button.</dd>

<dt>.angular-date-picker > ._days</dt>
<dd>The container that holds day of week headers and days of the month.</dd>

<dt>.angular-date-picker > ._days > ._day-of-week</dt>
<dd>A day of week header.</dd>

<dt>.angular-date-picker > ._days > ._day</dt>
<dd>Any day.</dd>

<dt>.angular-date-picker > ._days > ._day.-padding</dt>
<dd>A day that falls outside the selected month. These days are not selectable.</dd>

<dt>.angular-date-picker > ._days > ._day.-selectable</dt>
<dd>A day of the selected month. These days are selectable. This is the opposite of <code>.-padding</code>.</dd>

<dt>.angular-date-picker > ._days > ._day.-selectable.-selected</dt>
<dd>The selected day.</dd>

<dt>.angular-date-picker > ._days > ._day.-selectable.-today</dt>
<dd>If the current month is being shown, this marks today.</dd>
</dl>

<h3>Limitations</h3>

<p>There is currently no localization support.</p>
</div>
</section>
</article>
<footer>
Expand Down
9 changes: 8 additions & 1 deletion theme.css
View file
Expand Up @@ -104,13 +104,19 @@ article h3, article h4 {
}
article p {
margin: 0 0 20px;
line-height: 1.5em;
}
article pre {
border-radius: 4px;
font-family: monospace;
margin: 0 0 20px;
}
article code {
background: #f0f0f0 !important;
padding: 0 .33em;
border-radius: 4px;
}
article pre code {
border-radius: 4px;
padding: 10px !important;
}
Expand Down Expand Up @@ -141,6 +147,7 @@ article blockquote {
border-left: 5px solid #f4f4f4;
padding: 0 0 0 1em;
font-style: italic;
line-height: 1.5em;
}
article table {
margin: 0 0 20px 0;
Expand Down Expand Up @@ -182,7 +189,7 @@ section {
color: #f05a28;
}
.showcase-content code {
background: #fff;
background: #fff !important;
}
.showcase-content:after {
content: '';
Expand Down

0 comments on commit b58debf

Please sign in to comment.