style: format vc-calendar

pull/666/head
tangjinzhou 2019-02-13 22:12:00 +08:00
parent 4df4424570
commit 1d80cec3d7
11 changed files with 51 additions and 56 deletions

View File

@ -39,14 +39,15 @@
} }
} }
.@{prefixClass}-decade-panel-prev-century-btn, .@{prefixClass}-decade-panel-next-century-btn { .@{prefixClass}-decade-panel-prev-century-btn,
.@{prefixClass}-decade-panel-next-century-btn {
position: absolute; position: absolute;
top: 0; top: 0;
} }
.@{prefixClass}-decade-panel-next-century-btn { .@{prefixClass}-decade-panel-next-century-btn {
&:after { &:after {
content: '»' content: '»';
} }
} }
@ -54,7 +55,7 @@
user-select: none; user-select: none;
left: 0; left: 0;
&:after { &:after {
content: '«' content: '«';
} }
} }
@ -111,10 +112,11 @@
} }
} }
.@{prefixClass}-decade-panel-last-century-cell, .@{prefixClass}-decade-panel-next-century-cell { .@{prefixClass}-decade-panel-last-century-cell,
.@{prefixClass}-decade-panel-decade{ .@{prefixClass}-decade-panel-next-century-cell {
.@{prefixClass}-decade-panel-decade {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
} }

View File

@ -1,6 +1,6 @@
.@{prefixClass}-month-panel { .@{prefixClass}-month-panel {
left: 0; left: 0;
top:0; top: 0;
bottom: 0; bottom: 0;
right: 0; right: 0;
background: #ffffff; background: #ffffff;
@ -43,14 +43,15 @@
} }
} }
.@{prefixClass}-month-panel-prev-year-btn, .@{prefixClass}-month-panel-next-year-btn { .@{prefixClass}-month-panel-prev-year-btn,
.@{prefixClass}-month-panel-next-year-btn {
position: absolute; position: absolute;
top: 0; top: 0;
} }
.@{prefixClass}-month-panel-next-year-btn { .@{prefixClass}-month-panel-next-year-btn {
&:after { &:after {
content: '»' content: '»';
} }
} }
@ -59,7 +60,7 @@
left: 0; left: 0;
&:after { &:after {
content: '«' content: '«';
} }
} }
@ -96,8 +97,6 @@
.@{prefixClass}-month-panel-cell { .@{prefixClass}-month-panel-cell {
text-align: center; text-align: center;
.@{prefixClass}-month-panel-month { .@{prefixClass}-month-panel-month {
display: block; display: block;
width: 46px; width: 46px;
@ -116,7 +115,7 @@
} }
} }
&-disabled{ &-disabled {
.@{prefixClass}-month-panel-month { .@{prefixClass}-month-panel-month {
color: #bfbfbf; color: #bfbfbf;
@ -141,4 +140,4 @@
.@{prefixClass}-month-header-wrap { .@{prefixClass}-month-header-wrap {
position: relative; position: relative;
height: 308px; height: 308px;
} }

View File

@ -43,14 +43,15 @@
} }
} }
.@{prefixClass}-year-panel-prev-decade-btn, .@{prefixClass}-year-panel-next-decade-btn { .@{prefixClass}-year-panel-prev-decade-btn,
.@{prefixClass}-year-panel-next-decade-btn {
position: absolute; position: absolute;
top: 0; top: 0;
} }
.@{prefixClass}-year-panel-next-decade-btn { .@{prefixClass}-year-panel-next-decade-btn {
&:after { &:after {
content: '»' content: '»';
} }
} }
@ -59,7 +60,7 @@
left: 0; left: 0;
&:after { &:after {
content: '«' content: '«';
} }
} }
@ -125,10 +126,11 @@
} }
} }
.@{prefixClass}-year-panel-last-decade-cell, .@{prefixClass}-year-panel-next-decade-cell { .@{prefixClass}-year-panel-last-decade-cell,
.@{prefixClass}-year-panel-year{ .@{prefixClass}-year-panel-next-decade-cell {
.@{prefixClass}-year-panel-year {
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
color: rgba(0, 0, 0, 0.25); color: rgba(0, 0, 0, 0.25);
} }
} }

View File

