@ajaxjs/util 1.0.9 → 1.1.1

package/dist/widget/calendar/BetweenDate.vue

@@ -0,0 +1,63 @@
+<template>
+  <form action="." method="GET" class="dateRange" @submit="valid">
+    <aj-form-calendar-input
+      :date-only="true"
+      :position-fixed="true"
+      placeholder="起始时间"
+      field-name="startDate"
+    ></aj-form-calendar-input>
+    -
+    <aj-form-calendar-input
+      :date-only="true"
+      :position-fixed="true"
+      placeholder="截至时间"
+      field-name="endDate"
+    ></aj-form-calendar-input>
+    <button class="aj-btn">按时间筛选</button>
+  </form>
+</template>
+
+<script lang="ts">
+/**
+ * 起始时间、截止时间的范围选择
+ */
+export default {
+  props: {
+    isAjax: { type: Boolean, default: true }, // 是否 AJAX 模式
+  },
+  methods: {
+    valid(this: Vue, ev: Event): void {
+      let start = (<HTMLInputElement>(
+          this.$el.querySelector("input[name=startDate]")
+        )).value,
+        end = (<HTMLInputElement>this.$el.querySelector("input[name=endDate]"))
+          .value;
+
+      if (!start || !end) {
+        alert("输入数据不能为空");
+        ev.preventDefault();
+        return;
+      }
+
+      if (new Date(start) > new Date(end)) {
+        alert("起始日期不能晚于结束日期");
+        ev.preventDefault();
+        return;
+      }
+
+      //@ts-ignore
+      if (this.isAjax) {
+        ev.preventDefault();
+        let grid: any = this.$parent.$parent;
+
+        Object.assign(grid.$refs.pager.extraParam, {
+          startDate: start,
+          endDate: end,
+        });
+
+        grid.reload();
+      }
+    },
+  },
+};
+</script>

package/dist/widget/calendar/Calendar.d.ts

@@ -0,0 +1,55 @@
+/**
+ * 日期选择器
+ */
+declare const _default: {
+    props: {
+        showTime: BooleanConstructor;
+    };
+    data(): {
+        date: Date;
+        year: number;
+        month: number;
+        day: number;
+    };
+    mounted(): void;
+    watch: {
+        date(): void;
+    };
+    methods: {
+        /**
+         * 画日历
+         */
+        render(): void;
+        /**
+         * 获取指定的日期
+         *
+         * @param dateType
+         * @param month
+         */
+        getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void;
+        /**
+         *
+         *
+         * @param querySelectoreven
+         */
+        setMonth(ev: Event): void;
+        /**
+         * 获取空白的非上月天数 + 当月天数
+         *
+         * @param this
+         */
+        getDateArr(): number[];
+        /**
+         * 获取日期
+         *
+         * @param event
+         */
+        pickDay(ev: Event): string;
+        /**
+         *
+         * @param event
+         */
+        pickupTime(event: Event): void;
+    };
+};
+export default _default;

