uView Calendar 日历

简介: uView Calendar 日历

此组件用于单个选择日期,范围选择日期等,日历被包裹在底部弹起的容器中。

注意: 此组件与Picker 选择器的日期选择模式有一定的重合之处,区别在于本组件为更专业的日期选择场景,能选择日期范围等。 另外Picker组件的日期模式可以配置更多的参数,如时、分、秒等,可以根据不同的使用场景进行选择。

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

  • 通过show绑定一个布尔变量用于打开或收起日历弹窗。
  • 通过mode参数指定选择日期模式,包含单选/多选/范围选择。
<template>
  <view>
    <u-calendar :show="show"></u-calendar>
    <u-button @click="show = true">打开</u-button>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        show: false,
      }
    }
  }
</script>

copy

#日历模式

  • modesingle只能选择单个日期
  • modemultiple可以选择多个日期
  • moderange可以选择日期范围

#单个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个数组,有如下属性:

["2021-07-01"]

copy

示例代码:

<template>
  <u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
        mode: 'single'
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      }
    }
  }
</script>

copy

#多个日期模式

选择日期后,需要点击底部的确定按钮才能触发回调事件,回调参数为一个数组,有如下属性:

["2021-07-27", "2021-07-29", "2021-07-30"]

copy

示例代码:

<template>
  <u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
        mode: 'multiple'
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      }
    }
  }
</script>

copy

#日期范围模式

此模式用于选择一个日期范围,比如住酒店的入住到离店的日期范围,

此模式的返回参数如下:

["2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31"]

copy

示例代码:

<template>
  <u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
        mode: 'range'
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      }
    }
  }
</script>

copy

#自定义主题颜色

组件可传入color参数,更改组件主题色

示例代码:

<template>
  <u-calendar :show="show" 
    color="#f56c6c" :mode="mode" @confirm="confirm"></u-calendar>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
        mode: 'range'
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      }
    }
  }
</script>

copy

#自定义文案

组件可以通过formatter以函数的方式定义日期文案

注意:

微信小程序不支持通过props传递函数参数,所以组件内部暴露了一个setFormatter方法用于设置格式化方法,注意在页面的onReady生命周期获取ref再操作。

<template>
  <u-calendar 
        startText="住店"
        endText="离店"
        confirmDisabledText="请选择离店日期"
        :formatter="formatter"
        :show="show" 
        :mode="mode" 
        @confirm="confirm"
    ref="calendar"
  >
    </u-calendar>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
        mode: 'range'
      }
    },
    onReady() {
      // 如果需要兼容微信小程序的话,需要用此写法
      this.$refs.calendar.setFormatter(this.formatter)
    },
    methods: {
      confirm(e) {
        console.log(e);
      },
      formatter(day) {
        const d = new Date()
        let month = d.getMonth() + 1
        const date = d.getDate()
        if(day.month == month && day.day == date + 3)
        {
          day.bottomInfo = '有优惠'
          day.dot = true
        }
        return day
        }
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    color: $u-primary;
    text-align: center;
    padding: 20rpx 0 0 0;
  }
</style>

copy

#日期最大范围

组件可以通过maxDate定义日期文案

<template>
  <u-calendar 
        :maxDate="maxDate"
        :show="show" 
        @confirm="confirm">
  </u-calendar>
</template>
<script>
  const d = new Date()
  const year = d.getFullYear()
  let month = d.getMonth() + 1
  month = month < 10 ? `0${month}` : month
  const date = d.getDate()
  export default {
    data() {
      return {
        show: true,
        maxDate: `${year}-${month}-${date + 10}`,
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      },
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    color: $u-primary;
    text-align: center;
    padding: 20rpx 0 0 0;
  }
</style>

copy

#是否显示农历

组件可以通过showLunar定义是否显示农历

<template>
  <u-calendar 
        showLunar
        :show="show" 
        @confirm="confirm">
  </u-calendar>
</template>
<script>
  export default {
    data() {
      return {
        show: true,
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      },
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    color: $u-primary;
    text-align: center;
    padding: 20rpx 0 0 0;
  }
</style>

copy

#默认日期

组件可以通过defaultDate定义默认日期

<template>
  <u-calendar 
        :defaultDate="defaultDateMultiple"
        :show="show" 
        mode="multiple"
        @confirm="confirm">
  </u-calendar>
</template>
<script>
  const d = new Date()
  const year = d.getFullYear()
  let month = d.getMonth() + 1
  month = month < 10 ? `0${month}` : month
  const date = d.getDate()
  export default {
    data() {
      return {
        show: true,
        defaultDateMultiple: [`${year}-${month}-${date}`, `${year}-${month}-${date + 1}`, `${year}-${month}-${date + 2}`],
      }
    },
    methods: {
      confirm(e) {
        console.log(e);
      },
    }
  }
</script>
<style lang="scss" scoped>
  .title{
    color: $u-primary;
    text-align: center;
    padding: 20rpx 0 0 0;
  }
</style>
相关文章
|
前端开发 JavaScript
一步一步理解日历calendar(三)
一步一步理解日历calendar(一)描述画出日历这张表格;一步一步理解日历calendar(二)增加了上一年、下一年、上一月、下一月的功能;一步一步理解日历calendar(三)采用了面向对象的方式表现出来功能介绍:1、上一年、下一年、上一月、下一月、今天,功能相对简单。
910 0
|
前端开发 JavaScript
一步一步理解日历calendar(二)
新增功能:      1、增加了上一年,下一年,上个月,下个月,今天功能。      2、今天着重显示。效果如下图展示:       // 根据给定的参数year、month,返回某年某月的天数      //例如: MaxDayOfDate(2012,1)    结果:31         ...
793 0
Calendar日历
Calendar calendar=Calendar.getInstance(); //上一年的今天 calendar.add(Calendar.YEAR,-1); System.out.println(calendar.
1056 0
|
前端开发 JavaScript
一步一步理解日历calendar(一)
这里开始介绍一个史上最简单的日历,只显示当月,但是它是一个雏形,会一步一步完善,效果如下:                          (够简单,够帅气)实现方式如下:MaxDayOfDate作用是返回某月的最大天数GetDayOfWeek作用是当月的第一天是星期几 星期一:1,星期二:2,...
1068 0
|
9月前
|
JavaScript API
vue element plus Calendar 日历
vue element plus Calendar 日历
151 0
|
9月前
|
小程序 API
uniapp中uview组件库丰富的Calendar 日历用法
uniapp中uview组件库丰富的Calendar 日历用法
955 0
181Echarts - 日历坐标系(Calendar Effectscatter)
181Echarts - 日历坐标系(Calendar Effectscatter)
54 0
|
7月前
|
JavaScript
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
vue 农历日期转公历日期(含插件 js-calendar-converter 使用教程)
287 0

热门文章

最新文章