@ -7,7 +7,7 @@ import moment from 'moment';
import DateTable from './date/DateTable'; import DateTable from './date/DateTable';
import CalendarHeader from './calendar/CalendarHeader'; import CalendarHeader from './calendar/CalendarHeader';
import CalendarFooter from './calendar/CalendarFooter'; import CalendarFooter from './calendar/CalendarFooter';
import CalendarMixin, {getNowByCurrentStateValue} from './mixin/CalendarMixin'; import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
import CommonMixin from './mixin/CommonMixin'; import CommonMixin from './mixin/CommonMixin';
import DateInput from './date/DateInput'; import DateInput from './date/DateInput';
import enUs from './locale/en_US'; import enUs from './locale/en_US';
@ -74,8 +74,8 @@ const Calendar = {
}); });
}, },
}, },
mounted(){ mounted() {
this.$nextTick(()=>{ this.$nextTick(() => {
this.saveFocusElement(DateInput.getInstance()); this.saveFocusElement(DateInput.getInstance());
}); });
}, },
@ -167,7 +167,7 @@ const Calendar = {
source: 'dateInput', source: 'dateInput',
}); });
}, },
onDateInputSelect (value) { onDateInputSelect(value) {
this.onSelect(value, { this.onSelect(value, {
source: 'dateInputSelect', source: 'dateInputSelect',
}); });
@ -269,11 +269,12 @@ const Calendar = {
onSelect={this.onDateInputSelect} onSelect={this.onDateInputSelect}
/> />
) : null; ) : null;
const children =[]; const children = [];
if (props.renderSidebar) { if (props.renderSidebar) {
children.push(props.renderSidebar()); children.push(props.renderSidebar());
} }
children.push(<div class={`${prefixCls}-panel`} key="panel"> children.push(
<div class={`${prefixCls}-panel`} key="panel">
{dateInputElement} {dateInputElement}
<div tabIndex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}> <div tabIndex={props.focusablePanel ? 0 : undefined} class={`${prefixCls}-date-panel`}>
<CalendarHeader <CalendarHeader
@ -328,7 +329,8 @@ const Calendar = {
onCloseTimePicker={this.closeTimePicker} onCloseTimePicker={this.closeTimePicker}
/> />
</div> </div>
</div>); </div>,
);
return this.renderRoot({ return this.renderRoot({
children, children,

View File

@ -4,7 +4,7 @@ import BaseMixin from '../../_util/BaseMixin';
import { getOptionProps, hasProp } from '../../_util/props-util'; import { getOptionProps, hasProp } from '../../_util/props-util';
import DateTable from './date/DateTable'; import DateTable from './date/DateTable';
import MonthTable from './month/MonthTable'; import MonthTable from './month/MonthTable';
import CalendarMixin, {getNowByCurrentStateValue} from './mixin/CalendarMixin'; import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
import CommonMixin from './mixin/CommonMixin'; import CommonMixin from './mixin/CommonMixin';
import CalendarHeader from './full-calendar/CalendarHeader'; import CalendarHeader from './full-calendar/CalendarHeader';
import enUs from './locale/en_US'; import enUs from './locale/en_US';

View File

@ -28,7 +28,7 @@ const MonthCalendar = {
data() { data() {
const props = this.$props; const props = this.$props;
return { return {
mode: 'month', mode: 'month',
sValue: props.value || props.defaultValue || moment(), sValue: props.value || props.defaultValue || moment(),
sSelectedValue: props.selectedValue || props.defaultSelectedValue, sSelectedValue: props.selectedValue || props.defaultSelectedValue,

View File

@ -47,15 +47,12 @@ const DateInput = {
updated() { updated() {
this.$nextTick(() => { this.$nextTick(() => {
if ( if (
dateInputInstance && dateInputInstance &&
this.$data.hasFocus && this.$data.hasFocus &&
!this.invalid && !this.invalid &&
!(cachedSelectionStart === 0 && cachedSelectionEnd === 0) !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)
) { ) {
dateInputInstance.setSelectionRange( dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd);
cachedSelectionStart,
cachedSelectionEnd,
);
} }
}); });
}, },
@ -96,7 +93,7 @@ const DateInput = {
}); });
return; return;
} }
// 退 // 退
const parsed = moment(str, format, true); const parsed = moment(str, format, true);
if (!parsed.isValid()) { if (!parsed.isValid()) {
@ -140,9 +137,9 @@ const DateInput = {
str: formatDate(prevProps.value, prevProps.format), str: formatDate(prevProps.value, prevProps.format),
})); }));
}, },
onKeyDown ({ keyCode }) { onKeyDown({ keyCode }) {
const { value } = this.$props; const { value } = this.$props;
if (keyCode === KeyCode.ENTER ) { if (keyCode === KeyCode.ENTER) {
this.__emit('select', value.clone()); this.__emit('select', value.clone());
} }
}, },
@ -167,12 +164,14 @@ const DateInput = {
<div class={`${prefixCls}-input-wrap`}> <div class={`${prefixCls}-input-wrap`}>
<div class={`${prefixCls}-date-input-wrap`}> <div class={`${prefixCls}-date-input-wrap`}>
<input <input
{...{directives: [ {...{
{ directives: [
name: 'ant-ref', {
value: this.saveDateInput, name: 'ant-ref',
}, value: this.saveDateInput,
]}} },
],
}}
class={`${prefixCls}-input ${invalidClass}`} class={`${prefixCls}-input ${invalidClass}`}
value={str} value={str}
disabled={disabled} disabled={disabled}

View File

@ -120,10 +120,7 @@ export default {
<tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody> <tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody>
</table> </table>
</div> </div>
{footer && ( {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
<div class={`${prefixCls}-footer`}>
{footer}
</div>)}
</div> </div>
); );
}, },

View File

@ -37,7 +37,7 @@ export default {
this.$refs.rootInstance.focus(); this.$refs.rootInstance.focus();
} }
}, },
saveFocusElement (focusElement) { saveFocusElement(focusElement) {
this.focusElement = focusElement; this.focusElement = focusElement;
}, },
}, },

View File

@ -116,10 +116,7 @@ const MonthPanel = {
prefixCls={prefixCls} prefixCls={prefixCls}
/> />
</div> </div>
{footer && ( {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
<div class={`${prefixCls}-footer`}>
{footer}
</div>)}
</div> </div>
</div> </div>
); );

View File

@ -137,10 +137,7 @@ export default {
<tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody> <tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody>
</table> </table>
</div> </div>
{footer && ( {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
<div class={`${prefixCls}-footer`}>
{footer}
</div>)}
</div> </div>
</div> </div>
); );