style: format vc-calendar
parent
4df4424570
commit
1d80cec3d7
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
@ -37,7 +37,7 @@ export default {
|
||||||
this.$refs.rootInstance.focus();
|
this.$refs.rootInstance.focus();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
saveFocusElement (focusElement) {
|
saveFocusElement(focusElement) {
|
||||||
this.focusElement = focusElement;
|
this.focusElement = focusElement;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue