Skip to content

A
amazeui

Miykael_xxm / amazeui

通知 1
Star 0
Fork 0
A
amazeui

体验新版 GitCode，发现更多精彩内容 >>

提交 cb89e018 编写于 作者: Hzp_D's avatar Hzp_D
浏览文件
操作

update datepicker js less doc

上级 0c946e1f
隐藏空白更改
内联 并排
Showing with 604 addition and 73 deletion
docs/javascript/datepicker.md
浏览文件 @ cb89e018
......@@ -8,18 +8,20 @@
在 `input` 标签上增加 `data-am-datepicker` 属性，调用日期插件。
`````html
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" value="2014/12/07" data-am-datepicker /></p>
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" data-am-datepicker /></p>
`````
```html
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" value="2014/12/07" data-am-datepicker /></p>
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" data-am-datepicker /></p>
```
### 组件结合
结合 `input-group` 使用，父类添加 Class `am-datepicker-date` ，需要给非 `input` 的触发元素，需要增加 Class `am-datepicker-add-on`。
`````html
<div class="am-input-group am-datepicker-date" data-am-datepicker>
<input type="text" class="am-form-field" readonly>
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'dd-mm-yyyy'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
......@@ -27,27 +29,353 @@
`````
```html
<div class="am-input-group am-datepicker-date" data-am-datepicker>
<input type="text" class="am-form-field" readonly>
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'dd-mm-yyyy'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div>
```
### 参数设置
### 主题颜色
- format: 日期格式，默认为 `yyyy/mm/dd` ，符合中文日期选择，可以选择 `yy/mm/dd` 、`mm/dd` 或者英文日期格式 `dd/mm/yyyy`、`dd/mm/yy`、`dd/mm`等，中间分隔符可以使用 `/`、`-`、` `等。
- language: 语言选择，默认为中文 `zh`，目前支持两种：`zh`、`en` 语言选择，支持多语言，源码中扩展。
`````html
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" data-am-datepicker="{theme: 'success'}" /></p>
`````
```html
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" data-am-datepicker="{theme: 'success'}" /></p>
```
### 查看模式
设置参数 `viewMode` 设置开始查看模式。
`````html
<p><input type="text" class="am-form-field am-radius" placeholder="默认日期格式" data-am-datepicker /></p>
<p><input type="text" class="am-form-field am-radius" placeholder="yy-mm-dd 日期格式" data-am-datepicker='{format: "yy-mm-dd"}' /></p>
<p><input type="text" class="am-form-field am-radius" placeholder="dd/mm/yyyy language:en" data-am-datepicker='{format: "dd/mm/yyyy", language: "en"}' /></p>
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div>
`````
```html
<p><input type="text" class="am-form-field am-radius" placeholder="默认日期格式" data-am-datepicker /></p>
<p><input type="text" class="am-form-field am-radius" placeholder="yy/mm/dd 日期格式" data-am-datepicker='{format: "yy-mm-dd"}' /></p>
<p><input type="text" class="am-form-field am-radius" placeholder="dd/mm/yyyy language:en" data-am-datepicker='{format: "dd/mm/yyyy", language: "en"}' /></p>
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm-dd', viewMode: 'years'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div>
```
### 视图模式
设置参数 `minViewMode` 设置视图模式的限制。
`````html
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm', viewMode: 'years', minViewMode: 'months'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div>
`````
```html
<div class="am-input-group am-datepicker-date" data-am-datepicker="{format: 'yyyy-mm', viewMode: 'years', minViewMode: 'months'}">
<input type="text" class="am-form-field" placeholder="日历组件" readonly>
<span class="am-input-group-btn am-datepicker-add-on">
<button class="am-btn am-btn-default" type="button"><span class="am-icon-calendar"></span> </button>
</span>
</div>
```
### 自定义事件
监听自定义事件 `changeDate` 通过回调处理业务逻辑，获取 data 属性，`am-date` 得到改变的时间。
`````html
<div class="am-alert am-alert-danger" id="my-alert" style="display: none">
<p>开始时间应小于结束时间！</p>
</div>
<div class="am-g">
<div class="am-u-sm-6">
<button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始时间</button><span id="my-startDate">2014-12-20</span>
</div>
<div class="am-u-sm-6">
<button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束时间</button><span id="my-endDate">2014-12-25</span>
</div>
</div>
<script>
$(function() {
var startDate = new Date(2014, 11, 20);
var endDate = new Date(2014, 11, 25);
var $alert = $('#my-alert');
$('#my-start')
.datepicker()
.on('changeDate.datepicker.amui', function(event) {
if (event.date.valueOf() > endDate.valueOf()) {
$alert.find('p').text('开始时间应小于结束时间！').end().show();
} else {
$alert.hide();
startDate = new Date(event.date);
$('#my-startDate').text($('#my-start').data('am-date'));
}
$(this).datepicker('hide');
})
$('#my-end')
.datepicker()
.on('changeDate.datepicker.amui', function(event) {
if (event.date.valueOf() < startDate.valueOf()) {
$alert.find('p').text('结束时间应大于开始时间！').end().show();
} else {
$alert.hide();
endDate = new Date(event.date);
$('#my-endDate').text($('#my-end').data('am-date'));
}
$(this).datepicker('hide');
})
})
</script>
`````
```html
<div class="am-alert am-alert-danger" id="my-alert" style="display: none">
<p>开始时间应小于结束时间！</p>
</div>
<div class="am-g">
<div class="am-u-sm-6">
<button type="button" class="am-btn am-btn-default am-margin-right" id="my-start">开始时间</button><span id="my-startDate">2014-12-20</span>
</div>
<div class="am-u-sm-6">
<button type="button" class="am-btn am-btn-default am-margin-right" id="my-end">结束时间</button><span id="my-endDate">2014-12-25</span>
</div>
</div>
<script>
$(function() {
var startDate = new Date(2014, 11, 20);
var endDate = new Date(2014, 11, 25);
var $alert = $('#my-alert');
$('#my-start')
.datepicker()
.on('changeDate.datepicker.amui', function(event) {
if (event.date.valueOf() > endDate.valueOf()) {
$alert.find('p').text('开始时间应小于结束时间！').end().show();
} else {
$alert.hide();
startDate = new Date(event.date);
$('#my-startDate').text($('#my-start').data('am-date'));
}
$(this).datepicker('hide');
})
$('#my-end')
.datepicker()
.on('changeDate.datepicker.amui', function(event) {
if (event.date.valueOf() < startDate.valueOf()) {
$alert.find('p').text('结束时间应大于开始时间！').end().show();
} else {
$alert.hide();
endDate = new Date(event.date);
$('#my-endDate').text($('#my-end').data('am-date'));
}
$(this).datepicker('hide');
})
})
</script>
```
### 设置禁用时间
`````html
<div class="am-g">
<div class="am-u-sm-6">
设置禁用时间<br/>
<p><input type="text" class="am-form-field am-radius" placeholder="今天之前的时间被禁用" id="my-start-2"/></p>
</div>
<div class="am-u-sm-6">
禁用时间<br/>
<p><input type="text" class="am-form-field am-radius" id="my-end-2" /></p>
</div>
</div>
<script>
$(function() {
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var $myStart2 = $('#my-start-2');
var checkin = $myStart2.datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'am-disabled' : '';
}
}).on('changeDate.datepicker.amui', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#my-end-2')[0].focus();
}).data('amui.datepicker');
var checkout = $('#my-end-2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'am-disabled' : '';
}
}).on('changeDate.datepicker.amui', function(ev) {
checkout.hide();
}).data('amui.datepicker');
})
</script>
`````
```html
<div class="am-g">
<div class="am-u-sm-6">
设置禁用时间<br/>
<p><input type="text" class="am-form-field am-radius" placeholder="今天之前的时间被禁用" id="my-start-2"/></p>
</div>
<div class="am-u-sm-6">
禁用时间<br/>
<p><input type="text" class="am-form-field am-radius" id="my-end-2" /></p>
</div>
</div>
<script>
$(function() {
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var $myStart2 = $('#my-start-2');
var checkin = $myStart2.datepicker({
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'am-disabled' : '';
}
}).on('changeDate.datepicker.amui', function(ev) {
if (ev.date.valueOf() > checkout.date.valueOf()) {
var newDate = new Date(ev.date)
newDate.setDate(newDate.getDate() + 1);
checkout.setValue(newDate);
}
checkin.hide();
$('#my-end-2')[0].focus();
}).data('amui.datepicker');
var checkout = $('#my-end-2').datepicker({
onRender: function(date) {
return date.valueOf() <= checkin.date.valueOf() ? 'am-disabled' : '';
}
}).on('changeDate.datepicker.amui', function(ev) {
checkout.hide();
}).data('amui.datepicker');
})
</script>
```
## 调用方式
### 参数说明
- format: 日期格式，默认为 `yyyy/mm/dd` ，符合中文日期选择，可以选择 `yy/mm/dd` 、`mm/dd` 或者英文日期格式 `dd/mm/yyyy`、`dd/mm/yy`、`dd/mm`等，中间分隔符可以使用 `/`、`-`、` `等。
- viewMode: type `string`|`integer` 默认为 0 ，设置开始查看模式，接受 `days`、`months`、`years`或者传递 `0`、`1`、`2` 分别对应。
- minViewMode: type `string`|`integer` 默认为 0 ，设置视图模式的限制，接受 `days`、`months`、`years`或者传递 `0`、`1`、`2` 分别对应。
- onRender: 设置禁用日期的回调函数，判定是否禁用设置 className 为 `am-disabled`。
- theme: 设置日历主题，接受 `success`、`danger`、`warning` 值，对应为绿色、红色、橘色，默认为蓝色。
设置`viewMode` 和 `minViewMode` 需要注意日期格式`format`的设置。
### 通过 Data API
添加 `data-am-datepicker` 属性，并设置相关选项。
```html
<input class="" data-am-datepicker="{format: 'yyyy-mm'}"/>
```
#### JS 调用
通过 `$().datepicker(options)` 调用。
```html
$('#my-datepicker').datepicker({format: 'yyyy-mm'});
```
#### 方法说明
<table class="am-table am-table-bd am-table-striped">
<thead>
<tr>
<th>方法名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.datepicker('show')</code></td>
<td>显示日历</td>
</tr>
<tr>
<td><code>.datepicker('hide')</code></td>
<td>隐藏日历</td>
</tr>
<tr>
<td><code>.datepicker('place')</code></td>
<td>更新调用<code>datepicker</code>的相对位置</td>
</tr>
<tr>
<td><code>.datepicker('setValue', value)</code></td>
<td>设置<code>Datepicker</code>新值</td>
</tr>
</tbody>
</table>
#### 事件说明
选择日期，日期改变时，查看控制台会输出选择的日期。
`````html
<p><input type="text" class="am-form-field am-radius" placeholder="日历组件" id="doc-datepicker"/></p>
<script>
$(function() {
$('#doc-datepicker')
.datepicker()
.on('changeDate.datepicker.amui', function(event) {
console.log(event.date);
})
})
</script>
`````
```javascript
$(function() {
$('#doc-datepicker')
.datepicker()
.on('changeDate.datepicker.amui', function(event) {
console.log(event.date);
})
})
```
<table class="am-table am-table-bd am-table-striped">
<thead>
<tr>
<th>事件名称</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>changeDate.datepicker.amui</code></td>
<td>日期改变时触发</td>
</tr>
</tbody>
</table>
## 语言扩展
现目前支持英语和中文，获取当前浏览器语言为首选语言，要支持更多语言在 `Datepicker.locales` 中扩展。
\ No newline at end of file
js/ui.datepicker.js
浏览文件 @ cb89e018
......@@ -2,6 +2,7 @@
var $ = require('jquery');
var UI = require('./core');
var $doc = $(document);
/**
* bootstrap-datepicker.js
......@@ -14,8 +15,9 @@ var UI = require('./core');
var Datepicker = function(element, options) {
this.element = $(element);
this.format = DPGlobal.parseFormat(options.format);
this.language = options.language;
this.element.data('am-date', options.date);
this.language = this.browserLanguage();
this.theme = options.theme;
this.picker = $(DPGlobal.template)
.appendTo('body')
.on({
......@@ -24,8 +26,8 @@ var Datepicker = function(element, options) {
});
this.isInput = this.element.is('input');
this.component = this.element.is('.am-datepicker-date') ? this.element.find('.am-datepicker-add-on') : false;
this.component = this.element.is('.am-datepicker-date') ?
this.element.find('.am-datepicker-add-on') : false;
if (this.isInput) {
this.element.on({
focus: $.proxy(this.show, this),
......@@ -77,6 +79,7 @@ var Datepicker = function(element, options) {
this.weekEnd = this.weekStart === 0 ? 6 : this.weekStart - 1;
this.onRender = options.onRender;
this.addTheme();
this.fillDow();
this.fillMonths();
this.update();
......@@ -130,7 +133,7 @@ Datepicker.prototype = {
if (this.component) {
this.element.find('input').prop('value', formated);
}
this.element.data('date', formated);
this.element.data('am-date', formated);
} else {
this.element.prop('value', formated);
}
......@@ -151,16 +154,43 @@ Datepicker.prototype = {
},
place: function() {
var offset = this.component ? this.component.offset() : this.element.offset();
var offset = this.component ?
this.component.offset() : this.element.offset();
var $width = this.component ?
this.component.width() : this.element.width();
var top = offset.top + this.height;
var left = offset.left;
var right = $doc.width() - offset.left - $width;
var isOutView = this.isOutView();
this.picker.removeClass('am-datepicker-right');
this.picker.removeClass('am-datepicker-up');
if ($doc.width() > 640) {
if (isOutView.outRight) {
this.picker.addClass('am-datepicker-right');
this.picker.css({
top: top,
left: 'auto',
right: right
});
return
}
if (isOutView.outBottom) {
this.picker.addClass('am-datepicker-up');
top = offset.top - this.picker.outerHeight(true);
}
} else {
left = 0;
}
this.picker.css({
top: offset.top + this.height + 10,
left: offset.left
top: top,
left: left
});
},
update: function(newDate) {
this.date = DPGlobal.parseDate(
typeof newDate === 'string' ? newDate : (this.isInput ? this.element.prop('value') : this.element.data('date')),
typeof newDate === 'string' ? newDate : (this.isInput ?
this.element.prop('value') : this.element.data('am-date')),
this.format
);
this.viewDate = new Date(this.date.getFullYear(),
......@@ -172,7 +202,7 @@ Datepicker.prototype = {
var dowCnt = this.weekStart;
var html = '<tr>';
while (dowCnt < this.weekStart + 7) {
html += '<th class="am-datepicker-dow">' + dates[this.language].daysMin[(dowCnt++) % 7] + '</th>';
html += '<th class="am-datepicker-dow">' + Datepicker.locales[this.language].daysMin[(dowCnt++) % 7] + '</th>';
}
html += '</tr>';
this.picker.find('.am-datepicker-days thead').append(html);
......@@ -182,13 +212,12 @@ Datepicker.prototype = {
var html = '';
var i = 0;
while (i < 12) {
html += '<span class="am-datepicker-month">' + dates[this.language].monthsShort[i++] + '</span>';
html += '<span class="am-datepicker-month">' + Datepicker.locales[this.language].monthsShort[i++] + '</span>';
}
this.picker.find('.am-datepicker-months td').append(html);
},
fill: function() {
var d = new Date(this.viewDate);
var year = d.getFullYear();
var month = d.getMonth();
......@@ -198,10 +227,10 @@ Datepicker.prototype = {
var day = DPGlobal.getDaysInMonth(prevMonth.getFullYear(), prevMonth.getMonth());
var daysSelect = this.picker.find('.am-datepicker-days .am-datepicker-select');
if (this.language === 'zh') {
daysSelect.text(year + dates[this.language].year[0] + ' ' + dates[this.language].months[month]);
if (this.language === 'zh_CN') {
daysSelect.text(year + Datepicker.locales[this.language].year[0] + ' ' + Datepicker.locales[this.language].months[month]);
} else {
daysSelect.text(dates[this.language].months[month] + ' ' + year);
daysSelect.text(Datepicker.locales[this.language].months[month] + ' ' + year);
}
prevMonth.setDate(day);
......@@ -263,7 +292,7 @@ Datepicker.prototype = {
year -= 1;
for (var i = -1; i < 11; i++) {
html += '<span class="year' + (i === -1 || i === 10 ? ' am-datepicker-old' : '') + (currentYear === year ? ' am-active' : '') + '">' + year + '</span>';
html += '<span class="' + (i === -1 || i === 10 ? ' am-datepicker-old' : '') + (currentYear === year ? ' am-active' : '') + '">' + year + '</span>';
year += 1;
}
yearCont.html(html);
......@@ -305,7 +334,7 @@ Datepicker.prototype = {
if (this.viewMode !== 0) {
this.date = new Date(this.viewDate);
this.element.trigger({
type: 'changeDate',
type: 'changeDate.datepicker.amui',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
});
......@@ -329,7 +358,7 @@ Datepicker.prototype = {
this.fill();
this.set();
this.element.trigger({
type: 'changeDate',
type: 'changeDate.datepicker.amui',
date: this.date,
viewMode: DPGlobal.modes[this.viewMode].clsName
});
......@@ -355,26 +384,65 @@ Datepicker.prototype = {
.hide()
.filter('.am-datepicker-' + DPGlobal.modes[this.viewMode].clsName)
.show();
},
isOutView: function() {
var offset = this.component ?
this.component.offset() : this.element.offset();
var isOutView = {
outRight: false,
outBottom: false
};
var $picker = this.picker;
var width = offset.left + $picker.outerWidth(true);
var height = offset.top + $picker.outerHeight(true) + this.element.innerHeight();
if (width > $doc.width()) {
isOutView.outRight = true;
}
if (height > $doc.height()) {
isOutView.outBottom = true;
}
return isOutView;
},
browserLanguage: function() {
var language = navigator.language && navigator.language.split('-');
language[1] = language[1].toUpperCase();
language = language.join('_');
if (!Object.prototype.hasOwnProperty.call(Datepicker.locales, language)) {
language = 'en_US';
}
return language;
},
addTheme: function() {
if (this.theme) {
this.picker.addClass('am-datepicker-' + this.theme);
}
}
};
Datepicker.DEFAULTS = {
format: 'yyyy/mm/dd',
language: 'zh',
weekStart: 0,
viewMode: 0,
minViewMode: 0
minViewMode: 0,
date: '',
theme: ''
};
var dates = {
en: {
// Datepicker locales
Datepicker.locales = {
en_US: {
days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
daysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
daysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'],
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
zh: {
zh_CN: {
days: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
daysShort: ['周日', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
daysMin: ['日', '一', '二', '三', '四', '五', '六', '日'],
......@@ -489,7 +557,7 @@ var DPGlobal = {
contTemplate: '<tbody><tr><td colspan="7"></td></tr></tbody>'
};
DPGlobal.template = '<div class="am-datepicker am-datepicker-dropdown">' +
DPGlobal.template = '<div class="am-datepicker am-datepicker-dropdown"><div class="am-datepicker-caret"></div>' +
'<div class="am-datepicker-days">' +
'<table class="am-datepicker-table">' +
DPGlobal.headTemplate +
......@@ -547,5 +615,4 @@ $.AMUI.datepicker = Datepicker;
module.exports = Datepicker;
// TODO: 1. 载入动画
// 2. 右边、下边超出屏幕处理
// 2. 组件结合 Bug
\ No newline at end of file
// 2. less 优化
less/ui.datepicker.less
浏览文件 @ cb89e018
......@@ -4,14 +4,27 @@
//
// Component: `.am-datepicker`
//
// Sub-objects: ``
// Sub-objects: `.am-datepicker-dropdown`
// `.am-datepicker-header`
// `.am-datepicker-day`
// `.am-datepicker-old`
// `.am-datepicker-new`
// `.am-datepicker-caret`
// `.am-datepicker-dow`
// `.am-datepicker-select`
// `.am-datepicker-next`
// `.am-datepicker-prev`
// `.am-datepicker-prev-icon`
// `.am-datepicker-next-icon`
//
// Modifiers: `.am-datepicker-flip`
// Modifiers: `.am-datepicker-success`
// `.am-datepicker-warning`
// `.am-datepicker-danger`
//
// States: `.am-active`
// `.am-disabled`
//
// Uses: Animation
// Uses:
//
// =============================================================================
......@@ -21,18 +34,81 @@
@datepicker-primary: @global-secondary;
@datepicker-bg: @white;
@datepicker-td-height: 44px;
@datepicker-td-height: 40px;
@datepicker-thead-height: 60px;
@datepicker-primary-light: fadeout(lighten(@datepicker-primary, 20%), 50%); // rgba(154, 217, 248, 0.5)
@datepicker-primary-light: fadeout(lighten(@datepicker-primary, 20%), 50%);
@datepicker-primary-dark: darken(@datepicker-primary, 20%);
@datepicker-td-active: darken(saturate(@datepicker-primary, 30%), 20%); // #0084c7
@datepicker-td-active: darken(saturate(@datepicker-primary, 30%), 20%);
@datepicker-td-new-old: saturate(lighten(@datepicker-primary, 18%), 15%);
@datepicker-td-disable: lighten(@datepicker-primary, 22%);
@datepicker-td-disable-bg: rgb(250, 250, 250);
@datepicker-width: @datepicker-td-height * 7;
@datepicker-span-width: @datepicker-width / 6;
@datepicker-span-width: @datepicker-width / 3;
@datepicker-color: #555;
@datepicker-td-hover: #F0F0F0;
// themes
@datepicker-success-color: @global-success;
@datepicker-warning-color: @global-warning;
@datepicker-danger-color: @global-danger;
@datepicker-td-hover: #F2F2F2;
.datepicker-theme(@color) {
@theme-primary: @color;
@theme-color-light: fadeout(lighten(@color, 20%), 50%);
@theme-color-dark: darken(@color, 20%);
@theme-color-active: darken(saturate(@color, 30%), 20%);
@theme-color-new-old: saturate(lighten(@color, 18%), 15%);
@theme-color-disable: lighten(@color, 22%);
tr.@{ns}datepicker-header {
background: @theme-primary;
}
td{
&.@{ns}datepicker-day.@{ns}disabled {
color: @theme-color-disable;
}
&.@{ns}datepicker-old,
&.@{ns}datepicker-new {
color: @theme-color-new-old;
}
&.@{ns}active,
&.@{ns}active:hover {
color: @theme-color-active;
}
span {
&.@{ns}datepicker-old {
color: @theme-color-new-old;
}
&.@{ns}active {
color: @theme-color-active;
}
}
}
.@{ns}datepicker-caret {
border-bottom-color: @theme-primary;
}
.@{ns}datepicker-dow {
color: @theme-color-dark;
}
.@{ns}datepicker-select,
.@{ns}datepicker-prev-icon,
.@{ns}datepicker-next-icon {
&:hover {
background: @theme-color-light;
color: @theme-color-dark;
}
}
}
.@{ns}datepicker {
top: 0;
......@@ -41,20 +117,11 @@
background: @datepicker-bg;
box-shadow: 0 0 10px #ccc;
padding-bottom: 10px;
margin-top: 10px;
width: @datepicker-width;
color: @datepicker-color;
display: none;
&:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-bottom-color: @datepicker-primary;
position: absolute;
top: -7px;
left: 6px;
}
.hook-datepicker;
>div {
display: none;
......@@ -64,7 +131,6 @@
}
tr.@{ns}datepicker-header {
height: @datepicker-td-height;
font-size: 1.8rem;
color: @white;
background: @datepicker-primary;
......@@ -82,21 +148,28 @@
}
td {
&.@{ns}datepicker-day:hover {
background: @datepicker-td-hover;
&.@{ns}datepicker-day {
height: @datepicker-td-height;
width: @datepicker-td-height;
&:hover {
background: @datepicker-td-hover;
height: @datepicker-td-height;
width: @datepicker-td-height;
}
}
&.@{ns}datepicker-day.disabled {
&.@{ns}datepicker-day.@{ns}disabled {
color: @datepicker-td-disable;
background: @datepicker-td-disable-bg;
}
&.@{ns}datepicker-old,
&.@{ns}datepicker-new {
color: @datepicker-td-disable;
color: @datepicker-td-new-old;
}
&.@{ns}active,
&.@{ns}active:hover {
border-radius: 2px;
color: @datepicker-td-active;
text-decoration: underline;
background: @datepicker-td-hover;
}
span {
......@@ -112,17 +185,37 @@
}
&.@{ns}active {
color: @datepicker-td-active;
text-decoration: underline;
background: @datepicker-td-hover;
}
&.@{ns}datepicker-old {
color: @datepicker-td-disable;
color: @datepicker-td-new-old;
}
}
}
}
.@{ns}datepicker-caret {
display: block!important;
.caret-up(7px, @datepicker-primary);
position: absolute;
top: -7px;
left: 6px;
.hook-datepicker-creat;
.@{ns}datepicker-right & {
left: auto;
right: 7px;
}
.@{ns}datepicker-up & {
top: auto;
bottom: -7px;
.caret-down(7px, #fff);
}
}
.@{ns}datepicker-dow {
color: @datepicker-primary-dark;
}
......@@ -173,11 +266,54 @@
}
}
.@{ns}datepicker-day {
height: @datepicker-td-height;
}
.@{ns}datepicker-dropdown {
position: absolute;
z-index: 1000;
}
@media @small-only {
.@{ns}datepicker {
width: 100%;
td {
span {
width: 33.33%;
}
}
}
.@{ns}datepicker-caret {
display: none!important;
}
.@{ns}datepicker-prev,
.@{ns}datepicker-next {
width: 44px;
height: 44px;
}
}
// Modifiers
// ====================================================================================
.@{ns}datepicker-success {
.datepicker-theme(@datepicker-success-color);
.hook-datepicker-success;
}
.@{ns}datepicker-danger {
.datepicker-theme(@datepicker-danger-color);
.hook-datepicker-danger;
}
.@{ns}datepicker-warning {
.datepicker-theme(@datepicker-warning-color);
.hook-datepicker-warning;
}
// Hooks
// ====================================================================================
.hook-datepicker() {}
.hook-datepicker-creat() {}
.hook-datepicker-success() {}
.hook-datepicker-danger() {}
.hook-datepicker-warning() {}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或