@lumingqing/timedatepicker
Version:
时间选择器二次封装，日期选择器设置开始时间不能大于结束时间
641 lines (608 loc) • 18.7 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ // The require scope
/******/ var __webpack_require__ = {};
/******/
/************************************************************************/
/******/ /* webpack/runtime/define property getters */
/******/ !function() {
/******/ // define getter functions for harmony exports
/******/ __webpack_require__.d = function(exports, definition) {
/******/ for(var key in definition) {
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
/******/ }
/******/ }
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/hasOwnProperty shorthand */
/******/ !function() {
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
/******/ }();
/******/
/******/ /* webpack/runtime/make namespace object */
/******/ !function() {
/******/ // define __esModule on exports
/******/ __webpack_require__.r = function(exports) {
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
/******/ }
/******/ Object.defineProperty(exports, '__esModule', { value: true });
/******/ };
/******/ }();
/******/
/******/ /* webpack/runtime/publicPath */
/******/ !function() {
/******/ __webpack_require__.p = "";
/******/ }();
/******/
/************************************************************************/
var __webpack_exports__ = {};
// ESM COMPAT FLAG
__webpack_require__.r(__webpack_exports__);
// EXPORTS
__webpack_require__.d(__webpack_exports__, {
"default": function() { return /* binding */ entry_lib; }
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/setPublicPath.js
/* eslint-disable no-var */
// This file is imported into lib/wc client bundles.
if (typeof window !== 'undefined') {
var currentScript = window.document.currentScript
if (false) { var getCurrentScript; }
var src = currentScript && currentScript.src.match(/(.+\/)[^/]+\.js(\?.*)?$/)
if (src) {
__webpack_require__.p = src[1] // eslint-disable-line
}
}
// Indicate to webpack that this file can be concatenated
/* harmony default export */ var setPublicPath = (null);
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/templateLoader.js??ruleSet[1].rules[3]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/TimeDatePicker/index.vue?vue&type=template&id=32b9ac90&scoped=true
var render = function render() {
var _vm = this,
_c = _vm._self._c;
return _c('div', {
staticStyle: {
"display": "inline-block"
}
}, [_vm.needForm ? _c('el-form-item', {
staticClass: "date-select",
attrs: {
"label-width": _vm.labelWidth,
"label": _vm.label,
"prop": _vm.redStart
}
}, [_c('div', {
staticClass: "i-block",
style: {
width: _vm.innerWidth.includes('%') ? _vm.innerWidth : _vm.innerWidth + 'px'
}
}, [_c('el-col', {
staticStyle: {
"padding": "0px !important"
},
attrs: {
"span": 11
}
}, [_c('el-form-item', {
staticClass: "start",
attrs: {
"prop": _vm.startProp
}
}, [_c('el-date-picker', {
staticStyle: {
"width": "100%"
},
attrs: {
"size": _vm.size,
"type": "datetime",
"picker-options": {
disabledDate: time => {
return _vm.dataTime.startTimeData(time);
},
selectableRange: this.startTimeRange
},
"value-format": "yyyy-MM-dd HH:mm:ss",
"format": "yyyy-MM-dd HH:mm:ss",
"placeholder": "开始时间",
"disabled": _vm.disabled
},
on: {
"change": _vm.startTimeChange
},
model: {
value: _vm.startTime,
callback: function ($$v) {
_vm.startTime = $$v;
},
expression: "startTime"
}
})], 1)], 1), _c('el-col', {
staticStyle: {
"text-align": "center",
"padding": "0px"
},
attrs: {
"span": 2
}
}, [_vm._v(" " + _vm._s(_vm.center) + " ")]), _c('el-col', {
staticStyle: {
"padding": "0px !important"
},
attrs: {
"span": 11
}
}, [_c('el-form-item', {
staticClass: "end",
attrs: {
"prop": _vm.endProp
}
}, [_c('el-date-picker', {
staticStyle: {
"width": "100%"
},
attrs: {
"default-time": "23:59:59",
"size": _vm.size,
"type": "datetime",
"picker-options": {
disabledDate: time => {
return _vm.dataTime.endTimeData(time);
},
selectableRange: this.endTimeRange
},
"value-format": "yyyy-MM-dd HH:mm:ss",
"format": "yyyy-MM-dd HH:mm:ss",
"placeholder": "结束时间",
"disabled": _vm.disabled
},
on: {
"change": _vm.endTimeChange
},
model: {
value: _vm.endTime,
callback: function ($$v) {
_vm.endTime = $$v;
},
expression: "endTime"
}
})], 1)], 1)], 1)]) : _c('div', {
staticClass: "el-date-picker-wrap"
}, [_c('el-col', {
staticStyle: {
"padding": "0px !important"
},
attrs: {
"span": 11
}
}, [_c('el-date-picker', {
staticStyle: {
"width": "100%"
},
attrs: {
"size": _vm.size,
"type": "datetime",
"picker-options": {
disabledDate: time => {
return _vm.dataTime.startTimeData(time);
},
selectableRange: this.startTimeRange
},
"value-format": "yyyy-MM-dd HH:mm:ss",
"format": "yyyy-MM-dd HH:mm:ss",
"placeholder": "开始时间",
"disabled": _vm.disabled
},
on: {
"change": _vm.startTimeChange
},
model: {
value: _vm.startTime,
callback: function ($$v) {
_vm.startTime = $$v;
},
expression: "startTime"
}
})], 1), _c('el-col', {
staticStyle: {
"text-align": "center",
"padding": "0"
},
attrs: {
"span": 2
}
}, [_vm._v(" " + _vm._s(_vm.center) + " ")]), _c('el-col', {
staticStyle: {
"padding": "0px !important"
},
attrs: {
"span": 11
}
}, [_c('el-date-picker', {
staticStyle: {
"width": "100%"
},
attrs: {
"default-time": "23:59:59",
"size": _vm.size,
"type": "datetime",
"picker-options": {
disabledDate: time => {
return _vm.dataTime.endTimeData(time);
},
selectableRange: this.endTimeRange
},
"value-format": "yyyy-MM-dd HH:mm:ss",
"format": "yyyy-MM-dd HH:mm:ss",
"placeholder": "结束时间",
"disabled": _vm.disabled
},
on: {
"change": _vm.endTimeChange
},
model: {
value: _vm.endTime,
callback: function ($$v) {
_vm.endTime = $$v;
},
expression: "endTime"
}
})], 1)], 1)], 1);
};
var staticRenderFns = [];
;// CONCATENATED MODULE: ./src/package/TimeDatePicker/index.js
/**
* 格式化日期
*/
const dateFormat = function () {
/* eslint-disable no-extend-native */
Date.prototype.format = function (fmt) {
let o = {
"M+": this.getMonth() + 1,
// 月份
"d+": this.getDate(),
// 日
"h+": this.getHours(),
// 小时
"m+": this.getMinutes(),
// 分
"s+": this.getSeconds(),
// 秒
"q+": Math.floor((this.getMonth() + 3) / 3),
// 季度
S: this.getMilliseconds() // 毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (let k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ("00" + o[k]).substr(("" + o[k]).length));
}
}
return fmt;
};
};
// js判断两个时间戳是否同一天
const isSameDay = (time, time1) => {
return new Date(time).toDateString() === new Date(time1).toDateString();
};
//比较两个时间的大小
const compareDate = (date, date1) => {
date = new Date(date);
date1 = new Date(date1);
if (date.getTime() - date1.getTime() < 0) {
return "towBig";
} else {
return "oneBig";
}
};
;// CONCATENATED MODULE: ./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[1]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/TimeDatePicker/index.vue?vue&type=script&lang=js
/* harmony default export */ var TimeDatePickervue_type_script_lang_js = ({
name: "TimeDatePicker",
props: {
needForm: {
type: Boolean,
default: true
},
label: {
type: String,
default: ""
},
startDate: {
type: String
},
endDate: {
type: String
},
size: {
type: String,
default: "large"
},
crossBarWidth: {
type: String,
default: "10"
},
center: {
type: String,
default: "-"
},
labelWidth: {
type: String,
default: "100px"
},
startProp: {
type: String,
default: ""
},
endProp: {
type: String,
default: ""
},
redStart: {
type: String,
default: ""
},
innerWidth: {
type: [Number, String],
default: 420
},
disabled: {
type: Boolean,
default: false
},
notChooseBeforeTodayTime: {
type: Boolean,
default: false
}
},
data() {
return {
/*
下面注释的是default-value的写法
*/
// endDefaultValue: new Date(2023, 6, 27, 23, 59, 59),
// endDefaultValue: new Date('2023-7-27 23:59:59'),
endDefaultValue: "23:59:59",
startTime: "",
endTime: "",
startTimeRange: null,
endTimeRange: null,
dataTime: {
startTimeData: time => {
if (this.endTime) {
return time.getTime() > new Date(this.endTime).getTime();
} else {
return false;
}
},
endTimeData: time => {
if (this.notChooseBeforeTodayTime) {
if (compareDate(new Date(), this.startTime) === "towBig") {
return time.getTime() <= new Date(this.startTime).getTime() - 3600 * 1000 * 24;
} else {
return time.getTime() < new Date(new Date().setHours(0, 0, 0, 0));
}
} else {
if (this.startTime) {
return time.getTime() <= new Date(this.startTime).getTime() - 3600 * 1000 * 24;
}
}
}
}
};
},
computed: {},
watch: {
startDate: {
handler(newValue) {
this.startTime = newValue;
},
immediate: true
},
endDate: {
handler(newValue) {
this.endTime = newValue;
},
immediate: true
},
startTime: {
handler(newVal) {
if (newVal && this.endTime && isSameDay(newVal, this.endTime)) {
this.startTimeRange = "00:00:00 - " + this.getHourChange(this.endTime) + ":" + this.getMinutesChange(this.endTime) + ":" + this.getSecondChange(this.endTime);
} else {
this.startTimeRange = "00:00:00 - 23:59:59";
if (this.notChooseBeforeTodayTime) {
const data = new Date();
this.endTimeRange = this.getHourChange(data) + ":" + this.getMinutesChange(data) + ":" + this.getSecondChange(data) + " - 23:59:59";
} else {
this.endTimeRange = "00:00:00 - 23:59:59";
}
}
this.$emit("update:startDate", newVal);
},
deep: true
},
endTime: {
handler(newVal) {
if (newVal && this.startTime && isSameDay(newVal, this.startTime)) {
// 需要判断开始时间是否在当前时间之前，如果是取得是当前时间的范围
const newDate = new Date();
if (compareDate(newDate, this.startTime) === "towBig") {
this.endTimeRange = this.getHourChange(this.startTime) + ":" + this.getMinutesChange(this.startTime) + ":" + this.getSecondChange(this.startTime) + " - 23:59:59";
} else {
this.endTimeRange = this.getHourChange(newDate) + ":" + this.getMinutesChange(newDate) + ":" + this.getSecondChange(newDate) + " - 23:59:59";
}
} else {
if (this.notChooseBeforeTodayTime) {
const data = new Date();
this.endTimeRange = this.getHourChange(data) + ":" + this.getMinutesChange(data) + ":" + this.getSecondChange(data) + " - 23:59:59";
} else {
this.endTimeRange = "00:00:00 - 23:59:59";
}
this.startTimeRange = "00:00:00 - 23:59:59";
}
if (newVal && newVal.substring(newVal.indexOf(" ") + 1) === "00:00:00") {
const strTime = `${newVal.substring(0, 10)} 23:59:59`;
this.$emit("update:endDate", strTime);
} else {
this.$emit("update:endDate", newVal);
}
},
deep: true
}
},
methods: {
startTimeChange(startTime) {
// console.log('startTime', startTime)
},
endTimeChange(endTime) {
// console.log('endTime', endTime)
},
// 获取单独的小时(24小时制)
getHourChange(val) {
let date = new Date(Date.parse(val));
return date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
},
// 获取单独的分钟
getMinutesChange(val) {
let date = new Date(Date.parse(val));
return date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
},
// 获取单独的秒
getSecondChange(val) {
let date = new Date(Date.parse(val));
return date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
}
}
});
;// CONCATENATED MODULE: ./src/package/TimeDatePicker/index.vue?vue&type=script&lang=js
/* harmony default export */ var package_TimeDatePickervue_type_script_lang_js = (TimeDatePickervue_type_script_lang_js);
;// CONCATENATED MODULE: ./node_modules/mini-css-extract-plugin/dist/loader.js??clonedRuleSet-12.use[0]!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/package/TimeDatePicker/index.vue?vue&type=style&index=0&id=32b9ac90&prod&scoped=true&lang=css
// extracted by mini-css-extract-plugin
;// CONCATENATED MODULE: ./src/package/TimeDatePicker/index.vue?vue&type=style&index=0&id=32b9ac90&prod&scoped=true&lang=css
;// CONCATENATED MODULE: ./node_modules/@vue/vue-loader-v15/lib/runtime/componentNormalizer.js
/* globals __VUE_SSR_CONTEXT__ */
// IMPORTANT: Do NOT use ES2015 features in this file (except for modules).
// This module is a runtime utility for cleaner component module output and will
// be included in the final webpack user bundle.
function normalizeComponent(
scriptExports,
render,
staticRenderFns,
functionalTemplate,
injectStyles,
scopeId,
moduleIdentifier /* server only */,
shadowMode /* vue-cli only */
) {
// Vue.extend constructor export interop
var options =
typeof scriptExports === 'function' ? scriptExports.options : scriptExports
// render functions
if (render) {
options.render = render
options.staticRenderFns = staticRenderFns
options._compiled = true
}
// functional template
if (functionalTemplate) {
options.functional = true
}
// scopedId
if (scopeId) {
options._scopeId = 'data-v-' + scopeId
}
var hook
if (moduleIdentifier) {
// server build
hook = function (context) {
// 2.3 injection
context =
context || // cached call
(this.$vnode && this.$vnode.ssrContext) || // stateful
(this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext) // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__
}
// inject component styles
if (injectStyles) {
injectStyles.call(this, context)
}
// register component module identifier for async chunk inferrence
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier)
}
}
// used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook
} else if (injectStyles) {
hook = shadowMode
? function () {
injectStyles.call(
this,
(options.functional ? this.parent : this).$root.$options.shadowRoot
)
}
: injectStyles
}
if (hook) {
if (options.functional) {
// for template-only hot-reload because in that case the render fn doesn't
// go through the normalizer
options._injectStyles = hook
// register for functional component in vue file
var originalRender = options.render
options.render = function renderWithStyleInjection(h, context) {
hook.call(context)
return originalRender(h, context)
}
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate
options.beforeCreate = existing ? [].concat(existing, hook) : [hook]
}
}
return {
exports: scriptExports,
options: options
}
}
;// CONCATENATED MODULE: ./src/package/TimeDatePicker/index.vue
;
/* normalize component */
var component = normalizeComponent(
package_TimeDatePickervue_type_script_lang_js,
render,
staticRenderFns,
false,
null,
"32b9ac90",
null
)
/* harmony default export */ var TimeDatePicker = (component.exports);
;// CONCATENATED MODULE: ./src/package/index.js
const components = [TimeDatePicker];
// 定义install方法
const install = function (Vue) {
components.forEach(component => {
Vue.component(component.name, component);
});
};
// 判断是否直接引入文件，如果是，就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
// 导出install方法
/* harmony default export */ var src_package = ({
install
});
;// CONCATENATED MODULE: ./node_modules/@vue/cli-service/lib/commands/build/entry-lib.js
/* harmony default export */ var entry_lib = (src_package);
module.exports = __webpack_exports__;
/******/ })()
;
//# sourceMappingURL=TimeDatePicker.common.js.map