封装方法——格式化日期-dayjs库的使用

最新推荐文章于 2025-03-31 17:08:08 发布

viceen

最新推荐文章于 2025-03-31 17:08:08 发布

阅读量1.4k

点赞数 1

分类专栏： js知识工具 vue3+ts-运维文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_44867717/article/details/121127697

版权

工具同时被 3 个专栏收录

163 篇文章

订阅专栏

js知识

152 篇文章

订阅专栏

vue3+ts-运维

87 篇文章

订阅专栏

封装方法——格式化日期-dayjs库的使用

Day.js中文网—— 一个轻量的处理时间和日期的 JavaScript 库

1、安包

“dayjs”: “^1.9.7”,

2.1、简易使用

示例1

 //当月1号
const monthDate = dayjs().date(1).toDate();

const last_month = dayjs().format('YYYY-MM');
state.pageInfo.time = last_month;

示例2

<el-form-item label="期间">
    <el-date-picker
        v-model="formData.salaryDate"
        placeholder="选择日期"
        type="month"
    >
    </el-date-picker>
</el-form-item>

<script>
formData: {
    salaryDate: null,
},
    
onMounted(() => {
    let last_month = dayjs().subtract(1, 'month').format('YYYY-MM');
    state.formData.salaryDate = new Date(last_month);
    network.queryPageData();
});
</script>

示例3

import dayjs from 'dayjs';

let oneDay = 24 * 60 * 60 * 1000;
const disableStartTime = (time) => {
    return time.getTime() < new Date(formatDateMonth(new Date())).getTime() - oneDay;
};
const disableEndTime = (time) => {
    if (state.form.startTime) {
        return time.getTime() > dayjs(state.form.startTime).toDate().getTime();
    }
    return time.getTime() < dayjs().toDate().getTime() - oneDay;
    
};
onMounted(() => {
    funMethods.getStaffInfo();
    funMethods.getallowanceDate();
});
return {
    disableStartTime,
    disableEndTime,
    ...toRefs(state),
    ...funMethods
};

示例4

vue.config.js

const dayjs = require('dayjs');
const dayjs_now = dayjs();
process.env.VUE_APP_FEBUILDTIME = dayjs_now.valueOf();
process.env.VUE_APP_FEBUILDTIMEX = 'EHR build time：' + dayjs_now.format('YYYY-MM-DD HH:mm:ss');

public/index.html

<head>
    <meta content='<%= VUE_APP_FEBUILDTIME %>' name='febuildtime'>
    <meta content='<%= VUE_APP_FEBUILDTIMEX %>' name='febuildtimex'>
</head>

2.2、封装的方法

src/utils/date-formator.ts

import dayjs from 'dayjs';

/**
 * @param defaultTimeArrS 到秒 默认时间  当天的000000到235959
 * @param defaultTimeArrM 到分 默认时间 当天的0000到2359
 */
export const defaultTimeArrS = [
    new Date('2000-01-01 00:00:00'),
    new Date('2000-01-01 23:59:59')
];

export const defaultTime = [
    new Date('2000-01-01 23:59:59')
];
export const defaultTimeArrM = [
    new Date('2000-01-01 00:00'),
    new Date('2000-01-01 23:59')
];

export const defaultTimeM = [
    new Date('2000-01-01 23:59')
];


/**
 * 格式化日期时间
 * @param date
 */
export function formatDateTime(date: Date | string | number): string {
    if (!date) return '';
    return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
}

/**
 * 格式化日期时间
 * @param date
 */
export function formatDateMin(date: Date | string | number): string {
    if (!date) return '';
    return dayjs(date).format('YYYY-MM-DD HH:mm');
}

/**
 * 格式化日期
 * @param date
 */
export function formatDate(date: Date | string | number): string {
    if (!date) return '';
    return dayjs(date).format('YYYY-MM-DD');
}

export function formatMin(date: Date | string | number): string {
    if (!date) return '';
    return dayjs(date).format('HH:mm');
}


/**
 * 格式化日期
 * @param date
 */
export function formatDateMonth(date: Date | string | number): string {
    if (!date) return '';
    return dayjs(date).format('YYYY-MM');
}

/**
 * 格式化时间
 * @param date
 */
export function formatTime(date: Date | string | number): string {
    if (!date) return '';
    return dayjs(date).format('hh:mm:ss');
}

/**
 * 创建默认时间
 * @param date
 */
export function createDate(time: string): Date {
    const arr = time.split(':');
    const date = new Date();
    date.setHours(Number(arr[0]));
    date.setMinutes(Number(arr[1]));
    date.setSeconds(Number(arr[2]));
    return date;
}

/**
 * 获取上、下个月日期 格式 2020-12
 */
export function getNLMonth(time, num) {//
    var date = new Date(time);
    var year = date.getFullYear();
    var month: any = date.getMonth() + num;
    if (month == 0) {
        year = year - 1;
        month = 12;
    }
    if (month > 12) {
        year = year + 1;
        month = 1;
    }
    month = month < 10 ? `0${month}` : month;
    return year + '-' + month;
}

/**
 * 1-31 天 且 保留一位小数
*/
let monthDay = null
export function formatterMounthDay(day) {
    if (day < 31 && day>= 1) {
        monthDay = day
        if (day.includes('.') && day.split('.')[1]) {
            console.log(day.split('.')[1].length);
            if (day.split('.')[1].length <3) {
                monthDay = day.split('.')[0] + "." + day.split('.')[1].toString()
            }else {
                monthDay = day.split('.')[0] + "." + day.split('.')[1][0] +  day.split('.')[1][1]
            }
        }
    } else if (day == 31) {
        monthDay = day
        if (day.includes('.')) {
            monthDay = day.split('.')[0]
        }
    }else if (day == 0 || day == '') {
        monthDay = null
    }
    return monthDay
}

3、页面中使用

<script>
import { formatDateMonth, formatDateTime, formatDate} from '@/utils/date-formator';
    
obj.time = obj.time ?? formatDateMonth(state.time)
    
applyTime: formatDateTime(new Date(date)), 
state.formData.interviewTime = formatDateMin(new Date()),
</script>

4、具体实例

<el-date-picker
    v-model="form.startTime"
    :default-time="defaultTimeArrS"
    :disabled-date="disabledSTDate"
    class="width-294"
    format="YYYY-MM-DD"
    start-placeholder="请选择开始日期"
    range-separator="至"
    end-placeholder="请选择结束日期"
    style="width: 100%"
    type="daterange"
    :clearable="false"
    :editable="false"
></el-date-picker>

<el-form-item label="月实际出勤天数" prop="attendDays" v-if="attendTypeRule ===35">
		<el-input @input="inputattendDays" placeholder="请输入月实际出勤天数" class="width-294" v-model="ruleForm.attendDays">
            <template #append>天</template>
       </el-input>
</el-form-item>

<script>
    import {
        defaultTimeArrS,
        formatDate,
        formatDateTime,
        formatMin,
        formatDateMonth,
        formatterMounthDay
    } from '@/utils/date-formator';

    state.formData.startTime = formatDate(val.txtValue[0]) + ' 00:00:00'
    state.formData.endTime = formatDate(val.txtValue[1]) + ' 23:59:59'

    
 //方法
 // 1-31天 且 保留一位小数
    inputattendDays(day) {
        state.ruleForm.attendDays = formatterMounthDay(day)
    },
    inputMonthDay(day) {
        state.ruleForm.shouldAttendDays = formatterMounthDay(day)
    },
    
    return {
        defaultTimeArrS,
        ...toRefs(state),
        ...funMethods,
    };
</script>