package/dist/widget/calendar/Calendar.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+/**
+ * 日期选择器
+ */
+exports.default = {
+    props: {
+        showTime: Boolean // 是否显示时间，即“时分秒”
+    },
+    data() {
+        let date = new Date;
+        return {
+            date: date,
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: 1
+        };
+    },
+    mounted() {
+        this.$options.watch.date.call(this);
+    },
+    watch: {
+        date() {
+            this.year = this.date.getFullYear();
+            this.month = this.date.getMonth() + 1;
+            this.render();
+        }
+    },
+    methods: {
+        /**
+         * 画日历
+         */
+        render() {
+            let arr = this.getDateArr(), // 用来保存日期列表
+            frag = document.createDocumentFragment(); // 插入日期
+            while (arr.length) {
+                let row = document.createElement("tr"); // 每个星期插入一个 tr
+                for (let i = 1; i <= 7; i++) { // 每个星期有7天
+                    let cell = document.createElement("td");
+                    if (arr.length) {
+                        let d = arr.shift();
+                        if (d) {
+                            let text = this.year + '-' + this.month + '-' + d;
+                            cell.title = text; // 保存日期在 title 属性
+                            cell.className = 'day day_' + text;
+                            cell.innerHTML = d + "";
+                            let on = new Date(this.year, this.month - 1, d);
+                            // 判断是否今日
+                            if (isSameDay(on, this.date)) {
+                                cell.classList.add('onToday');
+                                // this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
+                            }
+                            // 判断是否选择日期
+                            // this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
+                        }
+                    }
+                    row.appendChild(cell);
+                }
+                frag.appendChild(row);
+            }
+            // 先清空内容再插入
+            let tbody = this.$el.querySelector("table tbody");
+            tbody.innerHTML = '';
+            tbody.appendChild(frag);
+        },
+        /**
+         * 获取指定的日期
+         *
+         * @param dateType
+         * @param month
+         */
+        getDate(dateType, month) {
+            let nowYear = this.date.getFullYear(), nowMonth = this.date.getMonth() + 1; // 当前日期
+            switch (dateType) {
+                case 'preMonth': // 上一月
+                    this.date = new Date(nowYear, nowMonth - 2, 1);
+                    break;
+                case 'nextMonth': // 下一月
+                    this.date = new Date(nowYear, nowMonth, 1);
+                    break;
+                case 'setMonth': // 指定月份
+                    this.date = new Date(nowYear, month - 1, 1);
+                    break;
+                case 'preYear': // 上一年
+                    this.date = new Date(nowYear - 1, nowMonth - 1, 1);
+                    break;
+                case 'nextYear': // 下一年
+                    this.date = new Date(nowYear + 1, nowMonth - 1, 1);
+                    break;
+            }
+        },
+        /**
+         *
+         *
+         * @param querySelectoreven
+         */
+        setMonth(ev) {
+            let el = ev.target;
+            this.getDate('setMonth', Number(el.selectedOptions[0].value));
+        },
+        /**
+         * 获取空白的非上月天数 + 当月天数
+         *
+         * @param this
+         */
+        getDateArr() {
+            let arr = [];
+            // 算出这个月1号距离前面的星期天有多少天
+            for (let i = 1, firstDay = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
+                arr.push(0);
+            // 这个月有多少天。用上个月然后设置日子参数为 0，就可以得到本月有多天
+            for (let i = 1, monthDay = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
+                arr.push(i);
+            return arr;
+        },
+        /**
+         * 获取日期
+         *
+         * @param event
+         */
+        pickDay(ev) {
+            let el = ev.target, date = el.title;
+            this.$emit('pickdate', date);
+            return date;
+        },
+        /**
+         *
+         * @param event
+         */
+        pickupTime(event) {
+            let hour = this.$el.querySelector('.hour'), minute = this.$el.querySelector('.minute'), time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
+            this.$emit('pick-time', time);
+        }
+    }
+};
+/**
+  * 判断两个日期是否同一日
+  *
+  * @param d1
+  * @param d2
+  */
+function isSameDay(d1, d2) {
+    return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
+}
+//# sourceMappingURL=Calendar.js.map

package/dist/widget/calendar/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/widget/calendar/Calendar.ts"],"names":[],"mappings":"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"}

package/dist/widget/calendar/Calendar.less

@@ -0,0 +1,210 @@
+// 日历选择器
+.aj-form-calendar {
+	font-family        : Verdana;
+	font-size          : .8rem;
+	background-color   : white;
+	border             : 1px solid lightgray;
+	border-radius      : 5px;
+	box-shadow         : 0 5px 10px rgba(0, 0, 0, 0.2);
+	text-align         : center;
+	width              : 320px;
+	-webkit-user-select: none;
+	-moz-user-select   : none;
+	user-select        : none;
+	padding            : 10px;
+	line-height        : 1.5em;
+
+	a {
+		color: #1e5494;
+		text-decoration: none;
+	}
+
+	.selectYearMonth {
+		float: right;
+		width: 100px;
+
+		div {
+			display: inline-block;
+		}
+	}
+
+	.showCurrentYearMonth {
+		text-align: left;
+		color     : lightgray;
+		font-size : 1.6rem;
+		padding   : 5% 0;
+	}
+
+	table {
+		width          : 100%;
+		border         : 0;
+		border-spacing : 0;
+		border-collapse: collapse;
+
+		thead {
+			tr {
+				color        : #acacac;
+				border-bottom: 1px solid lightgray;
+				margin-bottom: 15px;
+			}
+		}
+
+		td {
+			font-size       : .8rem;
+			padding         : .4rem;
+			letter-spacing  : 1px;
+			border          : 0;
+			background-color: white;
+			text-align      : center;
+
+			&.day {
+				cursor    : pointer;
+				transition: background-color 190ms ease-in-out;
+			}
+
+			&.onToday {
+				font-weight: bold;
+				color      : #C60;
+			}
+
+			&.onSelect {
+				font-weight: bold;
+			}
+
+			&.day:hover {
+				color           : darken(#e0ecf9, 50%);
+				background-color: #e9e9e9;
+			}
+		}
+	}
+
+	.idCalendarPre,
+	.idCalendarNext {
+		cursor       : pointer;
+		font-size    : 1.2rem;
+		text-align   : center;
+		border-radius: 3px;
+		padding      : 2px 5px;
+
+		&:hover {
+			background-color: #e9e9e9;
+		}
+	}
+
+	.idCalendarPre {
+		float: left;
+	}
+
+	.idCalendarNext {
+		float: right;
+	}
+
+	.btns {
+		position: absolute;
+		left    : 15px;
+		bottom  : 5px;
+
+		input[type=button] {
+			font-size: .8rem;
+			padding  : 2px 4px;
+			margin   : 1px;
+		}
+	}
+	.showTime{
+		margin-top: 5%;
+		select {
+			min-width:50px;
+			text-align: center;
+		}
+	}
+}
+
+// 日历 悬浮出现
+.aj-form-calendar-input {
+	position: relative;
+	width   : 125px;
+	line-height: 19px;
+
+	&.show-time {
+		width: 170px;
+	}
+
+	display: inline-block;
+
+	input[type=text] {
+		// .aj-input-base();
+		max-width: 100% ! important;
+		width    : 100% ! important;
+
+	}
+
+	.icon {
+		position              : absolute;
+		width                 : 17px;
+		height                : 16px;
+		right                 : 5px;
+		top                   : 6px;
+		opacity               : .6;
+		cursor                : pointer;
+		//		.menu {
+		//			color: #000;
+		//			position: absolute;
+		//			margin-left: 2px;
+		//			margin-top: 8px;
+		//			width: 17px;
+		//			height: 1px;
+		//			background-color: currentColor;
+		//			&:before {
+		//				content: '';
+		//				position: absolute;
+		//				top: -5px;
+		//				left: 0;
+		//				width: 17px;
+		//				height: 1px;
+		//				background-color: currentColor;
+		//			}
+		//
+		//			&:after {
+		//				content: '';
+		//				position: absolute;
+		//				top: 5px;
+		//				left: 0;
+		//				width: 17px;
+		//				height: 1px;
+		//				background-color: currentColor;
+		//			}
+		//		}
+	}
+
+	.aj-form-calendar {
+		z-index : 999999999;
+		display : none;
+		position: absolute;
+
+		&.positionFixed {
+			// 若父元素 overflow:hidden，则 position: absolute 不能完整显示，故 fixed
+			position: fixed;
+		}
+
+		right: -3px;
+		top  : 25px;
+	}
+
+	&:hover .aj-form-calendar,
+	.aj-form-calendar:hover {
+		display: block;
+
+		.icon {
+			opacity: .5;
+		}
+	}
+
+	&:hover .icon {
+		opacity: 1;
+	}
+
+	.selectYearMonth select {
+		min-width: 65px;
+		outline: none;
+	}
+}

package/dist/widget/calendar/Calendar.ts

@@ -0,0 +1,167 @@
+/**
+ * 日期选择器
+ */
+export default {
+    props: {
+        showTime: Boolean // 是否显示时间，即“时分秒”
+    },
+    data() {
+        let date: Date = new Date;
+        return {
+            date: date,
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: 1
+        };
+    },
+    mounted(): void {
+        this.$options.watch.date.call(this);
+    },
+    watch: {
+        date(): void {
+            this.year = this.date.getFullYear();
+            this.month = this.date.getMonth() + 1;
+            this.render();
+        }
+    },
+    methods: {
+        /**
+         * 画日历
+         */
+        render(): void {
+            let arr: number[] = this.getDateArr(),// 用来保存日期列表
+                frag: DocumentFragment = document.createDocumentFragment();// 插入日期
+
+            while (arr.length) {
+                let row: HTMLTableRowElement = document.createElement("tr"); // 每个星期插入一个 tr
+
+                for (let i = 1; i <= 7; i++) { // 每个星期有7天
+                    let cell: HTMLTableCellElement = document.createElement("td");
+
+                    if (arr.length) {
+                        let d: number = arr.shift();
+
+                        if (d) {
+                            let text: string = this.year + '-' + this.month + '-' + d;
+                            cell.title = text;  // 保存日期在 title 属性
+                            cell.className = 'day day_' + text;
+                            cell.innerHTML = d + "";
+
+                            let on: Date = new Date(this.year, this.month - 1, d);
+
+                            // 判断是否今日
+                            if (isSameDay(on, this.date)) {
+                                cell.classList.add('onToday');
+                                // this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
+                            }
+                            // 判断是否选择日期
+                            // this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
+                        }
+                    }
+
+                    row.appendChild(cell);
+                }
+
+                frag.appendChild(row);
+            }
+
+            // 先清空内容再插入
+            let tbody = <HTMLElement>this.$el.querySelector("table tbody");
+            tbody.innerHTML = '';
+            tbody.appendChild(frag);
+        },
+
+        /**
+         * 获取指定的日期
+         * 
+         * @param dateType 
+         * @param month 
+         */
+        getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void {
+            let nowYear: number = this.date.getFullYear(),
+                nowMonth: number = this.date.getMonth() + 1; // 当前日期
+
+            switch (dateType) {
+                case 'preMonth':// 上一月
+                    this.date = new Date(nowYear, nowMonth - 2, 1);
+                    break;
+                case 'nextMonth':// 下一月
+                    this.date = new Date(nowYear, nowMonth, 1);
+                    break;
+                case 'setMonth':// 指定月份
+                    this.date = new Date(nowYear, month - 1, 1);
+                    break;
+                case 'preYear':// 上一年
+                    this.date = new Date(nowYear - 1, nowMonth - 1, 1);
+                    break;
+                case 'nextYear':// 下一年
+                    this.date = new Date(nowYear + 1, nowMonth - 1, 1);
+                    break;
+            }
+        },
+
+        /**
+         * 
+         * 
+         * @param querySelectoreven
+         */
+        setMonth(ev: Event): void {
+            let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
+            this.getDate('setMonth', Number(el.selectedOptions[0].value));
+        },
+
+        /**
+         * 获取空白的非上月天数 + 当月天数
+         * 
+         * @param this 
+         */
+        getDateArr(): number[] {
+            let arr: number[] = [];
+
+            // 算出这个月1号距离前面的星期天有多少天
+            for (let i = 1, firstDay: number = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
+                arr.push(0);
+
+            // 这个月有多少天。用上个月然后设置日子参数为 0，就可以得到本月有多天
+            for (let i = 1, monthDay: number = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
+                arr.push(i);
+
+            return arr;
+        },
+
+        /**
+         * 获取日期
+         * 
+         * @param event 
+         */
+        pickDay(ev: Event): string {
+            let el: HTMLElement = <HTMLElement>ev.target,
+                date: string = el.title;
+            this.$emit('pickdate', date);
+
+            return date;
+        },
+
+        /**
+         * 
+         * @param event 
+         */
+        pickupTime(event: Event): void {
+            let hour: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.hour'),
+                minute: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.minute'),
+                time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
+
+            this.$emit('pick-time', time);
+        }
+    }
+};
+
+/**
+  * 判断两个日期是否同一日
+  * 
+  * @param d1 
+  * @param d2 
+  */
+function isSameDay(d1: Date, d2: Date): boolean {
+    return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
+}

package/dist/widget/calendar/Calendar.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="aj-form-calendar">
+    <div class="selectYearMonth">
+      <a href="###" @click="getDate('preYear')" class="preYear" title="上一年">	&#171; <!-- &lt; --></a>
+      <select @change="setMonth" v-model="month">
+        <option value="1">一月</option>
+        <option value="2">二月</option>
+        <option value="3">三月</option>
+        <option value="4">四月</option>
+        <option value="5">五月</option>
+        <option value="6">六月</option>
+        <option value="7">七月</option>
+        <option value="8">八月</option>
+        <option value="9">九月</option>
+        <option value="10">十月</option>
+        <option value="11">十一月</option>
+        <option value="12">十二月</option>
+      </select>
+      <a href="###" @click="getDate('nextYear')" class="nextYear" title="下一年"> &#187;<!-- &gt; --> </a>
+    </div>
+    <div class="showCurrentYearMonth">
+      <span class="showYear">{{year}}</span>/<span class="showMonth">{{month}}</span>
+    </div>
+    <table>
+      <thead>
+        <tr>
+          <td>日</td>
+          <td>一</td>
+          <td>二</td>
+          <td>三</td>
+          <td>四</td>
+          <td>五</td>
+          <td>六</td>
+        </tr>
+      </thead>
+      <tbody @click="pickDay"></tbody>
+    </table>
+    <div v-if="showTime" class="showTime">
+      时 <select class="hour aj-select">
+        <option v-for="n in 24" :key="n">{{n}}</option>
+      </select>
+      分 <select class="minute aj-select">
+        <option v-for="n in 61" :key="n">{{n - 1}}</option>
+      </select>
+      <a href="#" @click="pickupTime">选择时间</a>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" src="./Calendar.ts"></script>
+
+<style lang="less" scoped  src="./Calendar.less"></style>