omiu - simple date picker
This commit is contained in:
张磊
parent
3043441ad1
commit
60758dd45e
|
|
@ -1,6 +1,6 @@
|
|||
import { WeElement, define, render } from 'omi'
|
||||
import '../../src/button'
|
||||
import '../../src/row'
|
||||
import '../../src/date-picker'
|
||||
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
|
||||
|
|
@ -27,75 +27,7 @@ define('my-app', class extends WeElement {
|
|||
render() {
|
||||
return (
|
||||
<div>
|
||||
<o-row class='row'>
|
||||
<col class='col' span={12}>col span 12</col>
|
||||
<col class='col' span={12}>col span 12</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
<col class='col' span={8}>col span 8</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={18}>col span 18</col>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={6}>col span 6</col>
|
||||
<col class='col' span={18}>col span 18</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
<col class='col' span={2}>2</col>
|
||||
</o-row>
|
||||
|
||||
<o-row class='row'>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
<col class='col' span={1}>1</col>
|
||||
</o-row>
|
||||
<o-date-picker></o-date-picker>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,48 +1,13 @@
|
|||
.weui-toast{
|
||||
position:fixed;
|
||||
z-index:5000;
|
||||
width:7.6em;
|
||||
min-height:7.6em;
|
||||
top:180px;
|
||||
left:50%;
|
||||
margin-left:-3.8em;
|
||||
background:rgba(17, 17, 17, 0.7);
|
||||
text-align:center;
|
||||
border-radius:5px;
|
||||
color:#FFFFFF;
|
||||
}
|
||||
.weui-icon_toast{
|
||||
margin:22px 0 0;
|
||||
display:block;
|
||||
}
|
||||
.weui-icon_toast.weui-icon-success-no-circle:before{
|
||||
color:#FFFFFF;
|
||||
font-size:55px;
|
||||
}
|
||||
.weui-icon_toast.weui-loading{
|
||||
margin:30px 0 0;
|
||||
width:38px;
|
||||
height:38px;
|
||||
vertical-align:baseline;
|
||||
}
|
||||
.weui-toast__content{
|
||||
margin:0 0 15px;
|
||||
.o-date-picker{
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
p{
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
|
||||
._out-date{
|
||||
color:#D1D1D1;
|
||||
}
|
||||
|
||||
.icon{
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
top:10px;
|
||||
}
|
||||
|
||||
.icon-l{
|
||||
margin-top: 15px;
|
||||
position: relative;
|
||||
top:10px;
|
||||
margin-bottom: 13px;
|
||||
._today{
|
||||
color:#07C160;
|
||||
}
|
||||
|
|
@ -2,31 +2,118 @@ import { define, WeElement, extractClass } from 'omi'
|
|||
import css from './_index.css'
|
||||
import '../icon'
|
||||
|
||||
define('o-toast', class extends WeElement {
|
||||
static defaultProps = {
|
||||
type: 'success',
|
||||
show: false
|
||||
}
|
||||
define('o-date-picker', class extends WeElement {
|
||||
|
||||
css() {
|
||||
return css
|
||||
}
|
||||
|
||||
render(props) {
|
||||
const cls = extractClass(props, 'weui-toast')
|
||||
const { type, show, children, iconSize, ...others } = props
|
||||
|
||||
return (
|
||||
<div style={{ display: show ? 'block' : 'none' }}>
|
||||
<div {...cls} {...others}>
|
||||
{type === 'success' ?
|
||||
<o-icon type={'check'} color='white' class='icon' scale={4} class="weui-icon_toast" />:
|
||||
<o-icon type={'loading'} rotate color='white' class='icon-l' scale={3} class="weui-icon_toast" />}
|
||||
|
||||
install() {
|
||||
this.now = new Date()
|
||||
this.year = this.now.getFullYear()
|
||||
this.month = this.now.getMonth()
|
||||
this.begin = getFirstDayWeek(this.year, this.month)
|
||||
this.count = getMonthDayCount(this.year, this.month)
|
||||
|
||||
this.preMonthDate = getPreMonth(this.now)
|
||||
this.preYear = this.preMonthDate.getFullYear()
|
||||
this.preMonth = this.preMonthDate.getMonth()
|
||||
this.preCount = getMonthDayCount(this.preYear, this.preMonth)
|
||||
|
||||
console.log(this.count)
|
||||
console.log(this.preCount)
|
||||
}
|
||||
|
||||
getDay(y, x) {
|
||||
if (y === 0) {
|
||||
if (x < this.begin) {
|
||||
return <td>{this.preCount - this.begin + x + 1}</td>
|
||||
} else {
|
||||
return <td>{x - this.begin + 1}</td>
|
||||
}
|
||||
} else {
|
||||
const temp = y * 7 + x - this.begin + 1
|
||||
if (temp <= this.count) {
|
||||
return <td>{temp}</td>
|
||||
} else {
|
||||
return <td>{temp - this.count}</td>
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render(props) {
|
||||
const arr = []
|
||||
for (let i = 0; i < 6; i++) {
|
||||
arr.push(<tr>
|
||||
{this.getDay(i, 0)}
|
||||
{this.getDay(i, 1)}
|
||||
{this.getDay(i, 2)}
|
||||
{this.getDay(i, 3)}
|
||||
{this.getDay(i, 4)}
|
||||
{this.getDay(i, 5)}
|
||||
{this.getDay(i, 6)}
|
||||
</tr>)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div class='o-date-picker'>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>日</th>
|
||||
<th>一</th>
|
||||
<th>二</th>
|
||||
<th>三</th>
|
||||
<th>四</th>
|
||||
<th>五</th>
|
||||
<th>六</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{arr}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p class="weui-toast_content">{children}</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
|
||||
//星期日是0
|
||||
function getFirstDayWeek(e, t) {
|
||||
var n = new Date(e, t, 1);
|
||||
return n.getDay()
|
||||
}
|
||||
|
||||
function getMonthDayCount(e, t) {
|
||||
var arr = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
|
||||
arr[1] = isLeapYear(e) ? 29 : 28;
|
||||
return arr[t];
|
||||
}
|
||||
|
||||
function isLeapYear(e) {
|
||||
return e % 400 == 0 || e % 100 != 0 && e % 4 == 0
|
||||
}
|
||||
|
||||
function getRowCount(day, count) {
|
||||
if (count - (7 - day) - 21 === 0) return 4;
|
||||
return count - (7 - day) - 21 > 7 ? 6 : 5;
|
||||
}
|
||||
|
||||
function getRowByDate(date) {
|
||||
var year = date.getFullYear(), month = date.getMonth();
|
||||
return getRowCount(getFirstDayWeek(year, month), getMonthDayCount(year, month));
|
||||
}
|
||||
|
||||
function getNextMonth(e) {
|
||||
var t = e.getMonth();
|
||||
return t === 11 ? new Date(e.getFullYear() + 1, 0) : new Date(e.getFullYear(), e.getMonth() + 1)
|
||||
}
|
||||
|
||||
function getPreMonth(e) {
|
||||
var t = e.getMonth();
|
||||
return t === 0 ? new Date(e.getFullYear() - 1, 11) : new Date(e.getFullYear(), e.getMonth() - 1)
|
||||
}
|
||||
|
|
@ -27,4 +27,5 @@ import './radio'
|
|||
import './dropdown'
|
||||
import './table'
|
||||
import './input-table'
|
||||
import './row'
|
||||
import './row'
|
||||
import './data-picker'
|
||||
Loading…
Reference in New Issue