update DatePicker
update DatePicker
This commit is contained in:
梁灏
parent
17e1fcf151
commit
0f6778937c
11 changed files with 832 additions and 21 deletions
|
|
@ -1,13 +1,99 @@
|
|||
<template>
|
||||
|
||||
<table
|
||||
cellspacing="0"
|
||||
cellpadding="0"
|
||||
:class="classes"
|
||||
@click="handleClick"
|
||||
@mousemove="handleMouseMove">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th v-if="showWeekNumber"></th>
|
||||
<th>日</th>
|
||||
<th>一</th>
|
||||
<th>二</th>
|
||||
<th>三</th>
|
||||
<th>四</th>
|
||||
<th>五</th>
|
||||
<th>六</th>
|
||||
</tr>
|
||||
<tr :class="rowCls(row[1])" v-for="row in rows">
|
||||
<td :class="getCellClasses(cell)" v-for="cell in row">{{ cell.text }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
<script>
|
||||
const prefixCls = 'ivu-date-picker-table';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
props: {
|
||||
date: {},
|
||||
year: {},
|
||||
month: {},
|
||||
week: {},
|
||||
selectionMode: {
|
||||
default: 'day'
|
||||
},
|
||||
showWeekNumber: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabledDate: {},
|
||||
minDate: {},
|
||||
maxDate: {},
|
||||
rangeState: {
|
||||
default () {
|
||||
return {
|
||||
endDate: null,
|
||||
selecting: false,
|
||||
row: null,
|
||||
column: null
|
||||
};
|
||||
}
|
||||
},
|
||||
value: {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-week-mode`]: this.selectionMode === 'week'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
|
||||
},
|
||||
handleMouseMove () {
|
||||
|
||||
},
|
||||
rowCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-row`,
|
||||
{
|
||||
[`${prefixCls}-row-current`]: this.value && this.isWeekActive(cell)
|
||||
}
|
||||
]
|
||||
},
|
||||
isWeekActive (cell) {
|
||||
|
||||
},
|
||||
getCellCls (cell) {
|
||||
return [
|
||||
`${prefixCls}-cell`,
|
||||
{
|
||||
[`${prefixCls}-cell-today`]: cell.type === 'today'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
|
||||
<div>month</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
// props: {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
|
||||
<div>year</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
// props: {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,13 +1,100 @@
|
|||
<template>
|
||||
|
||||
<div :class="[prefixCls + '-body-wrapper']">
|
||||
<div :class="[prefixCls + '-sidebar']" v-if="shortcuts">
|
||||
<div
|
||||
:class="[prefixCls + '-shortcut']"
|
||||
v-for="shortcut in shortcuts"
|
||||
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</div>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-body']">
|
||||
<div :class="[datePrefixCls + '-header']" v-show="currentView !== 'time'">
|
||||
<span
|
||||
:class="iconBtnCls('prev', '-double')"
|
||||
@click="prevYear"></span>
|
||||
<span
|
||||
:class="iconBtnCls('prev')"
|
||||
@click="prevMonth"
|
||||
v-show="currentView === 'date'"></span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showYearPicker">{{ }}</span>
|
||||
<span
|
||||
:class="[datePrefixCls + '-header-label']"
|
||||
@click="showMonthPicker"
|
||||
v-show="currentView === 'date'">{{ }}</span>
|
||||
<span
|
||||
:class="iconBtnCls('next')"
|
||||
@click="nextMonth"
|
||||
v-show="currentView === 'date'"></span>
|
||||
<span
|
||||
:class="iconBtnCls('next', '-double')"
|
||||
@click="nextYear"></span>
|
||||
</div>
|
||||
<div :class="[prefixCls + '-content']">
|
||||
<date-table
|
||||
v-show="currentView === 'date'"></date-table>
|
||||
<year-table
|
||||
v-show="currentView === 'year'"></year-table>
|
||||
<month-table
|
||||
v-show="currentView === 'month'"></month-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import DateTable from '../base/date-table.vue';
|
||||
import YearTable from '../base/year-table.vue';
|
||||
import MonthTable from '../base/month-table.vue';
|
||||
|
||||
const prefixCls = 'ivu-picker-panel';
|
||||
const datePrefixCls = 'ivu-date-picker';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
components: { DateTable, YearTable, MonthTable },
|
||||
data () {
|
||||
return {}
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
datePrefixCls: datePrefixCls,
|
||||
shortcuts: [],
|
||||
currentView: 'date'
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
methods: {
|
||||
handleShortcutClick (shortcut) {
|
||||
|
||||
},
|
||||
iconBtnCls (direction, type = '') {
|
||||
return [
|
||||
`${prefixCls}-icon-btn`,
|
||||
`${datePrefixCls}-${direction}-btn`,
|
||||
`${datePrefixCls}-${direction}-btn-arrow${type}`,
|
||||
]
|
||||
},
|
||||
prevYear () {
|
||||
|
||||
},
|
||||
nextYear () {
|
||||
|
||||
},
|
||||
prevMonth () {
|
||||
|
||||
},
|
||||
nextMonth () {
|
||||
|
||||
},
|
||||
showYearPicker () {
|
||||
|
||||
},
|
||||
showMonthPicker () {
|
||||
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
console.log(123)
|
||||
},
|
||||
beforeDestroy () {
|
||||
console.log(456)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,13 +1,148 @@
|
|||
<template>
|
||||
|
||||
<div
|
||||
:class="[prefixCls]"
|
||||
v-clickoutside="handleClose"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave">
|
||||
<i-input
|
||||
v-el:reference
|
||||
:class="[prefixCls + '-editor']"
|
||||
:readonly="!editable || readonly"
|
||||
:disabled="disabled"
|
||||
:size="size"
|
||||
:placeholder="placeholder"
|
||||
:value.sync="visualValue"
|
||||
@on-focus="handleFocus"
|
||||
@on-blur="handleBlur"
|
||||
@on-click="handleIconClick"
|
||||
:icon="iconType"></i-input>
|
||||
<Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop>
|
||||
<div v-el:picker></div>
|
||||
</Drop>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
import iInput from '../../components/input/input.vue';
|
||||
import Drop from '../../components/select/dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
|
||||
const prefixCls = 'ivu-date-picker';
|
||||
|
||||
const DEFAULT_FORMATS = {
|
||||
date: 'yyyy-MM-dd',
|
||||
month: 'yyyy-MM',
|
||||
datetime: 'yyyy-MM-dd HH:mm:ss',
|
||||
time: 'HH:mm:ss',
|
||||
timerange: 'HH:mm:ss',
|
||||
daterange: 'yyyy-MM-dd',
|
||||
datetimerange: 'yyyy-MM-dd HH:mm:ss'
|
||||
};
|
||||
|
||||
const PLACEMENT_MAP = {
|
||||
left: 'bottom-start',
|
||||
center: 'bottom-center',
|
||||
right: 'bottom-end'
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
components: { iInput, Drop },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
format: {
|
||||
type: String
|
||||
},
|
||||
readonly: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
align: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['left', 'center', 'right']);
|
||||
},
|
||||
default: 'left'
|
||||
},
|
||||
options: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
showClose: false,
|
||||
visualValue: '',
|
||||
visible: false,
|
||||
picker: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconType () {
|
||||
return this.showClose ? 'ios-close' : 'ios-calendar-outline';
|
||||
},
|
||||
placement () {
|
||||
return PLACEMENT_MAP[this.align];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClose () {
|
||||
this.visible = false;
|
||||
},
|
||||
handleFocus () {
|
||||
this.visible = true;
|
||||
},
|
||||
handleBlur () {
|
||||
|
||||
},
|
||||
handleMouseenter () {
|
||||
if (this.readonly || this.disabled) return;
|
||||
if (this.visualValue) {
|
||||
this.showClose = true;
|
||||
}
|
||||
},
|
||||
handleMouseleave () {
|
||||
this.showClose = false;
|
||||
},
|
||||
handleIconClick () {
|
||||
|
||||
},
|
||||
showPicker () {
|
||||
if (!this.picker) {
|
||||
this.picker = new Vue(this.panel).$mount(this.$els.picker);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.showPicker();
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.picker) {
|
||||
this.picker.$destroy();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -9,11 +9,15 @@ const getPanel = function (type) {
|
|||
return DatePanel;
|
||||
};
|
||||
|
||||
import { oneOf } from '../../../utils/assist';
|
||||
|
||||
export default {
|
||||
mixins: [Picker],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
validator (value) {
|
||||
return oneOf(value, ['year', 'month', 'week', 'date', 'daterange', 'datetime', 'datetimerange']);
|
||||
},
|
||||
default: 'date'
|
||||
}
|
||||
},
|
||||
|
|
|
|||
159
src/components/date-picker/util.js
Normal file
159
src/components/date-picker/util.js
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
import dateUtil from '../../utils/date';
|
||||
|
||||
const newArray = function(start, end) {
|
||||
let result = [];
|
||||
for (let i = start; i <= end; i++) {
|
||||
result.push(i);
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
export const toDate = function(date) {
|
||||
date = new Date(date);
|
||||
if (isNaN(date.getTime())) return null;
|
||||
return date;
|
||||
};
|
||||
|
||||
export const formatDate = function(date, format) {
|
||||
date = toDate(date);
|
||||
if (!date) return '';
|
||||
return dateUtil.format(date, format || 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
export const parseDate = function(string, format) {
|
||||
return dateUtil.parse(string, format || 'yyyy-MM-dd');
|
||||
};
|
||||
|
||||
export const getDayCountOfMonth = function(year, month) {
|
||||
if (month === 3 || month === 5 || month === 8 || month === 10) {
|
||||
return 30;
|
||||
}
|
||||
|
||||
if (month === 1) {
|
||||
if (year % 4 === 0 && year % 100 !== 0 || year % 400 === 0) {
|
||||
return 29;
|
||||
} else {
|
||||
return 28;
|
||||
}
|
||||
}
|
||||
|
||||
return 31;
|
||||
};
|
||||
|
||||
export const getFirstDayOfMonth = function(date) {
|
||||
const temp = new Date(date.getTime());
|
||||
temp.setDate(1);
|
||||
return temp.getDay();
|
||||
};
|
||||
|
||||
export const DAY_DURATION = 86400000;
|
||||
|
||||
export const getStartDateOfMonth = function(year, month) {
|
||||
const result = new Date(year, month, 1);
|
||||
const day = result.getDay();
|
||||
|
||||
if (day === 0) {
|
||||
result.setTime(result.getTime() - DAY_DURATION * 7);
|
||||
} else {
|
||||
result.setTime(result.getTime() - DAY_DURATION * day);
|
||||
}
|
||||
|
||||
return result;
|
||||
};
|
||||
|
||||
export const getWeekNumber = function(src) {
|
||||
const date = new Date(src.getTime());
|
||||
date.setHours(0, 0, 0, 0);
|
||||
// Thursday in current week decides the year.
|
||||
date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
|
||||
// January 4 is always in week 1.
|
||||
const week1 = new Date(date.getFullYear(), 0, 4);
|
||||
// Adjust to Thursday in week 1 and count number of weeks from date to week 1.
|
||||
return 1 + Math.round(((date.getTime() - week1.getTime()) / 86400000 - 3 + (week1.getDay() + 6) % 7) / 7);
|
||||
};
|
||||
|
||||
export const prevMonth = function(src) {
|
||||
const year = src.getFullYear();
|
||||
const month = src.getMonth();
|
||||
const date = src.getDate();
|
||||
|
||||
const newYear = month === 0 ? year - 1 : year;
|
||||
const newMonth = month === 0 ? 11 : month - 1;
|
||||
|
||||
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
|
||||
if (newMonthDayCount < date) {
|
||||
src.setDate(newMonthDayCount);
|
||||
}
|
||||
|
||||
src.setMonth(newMonth);
|
||||
src.setFullYear(newYear);
|
||||
|
||||
return new Date(src.getTime());
|
||||
};
|
||||
|
||||
export const nextMonth = function(src) {
|
||||
const year = src.getFullYear();
|
||||
const month = src.getMonth();
|
||||
const date = src.getDate();
|
||||
|
||||
const newYear = month === 11 ? year + 1 : year;
|
||||
const newMonth = month === 11 ? 0 : month + 1;
|
||||
|
||||
const newMonthDayCount = getDayCountOfMonth(newYear, newMonth);
|
||||
if (newMonthDayCount < date) {
|
||||
src.setDate(newMonthDayCount);
|
||||
}
|
||||
|
||||
src.setMonth(newMonth);
|
||||
src.setFullYear(newYear);
|
||||
|
||||
return new Date(src.getTime());
|
||||
};
|
||||
|
||||
export const getRangeHours = function(ranges) {
|
||||
const hours = [];
|
||||
let disabledHours = [];
|
||||
|
||||
(ranges || []).forEach(range => {
|
||||
const value = range.map(date => date.getHours());
|
||||
|
||||
disabledHours = disabledHours.concat(newArray(value[0], value[1]));
|
||||
});
|
||||
|
||||
if (disabledHours.length) {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
hours[i] = disabledHours.indexOf(i) === -1;
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < 24; i++) {
|
||||
hours[i] = false;
|
||||
}
|
||||
}
|
||||
|
||||
return hours;
|
||||
};
|
||||
|
||||
export const limitRange = function(date, ranges) {
|
||||
if (!ranges || !ranges.length) return date;
|
||||
|
||||
const len = ranges.length;
|
||||
const format = 'HH:mm:ss';
|
||||
|
||||
date = dateUtil.parse(dateUtil.format(date, format), format);
|
||||
for (let i = 0; i < len; i++) {
|
||||
const range = ranges[i];
|
||||
if (date >= range[0] && date <= range[1]) {
|
||||
return date;
|
||||
}
|
||||
}
|
||||
|
||||
let maxDate = ranges[0][0];
|
||||
let minDate = ranges[0][0];
|
||||
|
||||
ranges.forEach(range => {
|
||||
minDate = new Date(Math.min(range[0], minDate));
|
||||
maxDate = new Date(Math.max(range[1], maxDate));
|
||||
});
|
||||
|
||||
return date < minDate ? minDate : maxDate;
|
||||
};
|
||||
319
src/utils/date.js
Executable file
319
src/utils/date.js
Executable file
|
|
@ -0,0 +1,319 @@
|
|||
/*eslint-disable*/
|
||||
// 把 YYYY-MM-DD 改成了 yyyy-MM-dd
|
||||
(function (main) {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Parse or format dates
|
||||
* @class fecha
|
||||
*/
|
||||
var fecha = {};
|
||||
var token = /d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g;
|
||||
var twoDigits = /\d\d?/;
|
||||
var threeDigits = /\d{3}/;
|
||||
var fourDigits = /\d{4}/;
|
||||
var word = /[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i;
|
||||
var noop = function () {
|
||||
};
|
||||
|
||||
function shorten(arr, sLen) {
|
||||
var newArr = [];
|
||||
for (var i = 0, len = arr.length; i < len; i++) {
|
||||
newArr.push(arr[i].substr(0, sLen));
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
|
||||
function monthUpdate(arrName) {
|
||||
return function (d, v, i18n) {
|
||||
var index = i18n[arrName].indexOf(v.charAt(0).toUpperCase() + v.substr(1).toLowerCase());
|
||||
if (~index) {
|
||||
d.month = index;
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function pad(val, len) {
|
||||
val = String(val);
|
||||
len = len || 2;
|
||||
while (val.length < len) {
|
||||
val = '0' + val;
|
||||
}
|
||||
return val;
|
||||
}
|
||||
|
||||
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
|
||||
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var monthNamesShort = shorten(monthNames, 3);
|
||||
var dayNamesShort = shorten(dayNames, 3);
|
||||
fecha.i18n = {
|
||||
dayNamesShort: dayNamesShort,
|
||||
dayNames: dayNames,
|
||||
monthNamesShort: monthNamesShort,
|
||||
monthNames: monthNames,
|
||||
amPm: ['am', 'pm'],
|
||||
DoFn: function DoFn(D) {
|
||||
return D + ['th', 'st', 'nd', 'rd'][D % 10 > 3 ? 0 : (D - D % 10 !== 10) * D % 10];
|
||||
}
|
||||
};
|
||||
|
||||
var formatFlags = {
|
||||
D: function (dateObj) {
|
||||
return dateObj.getDay();
|
||||
},
|
||||
DD: function (dateObj) {
|
||||
return pad(dateObj.getDay());
|
||||
},
|
||||
Do: function (dateObj, i18n) {
|
||||
return i18n.DoFn(dateObj.getDate());
|
||||
},
|
||||
d: function (dateObj) {
|
||||
return dateObj.getDate();
|
||||
},
|
||||
dd: function (dateObj) {
|
||||
return pad(dateObj.getDate());
|
||||
},
|
||||
ddd: function (dateObj, i18n) {
|
||||
return i18n.dayNamesShort[dateObj.getDay()];
|
||||
},
|
||||
dddd: function (dateObj, i18n) {
|
||||
return i18n.dayNames[dateObj.getDay()];
|
||||
},
|
||||
M: function (dateObj) {
|
||||
return dateObj.getMonth() + 1;
|
||||
},
|
||||
MM: function (dateObj) {
|
||||
return pad(dateObj.getMonth() + 1);
|
||||
},
|
||||
MMM: function (dateObj, i18n) {
|
||||
return i18n.monthNamesShort[dateObj.getMonth()];
|
||||
},
|
||||
MMMM: function (dateObj, i18n) {
|
||||
return i18n.monthNames[dateObj.getMonth()];
|
||||
},
|
||||
yy: function (dateObj) {
|
||||
return String(dateObj.getFullYear()).substr(2);
|
||||
},
|
||||
yyyy: function (dateObj) {
|
||||
return dateObj.getFullYear();
|
||||
},
|
||||
h: function (dateObj) {
|
||||
return dateObj.getHours() % 12 || 12;
|
||||
},
|
||||
hh: function (dateObj) {
|
||||
return pad(dateObj.getHours() % 12 || 12);
|
||||
},
|
||||
H: function (dateObj) {
|
||||
return dateObj.getHours();
|
||||
},
|
||||
HH: function (dateObj) {
|
||||
return pad(dateObj.getHours());
|
||||
},
|
||||
m: function (dateObj) {
|
||||
return dateObj.getMinutes();
|
||||
},
|
||||
mm: function (dateObj) {
|
||||
return pad(dateObj.getMinutes());
|
||||
},
|
||||
s: function (dateObj) {
|
||||
return dateObj.getSeconds();
|
||||
},
|
||||
ss: function (dateObj) {
|
||||
return pad(dateObj.getSeconds());
|
||||
},
|
||||
S: function (dateObj) {
|
||||
return Math.round(dateObj.getMilliseconds() / 100);
|
||||
},
|
||||
SS: function (dateObj) {
|
||||
return pad(Math.round(dateObj.getMilliseconds() / 10), 2);
|
||||
},
|
||||
SSS: function (dateObj) {
|
||||
return pad(dateObj.getMilliseconds(), 3);
|
||||
},
|
||||
a: function (dateObj, i18n) {
|
||||
return dateObj.getHours() < 12 ? i18n.amPm[0] : i18n.amPm[1];
|
||||
},
|
||||
A: function (dateObj, i18n) {
|
||||
return dateObj.getHours() < 12 ? i18n.amPm[0].toUpperCase() : i18n.amPm[1].toUpperCase();
|
||||
},
|
||||
ZZ: function (dateObj) {
|
||||
var o = dateObj.getTimezoneOffset();
|
||||
return (o > 0 ? '-' : '+') + pad(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4);
|
||||
}
|
||||
};
|
||||
|
||||
var parseFlags = {
|
||||
d: [twoDigits, function (d, v) {
|
||||
d.day = v;
|
||||
}],
|
||||
M: [twoDigits, function (d, v) {
|
||||
d.month = v - 1;
|
||||
}],
|
||||
yy: [twoDigits, function (d, v) {
|
||||
var da = new Date(), cent = +('' + da.getFullYear()).substr(0, 2);
|
||||
d.year = '' + (v > 68 ? cent - 1 : cent) + v;
|
||||
}],
|
||||
h: [twoDigits, function (d, v) {
|
||||
d.hour = v;
|
||||
}],
|
||||
m: [twoDigits, function (d, v) {
|
||||
d.minute = v;
|
||||
}],
|
||||
s: [twoDigits, function (d, v) {
|
||||
d.second = v;
|
||||
}],
|
||||
yyyy: [fourDigits, function (d, v) {
|
||||
d.year = v;
|
||||
}],
|
||||
S: [/\d/, function (d, v) {
|
||||
d.millisecond = v * 100;
|
||||
}],
|
||||
SS: [/\d{2}/, function (d, v) {
|
||||
d.millisecond = v * 10;
|
||||
}],
|
||||
SSS: [threeDigits, function (d, v) {
|
||||
d.millisecond = v;
|
||||
}],
|
||||
D: [twoDigits, noop],
|
||||
ddd: [word, noop],
|
||||
MMM: [word, monthUpdate('monthNamesShort')],
|
||||
MMMM: [word, monthUpdate('monthNames')],
|
||||
a: [word, function (d, v, i18n) {
|
||||
var val = v.toLowerCase();
|
||||
if (val === i18n.amPm[0]) {
|
||||
d.isPm = false;
|
||||
} else if (val === i18n.amPm[1]) {
|
||||
d.isPm = true;
|
||||
}
|
||||
}],
|
||||
ZZ: [/[\+\-]\d\d:?\d\d/, function (d, v) {
|
||||
var parts = (v + '').match(/([\+\-]|\d\d)/gi), minutes;
|
||||
|
||||
if (parts) {
|
||||
minutes = +(parts[1] * 60) + parseInt(parts[2], 10);
|
||||
d.timezoneOffset = parts[0] === '+' ? minutes : -minutes;
|
||||
}
|
||||
}]
|
||||
};
|
||||
parseFlags.DD = parseFlags.DD;
|
||||
parseFlags.dddd = parseFlags.ddd;
|
||||
parseFlags.Do = parseFlags.dd = parseFlags.d;
|
||||
parseFlags.mm = parseFlags.m;
|
||||
parseFlags.hh = parseFlags.H = parseFlags.HH = parseFlags.h;
|
||||
parseFlags.MM = parseFlags.M;
|
||||
parseFlags.ss = parseFlags.s;
|
||||
parseFlags.A = parseFlags.a;
|
||||
|
||||
|
||||
// Some common format strings
|
||||
fecha.masks = {
|
||||
'default': 'ddd MMM dd yyyy HH:mm:ss',
|
||||
shortDate: 'M/D/yy',
|
||||
mediumDate: 'MMM d, yyyy',
|
||||
longDate: 'MMMM d, yyyy',
|
||||
fullDate: 'dddd, MMMM d, yyyy',
|
||||
shortTime: 'HH:mm',
|
||||
mediumTime: 'HH:mm:ss',
|
||||
longTime: 'HH:mm:ss.SSS'
|
||||
};
|
||||
|
||||
/***
|
||||
* Format a date
|
||||
* @method format
|
||||
* @param {Date|number} dateObj
|
||||
* @param {string} mask Format of the date, i.e. 'mm-dd-yy' or 'shortDate'
|
||||
*/
|
||||
fecha.format = function (dateObj, mask, i18nSettings) {
|
||||
var i18n = i18nSettings || fecha.i18n;
|
||||
|
||||
if (typeof dateObj === 'number') {
|
||||
dateObj = new Date(dateObj);
|
||||
}
|
||||
|
||||
if (Object.prototype.toString.call(dateObj) !== '[object Date]' || isNaN(dateObj.getTime())) {
|
||||
throw new Error('Invalid Date in fecha.format');
|
||||
}
|
||||
|
||||
mask = fecha.masks[mask] || mask || fecha.masks['default'];
|
||||
|
||||
return mask.replace(token, function ($0) {
|
||||
return $0 in formatFlags ? formatFlags[$0](dateObj, i18n) : $0.slice(1, $0.length - 1);
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Parse a date string into an object, changes - into /
|
||||
* @method parse
|
||||
* @param {string} dateStr Date string
|
||||
* @param {string} format Date parse format
|
||||
* @returns {Date|boolean}
|
||||
*/
|
||||
fecha.parse = function (dateStr, format, i18nSettings) {
|
||||
var i18n = i18nSettings || fecha.i18n;
|
||||
|
||||
if (typeof format !== 'string') {
|
||||
throw new Error('Invalid format in fecha.parse');
|
||||
}
|
||||
|
||||
format = fecha.masks[format] || format;
|
||||
|
||||
// Avoid regular expression denial of service, fail early for really long strings
|
||||
// https://www.owasp.org/index.php/Regular_expression_Denial_of_Service_-_ReDoS
|
||||
if (dateStr.length > 1000) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var isValid = true;
|
||||
var dateInfo = {};
|
||||
format.replace(token, function ($0) {
|
||||
if (parseFlags[$0]) {
|
||||
var info = parseFlags[$0];
|
||||
var index = dateStr.search(info[0]);
|
||||
if (!~index) {
|
||||
isValid = false;
|
||||
} else {
|
||||
dateStr.replace(info[0], function (result) {
|
||||
info[1](dateInfo, result, i18n);
|
||||
dateStr = dateStr.substr(index + result.length);
|
||||
return result;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return parseFlags[$0] ? '' : $0.slice(1, $0.length - 1);
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var today = new Date();
|
||||
if (dateInfo.isPm === true && dateInfo.hour != null && +dateInfo.hour !== 12) {
|
||||
dateInfo.hour = +dateInfo.hour + 12;
|
||||
} else if (dateInfo.isPm === false && +dateInfo.hour === 12) {
|
||||
dateInfo.hour = 0;
|
||||
}
|
||||
|
||||
var date;
|
||||
if (dateInfo.timezoneOffset != null) {
|
||||
dateInfo.minute = +(dateInfo.minute || 0) - +dateInfo.timezoneOffset;
|
||||
date = new Date(Date.UTC(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,
|
||||
dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0));
|
||||
} else {
|
||||
date = new Date(dateInfo.year || today.getFullYear(), dateInfo.month || 0, dateInfo.day || 1,
|
||||
dateInfo.hour || 0, dateInfo.minute || 0, dateInfo.second || 0, dateInfo.millisecond || 0);
|
||||
}
|
||||
return date;
|
||||
};
|
||||
|
||||
/* istanbul ignore next */
|
||||
if (typeof module !== 'undefined' && module.exports) {
|
||||
module.exports = fecha;
|
||||
} else if (typeof define === 'function' && define.amd) {
|
||||
define(function () {
|
||||
return fecha;
|
||||
});
|
||||
} else {
|
||||
main.fecha = fecha;
|
||||
}
|
||||
})(this);
|
||||
|
|
@ -45,6 +45,7 @@ li + li {
|
|||
<li><a v-link="'/dropdown'">Dropdown</a></li>
|
||||
<li><a v-link="'/tabs'">Tabs</a></li>
|
||||
<li><a v-link="'/menu'">Menu</a></li>
|
||||
<li><a v-link="'/date'">Date</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -122,6 +122,11 @@ router.map({
|
|||
component: function (resolve) {
|
||||
require(['./routers/menu.vue'], resolve);
|
||||
}
|
||||
},
|
||||
'/date': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/date.vue'], resolve);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
15
test/routers/date.vue
Normal file
15
test/routers/date.vue
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<template>
|
||||
<div style="margin: 50px">
|
||||
<date-picker style="width:200px" placeholder="请选择日期"></date-picker>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue