npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

date-week-range

v2.0.3

Published

This is a week range selector.

Downloads

68

Readme

date-week-range(周范围选择器)

v1 版本基于 element-ui 2.x 开发,可依赖 element-ui 2.x 使用;也可独立使用,但要引入相应的样式

v2 版本基于 element-plus 开发。可依赖 element-plus 使用;也可独立使用,但要引入相应的样式。

v1 版本传送门

示例

v1 版本v2 版本

目的

  • 项目需求,需要用到周选择器这功能,但没找到相应的组件库,故自己基于 element-ui/element-plus 改造了个。

兼容

  • v1 版本,对应v1分支,仅支持vue2
  • v2 版本,对应v2分支,仅支持vue3

计划

  • ~~1.x 版本,支持 vue2(已完成)~~
  • ~~2.x 版本,将进行支持 vue3,计划通过 date-week-range@next 方式升级使用。~~
  • ~~等待vue3稳定,将会把主版本从 v1 切换至 v2 ,master 分支亦将会同步成 v2 分支。~~

注意

  • 不会自动注入css,需手动引入,以避免出现样式覆盖情况;如果全局引入了 element-plus 样式,则不需额外引入!

  • 本地开发模式,默认使用esm模块,如需转义成es5,请参考:

  // 在 vue-cli 将指定的 node_modules 模块转义成es5:
  // vue.config.js
  module.exports = {
    // 省略代码
    transpileDependencies: ['date-week-range', 'element-plus']
  }

安装 && 引入

  • 安装

npm install date-week-range@next --save
yarn add date-week-range@next --save
  • 注册

全局注册
import DateWeekRange from 'date-week-range'
import { createApp } from 'vue'

// 引入样式;如果全局引入了 element-plus 样式,则无需再次引入


// 全局引入 element-plus 样式
// import 'element-plus/dist/index.css'

// 或引入
// import 'element-plus/theme-chalk/el-icon.css'
// import 'element-plus/theme-chalk/el-date-picker.css'
// import 'element-plus/theme-chalk/el-var.css';

// 或引入
// import 'date-week-range/index.css'

const app = createApp({
  /* ... */
})

app.use(DateWeekRange)
局部注册
<template>
  <DateWeekRange v-model="test"></DateWeekRange>
</template>

<script>
import { DateWeekRange } from 'date-week-range'
// 注意要引入样式!引入方式参考上面

export default {
  data() {
    return {
      test: ''
    }
  },
  components: {
    DateWeekRange
  }
}
</script>
浏览器使用
<!-- 引入样式。如果全局引入了element-plus 样式,则不需额外引入 -->
<!-- 全局引入 element-plus 样式 -->
<link type="text/css" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
<!-- 或者额外引入 -->
<link type="text/css" href="https://unpkg.com/element-plus/lib/theme-chalk/el-icon.css">
<link type="text/css" href="https://unpkg.com/element-plus/lib/theme-chalk/el-date-picker.css">

<script src="https://unpkg.com/date-week-range@next"></script>

<body>
  <div id="app">
    <date-week-range v-model="test"></date-week-range>
  </div>
</body>

<script>
const app = window.Vue.createApp({
  data() {
    return {
      test: ''
    }
  }
})
app.use(window.DateWeekRange)
app.mount("#app")
</script>

国际化

默认使用中文

全局注册时

import { createApp } from 'vue'
import App from './App.vue'
import DateWeekRange from 'date-week-range'
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'

const app = createApp(App)

app.use(DateWeekRange, { locale })
app.mount('#app')

export default app

局部注册时

<script>
import { DateWeekRange, locale } from 'date-week-range'
import lang from 'element-plus/lib/locale/lang/zh-cn'
import 'dayjs/locale/zh-cn'

locale(lang)
/* 省略… */
</script>

文档

本插件是在 element-plus 框架中的 el-date-picker 组件基础上进行开发,其文档和 el-date-picker组件 type="daterange" 一致。