update files.
This commit is contained in:
thinkgem
@@ -1,344 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<html class="no-js">
|
||||
<!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>多功能jQuery日期控件asDatepicker - 素材家园（www.sucaijiayuan.com）</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/prism.css">
|
||||
<link rel="stylesheet" href="../css/asDatepicker.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="toc"></div>
|
||||
<div class="container">
|
||||
<h1>jQuery.asDatepicker</h1>
|
||||
<section>
|
||||
<h2>Examples</h2>
|
||||
<p>You can pass these options as key/value object to $.asDatepicker() method. </p>
|
||||
<section>
|
||||
<h3>default single</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar").asDatepicker();
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<!-- <input type="text" id="calendar" data-range-mode="section" data-selectable-year="2001>2010,2013,2015>2018"> -->
|
||||
<input type="text" id="calendar">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>range</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar2">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar2").asDatepicker({mode: 'range'});
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar2" style="width:170px;">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>multiple</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar3">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar3").asDatepicker({mode: 'multiple', calendars: '4'});
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar3">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Data attributes</h3>
|
||||
<p>Any option of the asDatepicker can also be set via data-attributes.</p>
|
||||
<p>Such as:</p>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar4" data-mode="range" data-range-mode="section" data-selectable-year="2001>2010,2012,2014>2016">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar4").asDatepicker();
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar4" data-mode="range" data-range-mode="section" data-selectable-year="2001>2010,2012,2014>2016">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Mobile Single</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar-mobile-single">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#calendar-mobile-single').asDatepicker({
|
||||
mobileMode: true
|
||||
});
|
||||
});
|
||||
<script>
|
||||
</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-mobile-single">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Mobile Range</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar-mobile-range">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#calendar-mobile-range').asDatepicker({
|
||||
mode: 'range',
|
||||
mobileMode: true
|
||||
});
|
||||
});
|
||||
<script>
|
||||
</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-mobile-range">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Mobile Multiple</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar-mobile-multiple">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#calendar-mobile-multiple').asDatepicker({
|
||||
mode: 'multiple',
|
||||
mobileMode: true
|
||||
});
|
||||
});
|
||||
<script>
|
||||
</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-mobile-multiple">
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Keyboard navigation</h2>
|
||||
<p> <span>left arrow ----- </span> highlights previous day </p>
|
||||
<p> <span>right arrow ----- </span> highlights next day </p>
|
||||
<p> <span>up arrow ----- </span> highlights same day from the previous week </p>
|
||||
<p> <span>down arrow ----- </span> highlights same day from the next week </p>
|
||||
<p> <span>ctrl + left arrow ----- </span> navigates to previous month </p>
|
||||
<p> <span>ctrl + right arrow ----- </span> navigates to next month </p>
|
||||
<p> <span>ctrl + up arrow ----- </span> navigates to higher view </p>
|
||||
<p> <span>ctrl + down arrow ----- </span> navigates to lower view </p>
|
||||
<p> <span>alt + left arrow ----- </span> focus in previous calendar </p>
|
||||
<p> <span>alt + right arrow ----- </span> focus in next calendar </p>
|
||||
<p> <span>enter ----- </span> if in "days" view selects the highlighted day. In other views navigates to a lower view </p>
|
||||
<p> <span>esc ----- </span> closes the popup </p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Available options</h2>
|
||||
<p>You can pass these options as key/value object to $.asDatepicker() method. </p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>API</h2>
|
||||
<section>
|
||||
<h3>DisplayMode</h3>
|
||||
<p>With default dropdown and inline</p>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$("#calendar-api-displayMode").asDatepicker({displayMode: 'inline'});</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-api-displayMode">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>show()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-show').asDatepicker('show');</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" class="asDatepicker" id="calendar-api-show">
|
||||
<a href="#" id="calendar-api-show-click">Click to show calendar</a> </div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>hide()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-show').asDatepicker('hide');</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" class="asDatepicker" id="calendar-api-hide">
|
||||
<a href="#" id="calendar-api-hide-click">Click to hide calendar</a> </div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>multipleClear()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-multipleClear').asDatepicker('multipleClear');</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" class="calendar-multiple" id="calendar-api-multipleClear">
|
||||
<button id="api-multipleClear-click">Clear</button>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>getWrap()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$.asDatepicker('getWrap');</code></pre>
|
||||
<div class="example">
|
||||
<p>Returns the wrapper of the calendar.</p>
|
||||
</div>
|
||||
<section>
|
||||
<h3>getInput()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$.asDatepicker('getInput');</code></pre>
|
||||
<div class="example"> Returns the input field. </div>
|
||||
<section>
|
||||
<h3>getDate()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-getDate').asDatepicker('getDate');</code></pre>
|
||||
<div class="example">
|
||||
<p>Returns the currently selected date.</p>
|
||||
<input type="text" class="asDatepicker" id="calendar-api-getDate">
|
||||
<button id="api-getDate-click">getDate</button>
|
||||
</div>
|
||||
<div class="example info">
|
||||
<div class="content" id="api-getDate-info"></div>
|
||||
</div>
|
||||
<section>
|
||||
<h3>getDate(format)</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-getDate-format').asDatepicker('getDate', 'yyyy-mm-dd');</code></pre>
|
||||
<div class="example">
|
||||
<p>Returns the current date, formatted with the pattern given as the argument.</p>
|
||||
<input type="text" class="asDatepicker" id="calendar-api-getDate-format">
|
||||
<button id="api-getDate-format-click">getDate</button>
|
||||
</div>
|
||||
<div class="example info">
|
||||
<div class="content" id="api-getDate-format-info"></div>
|
||||
</div>
|
||||
<section>
|
||||
<h3>update()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-update').asDatepicker();
|
||||
$('#calendar-api-update').asDatepicker('update', {mode: 'range'});</code></pre>
|
||||
<div class="example">
|
||||
<p>Sets one or more options for the asDatepicker.</p>
|
||||
<input type="text" class="asDatepicker" id="calendar-api-update">
|
||||
<button id="api-update-click">update</button>
|
||||
</div>
|
||||
<section> </section>
|
||||
<section>
|
||||
<h2>Events</h2>
|
||||
<section>
|
||||
<h3>on_show</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_before_show</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_hide</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_change</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_render</h3>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Skin</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Location</h2>
|
||||
</section>
|
||||
</div>
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/jquery.mobile.custom.js"></script>
|
||||
<script src="js/jquery.toc.min.js"></script>
|
||||
<script src="js/prism.js"></script>
|
||||
<script src="../js/jquery-asDatepicker.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
(function(){
|
||||
$('#toc').toc();
|
||||
})();
|
||||
$("#calendar").asDatepicker({
|
||||
namespace: 'calendar',
|
||||
lang: 'zh',
|
||||
position: 'bottom'
|
||||
});
|
||||
|
||||
$("#calendar2").asDatepicker({
|
||||
mode: 'range',
|
||||
namespace: 'calendar',
|
||||
lang: 'zh',
|
||||
position: 'bottom'
|
||||
});
|
||||
|
||||
$("#calendar3").asDatepicker({
|
||||
mode: 'multiple',
|
||||
calendars: 4,
|
||||
});
|
||||
|
||||
$("#calendar4").asDatepicker();
|
||||
|
||||
$('#calendar-mobile-single').asDatepicker({
|
||||
mobileMode: true
|
||||
});
|
||||
$('#calendar-mobile-range').asDatepicker({
|
||||
mode: 'range',
|
||||
mobileMode: true
|
||||
});
|
||||
$('#calendar-mobile-multiple').asDatepicker({
|
||||
mode: 'multiple',
|
||||
mobileMode: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.asDatepicker').asDatepicker();
|
||||
$('.calendar-multiple').asDatepicker({mode: 'multiple', calendars: 3});
|
||||
|
||||
$('#calendar-api-displayMode').asDatepicker({displayMode: 'inline'});
|
||||
|
||||
$('#calendar-api-show-click').click(function(){
|
||||
$('#calendar-api-show').asDatepicker('show');
|
||||
return false;
|
||||
});
|
||||
$('#calendar-api-hide-click').click(function(){
|
||||
$('#calendar-api-hide').asDatepicker('hide');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-multipleClear-click').click(function() {
|
||||
$("#calendar-api-multipleClear").asDatepicker('multipleClear');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-getDate-click').click(function() {
|
||||
var html = '<div>' + $('#calendar-api-getDate').asDatepicker('getDate') + '</div>';
|
||||
$(html).prependTo($('#api-getDate-info'));
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-getDate-format-click').click(function() {
|
||||
var html = '<div>' + $('#calendar-api-getDate-format').asDatepicker('getDate', 'yyyy-mm-dd') + '</div>';
|
||||
$(html).prependTo($('#api-getDate-format-info'));
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-update-click').click(function() {
|
||||
$('#calendar-api-update').asDatepicker('update', {mode: 'range'});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
<!DOCTYPE html>
|
||||
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
|
||||
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
|
||||
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
|
||||
<!--[if gt IE 8]><!-->
|
||||
<html class="no-js">
|
||||
<!--<![endif]-->
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>多功能jQuery日期控件asDatepicker - 素材家园（www.sucaijiayuan.com）</title>
|
||||
<meta name="description" content="">
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="css/normalize.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/prism.css">
|
||||
<link rel="stylesheet" href="../css/asDatepicker.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="toc"></div>
|
||||
<div class="container">
|
||||
<h1>jQuery.asDatepicker</h1>
|
||||
<section>
|
||||
<h2>Examples</h2>
|
||||
<p>You can pass these options as key/value object to $.asDatepicker() method. </p>
|
||||
<section>
|
||||
<h3>default single</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar").asDatepicker();
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<!-- <input type="text" id="calendar" data-range-mode="section" data-selectable-year="2001>2010,2013,2015>2018"> -->
|
||||
<input type="text" id="calendar">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>range</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar2">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar2").asDatepicker({mode: 'range'});
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar2" style="width:170px;">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>multiple</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar3">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar3").asDatepicker({mode: 'multiple', calendars: '4'});
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar3">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Data attributes</h3>
|
||||
<p>Any option of the asDatepicker can also be set via data-attributes.</p>
|
||||
<p>Such as:</p>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar4" data-mode="range" data-range-mode="section" data-selectable-year="2001>2010,2012,2014>2016">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("#calendar4").asDatepicker();
|
||||
});
|
||||
<script></code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar4" data-mode="range" data-range-mode="section" data-selectable-year="2001>2010,2012,2014>2016">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Mobile Single</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar-mobile-single">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#calendar-mobile-single').asDatepicker({
|
||||
mobileMode: true
|
||||
});
|
||||
});
|
||||
<script>
|
||||
</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-mobile-single">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Mobile Range</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar-mobile-range">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#calendar-mobile-range').asDatepicker({
|
||||
mode: 'range',
|
||||
mobileMode: true
|
||||
});
|
||||
});
|
||||
<script>
|
||||
</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-mobile-range">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>Mobile Multiple</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
<input type="text" id="calendar-mobile-multiple">
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$('#calendar-mobile-multiple').asDatepicker({
|
||||
mode: 'multiple',
|
||||
mobileMode: true
|
||||
});
|
||||
});
|
||||
<script>
|
||||
</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-mobile-multiple">
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Keyboard navigation</h2>
|
||||
<p> <span>left arrow ----- </span> highlights previous day </p>
|
||||
<p> <span>right arrow ----- </span> highlights next day </p>
|
||||
<p> <span>up arrow ----- </span> highlights same day from the previous week </p>
|
||||
<p> <span>down arrow ----- </span> highlights same day from the next week </p>
|
||||
<p> <span>ctrl + left arrow ----- </span> navigates to previous month </p>
|
||||
<p> <span>ctrl + right arrow ----- </span> navigates to next month </p>
|
||||
<p> <span>ctrl + up arrow ----- </span> navigates to higher view </p>
|
||||
<p> <span>ctrl + down arrow ----- </span> navigates to lower view </p>
|
||||
<p> <span>alt + left arrow ----- </span> focus in previous calendar </p>
|
||||
<p> <span>alt + right arrow ----- </span> focus in next calendar </p>
|
||||
<p> <span>enter ----- </span> if in "days" view selects the highlighted day. In other views navigates to a lower view </p>
|
||||
<p> <span>esc ----- </span> closes the popup </p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Available options</h2>
|
||||
<p>You can pass these options as key/value object to $.asDatepicker() method. </p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>API</h2>
|
||||
<section>
|
||||
<h3>DisplayMode</h3>
|
||||
<p>With default dropdown and inline</p>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$("#calendar-api-displayMode").asDatepicker({displayMode: 'inline'});</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" id="calendar-api-displayMode">
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>show()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-show').asDatepicker('show');</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" class="asDatepicker" id="calendar-api-show">
|
||||
<a href="#" id="calendar-api-show-click">Click to show calendar</a> </div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>hide()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-show').asDatepicker('hide');</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" class="asDatepicker" id="calendar-api-hide">
|
||||
<a href="#" id="calendar-api-hide-click">Click to hide calendar</a> </div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>multipleClear()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-multipleClear').asDatepicker('multipleClear');</code></pre>
|
||||
<div class="example">
|
||||
<input type="text" class="calendar-multiple" id="calendar-api-multipleClear">
|
||||
<button id="api-multipleClear-click">Clear</button>
|
||||
</div>
|
||||
</section>
|
||||
<section>
|
||||
<h3>getWrap()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$.asDatepicker('getWrap');</code></pre>
|
||||
<div class="example">
|
||||
<p>Returns the wrapper of the calendar.</p>
|
||||
</div>
|
||||
<section>
|
||||
<h3>getInput()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$.asDatepicker('getInput');</code></pre>
|
||||
<div class="example"> Returns the input field. </div>
|
||||
<section>
|
||||
<h3>getDate()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-getDate').asDatepicker('getDate');</code></pre>
|
||||
<div class="example">
|
||||
<p>Returns the currently selected date.</p>
|
||||
<input type="text" class="asDatepicker" id="calendar-api-getDate">
|
||||
<button id="api-getDate-click">getDate</button>
|
||||
</div>
|
||||
<div class="example info">
|
||||
<div class="content" id="api-getDate-info"></div>
|
||||
</div>
|
||||
<section>
|
||||
<h3>getDate(format)</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-getDate-format').asDatepicker('getDate', 'yyyy-mm-dd');</code></pre>
|
||||
<div class="example">
|
||||
<p>Returns the current date, formatted with the pattern given as the argument.</p>
|
||||
<input type="text" class="asDatepicker" id="calendar-api-getDate-format">
|
||||
<button id="api-getDate-format-click">getDate</button>
|
||||
</div>
|
||||
<div class="example info">
|
||||
<div class="content" id="api-getDate-format-info"></div>
|
||||
</div>
|
||||
<section>
|
||||
<h3>update()</h3>
|
||||
<pre class="has-example"><code class="language-markup">
|
||||
$('#calendar-api-update').asDatepicker();
|
||||
$('#calendar-api-update').asDatepicker('update', {mode: 'range'});</code></pre>
|
||||
<div class="example">
|
||||
<p>Sets one or more options for the asDatepicker.</p>
|
||||
<input type="text" class="asDatepicker" id="calendar-api-update">
|
||||
<button id="api-update-click">update</button>
|
||||
</div>
|
||||
<section> </section>
|
||||
<section>
|
||||
<h2>Events</h2>
|
||||
<section>
|
||||
<h3>on_show</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_before_show</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_hide</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_change</h3>
|
||||
</section>
|
||||
<section>
|
||||
<h3>on_render</h3>
|
||||
</section>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Skin</h2>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Location</h2>
|
||||
</section>
|
||||
</div>
|
||||
<script src="js/jquery.js"></script>
|
||||
<script src="js/jquery.mobile.custom.js"></script>
|
||||
<script src="js/jquery.toc.min.js"></script>
|
||||
<script src="js/prism.js"></script>
|
||||
<script src="../js/jquery-asDatepicker.js"></script>
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
(function(){
|
||||
$('#toc').toc();
|
||||
})();
|
||||
$("#calendar").asDatepicker({
|
||||
namespace: 'calendar',
|
||||
lang: 'zh',
|
||||
position: 'bottom'
|
||||
});
|
||||
|
||||
$("#calendar2").asDatepicker({
|
||||
mode: 'range',
|
||||
namespace: 'calendar',
|
||||
lang: 'zh',
|
||||
position: 'bottom'
|
||||
});
|
||||
|
||||
$("#calendar3").asDatepicker({
|
||||
mode: 'multiple',
|
||||
calendars: 4,
|
||||
});
|
||||
|
||||
$("#calendar4").asDatepicker();
|
||||
|
||||
$('#calendar-mobile-single').asDatepicker({
|
||||
mobileMode: true
|
||||
});
|
||||
$('#calendar-mobile-range').asDatepicker({
|
||||
mode: 'range',
|
||||
mobileMode: true
|
||||
});
|
||||
$('#calendar-mobile-multiple').asDatepicker({
|
||||
mode: 'multiple',
|
||||
mobileMode: true
|
||||
});
|
||||
|
||||
|
||||
|
||||
$('.asDatepicker').asDatepicker();
|
||||
$('.calendar-multiple').asDatepicker({mode: 'multiple', calendars: 3});
|
||||
|
||||
$('#calendar-api-displayMode').asDatepicker({displayMode: 'inline'});
|
||||
|
||||
$('#calendar-api-show-click').click(function(){
|
||||
$('#calendar-api-show').asDatepicker('show');
|
||||
return false;
|
||||
});
|
||||
$('#calendar-api-hide-click').click(function(){
|
||||
$('#calendar-api-hide').asDatepicker('hide');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-multipleClear-click').click(function() {
|
||||
$("#calendar-api-multipleClear").asDatepicker('multipleClear');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-getDate-click').click(function() {
|
||||
var html = '<div>' + $('#calendar-api-getDate').asDatepicker('getDate') + '</div>';
|
||||
$(html).prependTo($('#api-getDate-info'));
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-getDate-format-click').click(function() {
|
||||
var html = '<div>' + $('#calendar-api-getDate-format').asDatepicker('getDate', 'yyyy-mm-dd') + '</div>';
|
||||
$(html).prependTo($('#api-getDate-format-info'));
|
||||
return false;
|
||||
});
|
||||
|
||||
$('#api-update-click').click(function() {
|
||||
$('#calendar-api-update').asDatepicker('update', {mode: 'range'});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,9 +1,9 @@
|
||||
jQuery(function($) {
|
||||
$.asDatepicker.localize("zh", {
|
||||
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
|
||||
daysShort: ["日", "一", "二", "三", "四", "五", "六"],
|
||||
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||||
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
|
||||
caption_format: 'yyyy年m月dd日'
|
||||
});
|
||||
jQuery(function($) {
|
||||
$.asDatepicker.localize("zh", {
|
||||
days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
|
||||
daysShort: ["日", "一", "二", "三", "四", "五", "六"],
|
||||
months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
||||
monthsShort: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
|
||||
caption_format: 'yyyy年m月dd日'
|
||||
});
|
||||
})
|
||||
@@ -1,317 +1,317 @@
|
||||
//========================== core ==========================
|
||||
|
||||
@namespace: calendar;
|
||||
|
||||
@mobileWrapWidth: 80%;
|
||||
@mobileWrapHeight: 80%;
|
||||
|
||||
@contentWidth: 210px;
|
||||
@contentHeight: 230px;
|
||||
|
||||
|
||||
.@{namespace} {
|
||||
&-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
width: @contentWidth;
|
||||
height: @contentHeight;
|
||||
background-color: white;
|
||||
|
||||
&.@{namespace}_days {
|
||||
> .@{namespace}-days {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.@{namespace}_months {
|
||||
.@{namespace}-months {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.@{namespace}_years {
|
||||
.@{namespace}-years {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-days, &-months, &-years, &-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-row, &-head {
|
||||
display: table;
|
||||
width: 100%;
|
||||
> span {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
> div {
|
||||
display: table-cell;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-prev, &-next {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&-days, &-months, &-years {
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
&-head {
|
||||
height: 13%;
|
||||
span {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
height: 87%;
|
||||
.@{namespace}-row {
|
||||
height: 100% / 6;
|
||||
}
|
||||
span {
|
||||
width: 14.28%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
&.@{namespace}_otherMonth, &.@{namespace}_untouchable {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-months, &-years {
|
||||
.@{namespace}-row {
|
||||
height: 25%;
|
||||
}
|
||||
span {
|
||||
height: 100%;
|
||||
width: 33.3%;
|
||||
cursor: pointer;
|
||||
&.@{namespace}_untouchable {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&_show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
&, & *:focus { outline: none; }
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.@{namespace}_isMobile {
|
||||
z-index: 99999;
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
line-height: 1;
|
||||
.@{namespace} {
|
||||
&-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
left: 0;
|
||||
}
|
||||
&-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
&.@{namespace}_show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
height: 11%;
|
||||
}
|
||||
&-days, &-months, &-years {
|
||||
height: 78%;
|
||||
}
|
||||
&-buttons {
|
||||
display: table;
|
||||
height: 11%;
|
||||
width: 100%;
|
||||
> div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-cover {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//========================== skin ==========================
|
||||
|
||||
.@{namespace} {
|
||||
&-input {
|
||||
border: 1px solid green;
|
||||
}
|
||||
&-icon {
|
||||
background-color: gray;
|
||||
border: 1px solid green;
|
||||
}
|
||||
&_active {
|
||||
.@{namespace} {
|
||||
&-input {
|
||||
border: 1px solid red;
|
||||
}
|
||||
&-icon {
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
background-color: white;
|
||||
border: 1px solid rgb(235, 235, 235);
|
||||
color: rgb(119, 119, 119);
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Proxima Nova';
|
||||
span {
|
||||
border: 1px dashed transparent;
|
||||
&.@{namespace}_active {
|
||||
background-color: rgb(50, 184, 226) !important;
|
||||
color: white !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
|
||||
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
&.@{namespace}_otherMonth, &.@{namespace}_untouchable {
|
||||
color: rgb(200, 200, 200);
|
||||
background-color: inherit;
|
||||
&:hover, &:active, &.@{namespace}_active {
|
||||
background-color: inherit;
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
}
|
||||
&.@{namespace}_inRange {
|
||||
background-color: rgb(224, 244, 251);
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
&.@{namespace}_otherMonth.@{namespace}_inRange {
|
||||
&:hover {
|
||||
background-color: rgb(224, 244, 251);
|
||||
}
|
||||
}
|
||||
&.@{namespace}_focus {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: rgb(50, 184, 226);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
border-bottom: 1px solid rgb(235, 235, 235);
|
||||
}
|
||||
&-prev, &-next {
|
||||
color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
&-prev {
|
||||
background-image: url('../images/calendar-prev.png');
|
||||
&.@{namespace}_blocked, &.@{namespace}_blocked:hover{
|
||||
background-image: none;
|
||||
cursor: auto;
|
||||
}
|
||||
&:hover {
|
||||
background-image: url('../images/calendar-prev-hover.png');
|
||||
}
|
||||
}
|
||||
|
||||
&-next {
|
||||
background-image: url('../images/calendar-next.png');
|
||||
&.@{namespace}_blocked, &.@{namespace}_blocked:hover{
|
||||
background-image: none;
|
||||
cursor: auto;
|
||||
}
|
||||
&:hover {
|
||||
background-image: url('../images/calendar-next-hover.png');
|
||||
}
|
||||
}
|
||||
&-caption {
|
||||
color: rgb(105, 105, 105);
|
||||
&:hover {
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
&.@{namespace}_blocked, &.@{namespace}_blocked:hover {
|
||||
color: rgb(105, 105, 105);
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
&-head {
|
||||
background-color: rgb(246, 246, 246);
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
span {
|
||||
-webkit-box-shadow: inset 0 1px 0 rgb(251, 251, 251);
|
||||
-moz-box-shadow: inset 0 1px 0 rgb(251, 251, 251);
|
||||
box-shadow: inset 0 1px 0 rgb(251, 251, 251);
|
||||
}
|
||||
}
|
||||
&-body, &-months, &-years {
|
||||
span {
|
||||
&:hover {
|
||||
background-color: rgb(224, 244, 251);
|
||||
}
|
||||
}
|
||||
padding: 6px;
|
||||
}
|
||||
&-buttons {
|
||||
border-top: 1px solid rgb(235, 235, 235);
|
||||
}
|
||||
|
||||
//========================== core ==========================
|
||||
|
||||
@namespace: calendar;
|
||||
|
||||
@mobileWrapWidth: 80%;
|
||||
@mobileWrapHeight: 80%;
|
||||
|
||||
@contentWidth: 210px;
|
||||
@contentHeight: 230px;
|
||||
|
||||
|
||||
.@{namespace} {
|
||||
&-content {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
white-space: normal;
|
||||
width: @contentWidth;
|
||||
height: @contentHeight;
|
||||
background-color: white;
|
||||
|
||||
&.@{namespace}_days {
|
||||
> .@{namespace}-days {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.@{namespace}_months {
|
||||
.@{namespace}-months {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.@{namespace}_years {
|
||||
.@{namespace}-years {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-days, &-months, &-years, &-buttons {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-row, &-head {
|
||||
display: table;
|
||||
width: 100%;
|
||||
> span {
|
||||
display: table-cell;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
&-header {
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
> div {
|
||||
display: table-cell;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&-prev, &-next {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
&-caption {
|
||||
width: 60%;
|
||||
}
|
||||
|
||||
&-days, &-months, &-years {
|
||||
height: 85%;
|
||||
}
|
||||
|
||||
&-head {
|
||||
height: 13%;
|
||||
span {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
height: 87%;
|
||||
.@{namespace}-row {
|
||||
height: 100% / 6;
|
||||
}
|
||||
span {
|
||||
width: 14.28%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
&.@{namespace}_otherMonth, &.@{namespace}_untouchable {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-months, &-years {
|
||||
.@{namespace}-row {
|
||||
height: 25%;
|
||||
}
|
||||
span {
|
||||
height: 100%;
|
||||
width: 33.3%;
|
||||
cursor: pointer;
|
||||
&.@{namespace}_untouchable {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&_hide {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
&_show {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&-wrap {
|
||||
white-space: nowrap;
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
&, & *:focus { outline: none; }
|
||||
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
&.@{namespace}_isMobile {
|
||||
z-index: 99999;
|
||||
position: fixed;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
line-height: 1;
|
||||
.@{namespace} {
|
||||
&-title {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: -1.5em;
|
||||
left: 0;
|
||||
}
|
||||
&-content {
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
&.@{namespace}_show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
height: 11%;
|
||||
}
|
||||
&-days, &-months, &-years {
|
||||
height: 78%;
|
||||
}
|
||||
&-buttons {
|
||||
display: table;
|
||||
height: 11%;
|
||||
width: 100%;
|
||||
> div {
|
||||
display: table-cell;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-cover {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: black;
|
||||
opacity: 0.5;
|
||||
z-index: 9999;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//========================== skin ==========================
|
||||
|
||||
.@{namespace} {
|
||||
&-input {
|
||||
border: 1px solid green;
|
||||
}
|
||||
&-icon {
|
||||
background-color: gray;
|
||||
border: 1px solid green;
|
||||
}
|
||||
&_active {
|
||||
.@{namespace} {
|
||||
&-input {
|
||||
border: 1px solid red;
|
||||
}
|
||||
&-icon {
|
||||
border: 1px solid red;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
background-color: white;
|
||||
border: 1px solid rgb(235, 235, 235);
|
||||
color: rgb(119, 119, 119);
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-family: 'Proxima Nova';
|
||||
span {
|
||||
border: 1px dashed transparent;
|
||||
&.@{namespace}_active {
|
||||
background-color: rgb(50, 184, 226) !important;
|
||||
color: white !important;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
|
||||
text-shadow: 0 2px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
&.@{namespace}_otherMonth, &.@{namespace}_untouchable {
|
||||
color: rgb(200, 200, 200);
|
||||
background-color: inherit;
|
||||
&:hover, &:active, &.@{namespace}_active {
|
||||
background-color: inherit;
|
||||
color: rgb(200, 200, 200);
|
||||
}
|
||||
}
|
||||
&.@{namespace}_inRange {
|
||||
background-color: rgb(224, 244, 251);
|
||||
&:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
&.@{namespace}_otherMonth.@{namespace}_inRange {
|
||||
&:hover {
|
||||
background-color: rgb(224, 244, 251);
|
||||
}
|
||||
}
|
||||
&.@{namespace}_focus {
|
||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||
color: rgb(50, 184, 226);
|
||||
}
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
border-bottom: 1px solid rgb(235, 235, 235);
|
||||
}
|
||||
&-prev, &-next {
|
||||
color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
&-prev {
|
||||
background-image: url('../images/calendar-prev.png');
|
||||
&.@{namespace}_blocked, &.@{namespace}_blocked:hover{
|
||||
background-image: none;
|
||||
cursor: auto;
|
||||
}
|
||||
&:hover {
|
||||
background-image: url('../images/calendar-prev-hover.png');
|
||||
}
|
||||
}
|
||||
|
||||
&-next {
|
||||
background-image: url('../images/calendar-next.png');
|
||||
&.@{namespace}_blocked, &.@{namespace}_blocked:hover{
|
||||
background-image: none;
|
||||
cursor: auto;
|
||||
}
|
||||
&:hover {
|
||||
background-image: url('../images/calendar-next-hover.png');
|
||||
}
|
||||
}
|
||||
&-caption {
|
||||
color: rgb(105, 105, 105);
|
||||
&:hover {
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
&.@{namespace}_blocked, &.@{namespace}_blocked:hover {
|
||||
color: rgb(105, 105, 105);
|
||||
cursor: auto;
|
||||
}
|
||||
}
|
||||
&-head {
|
||||
background-color: rgb(246, 246, 246);
|
||||
padding-left: 6px;
|
||||
padding-right: 6px;
|
||||
span {
|
||||
-webkit-box-shadow: inset 0 1px 0 rgb(251, 251, 251);
|
||||
-moz-box-shadow: inset 0 1px 0 rgb(251, 251, 251);
|
||||
box-shadow: inset 0 1px 0 rgb(251, 251, 251);
|
||||
}
|
||||
}
|
||||
&-body, &-months, &-years {
|
||||
span {
|
||||
&:hover {
|
||||
background-color: rgb(224, 244, 251);
|
||||
}
|
||||
}
|
||||
padding: 6px;
|
||||
}
|
||||
&-buttons {
|
||||
border-top: 1px solid rgb(235, 235, 235);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user