methods: { handlePanelChange(value) { if (this.formState.settleMonth[1] && this.formState.settleMonth[1]._d != value[1]._d) { this.monthPickShow = false; console.log(value) this.formState.settleMonth = value; this.formState.settleMonthFrom = moment(value[0]).format('YYYY-MM') this.formState.settleMonthTo = moment(value[1]).format('YYYY-MM') handleOpenChange(status) { if(status){ this.monthPickShow = true; }else{ this.monthPickShow = false

二、年度选择

直接上代码：

<a-date-picker
    format="YYYY"
    mode="year"
    placeholder="请选择"
    :value="form.planYear"
    v-model="form.planYear"
    :open="open"
    ref="yearUI"
    @openChange="openChange"
    @panelChange="panelChange"
    style="width: 100%"
export default {
  data() {
    return {
        open: false,
  methods: {
    openChange(status) {
      if (status) {
        this.open = true;
      } else {
        this.open = false;
    panelChange(value) {
      this.$set(this.form, "planYear", value);
      this.open = false;
				
前端实现一个时间区间内，再次单选功能，使用Antd组件库内日历组件Calendar
需求：需要先让用户选择一个时间区间，然后再这个时间区间中，让用户再次去单选其种特殊日期。
1.先用Antd组件库中日期选择DatePicker.RangePicker实现让用户选择时间区间
2.在选择完时间区间后，用这个时间区间，弹出一个在这个时间区间范围内的日历组件Calendar
3.通过Calendar组件（日历）的onSelect（点击事件）获得点击value，然后通过dateCellRender
添加css文件
<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity = "sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin = "anonymous" >
<link rel = "stylesheet" type = "text/css" href = "https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" / >
npm安装
npm install-保存ngx-input-date
				
Ant design VUE 的年时间控件无法选中获取值解决方法
通过两个openChange 和 panelChange 两个函数解决
Ant design 的mode为year 日期控件为展示年 format规定展示的格式 YYYY表示只展示年
<a-date-picker mode="year" format="YYYY"
               :open="isopen" /...
				
VueRangedatePicker日期选择器，具有范围选择演示https://bliblidotcom.github.io/vue-rangedate-picker/demo/安装npm install --save vue VueRangedatePicker日期选择器，具有范围选择演示https://bliblidotcom.github.io/vue -rangedate-picker / demo /安装npm install --save vue-rangedate-picker用法捆绑程序（Webpack，汇总）从'vue'导入Vue从'vue-rangedate-picker'导入VueRangedatePicker Vue.use（VueRangedatePicker）浏览器
不需要moment.js
tl;博士
通过执行npm install @wojtekmaj/react-daterange-picker或yarn add @wojtekmaj/react-daterange-picker 。
 通过添加import DateRangePicker from '@wojtekmaj/react-daterange-picker'来import DateRangePicker from '@wojtekmaj/react-daterange-picker' 。
 通过添加<DateRangePicker> 。 使用onChange道具获取新值。
可以在sample目录中找到一个最小的演示页面。
寻找时间选择器或日期时间
yarn add react-native-daterange-picker
npm install --save react-native-daterange-picker 
日期范围
import React from "react" ;
import { StyleSheet , View , Text } from "react-native" ;
import moment from "moment" ;
import DateRangePicker from "react-native-daterange-picker" ;
export default class App extends
				
- Svelte 是一个`构建 web 应用程序的工具`。
- Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。
但是有一个关键的区别：Svelte 在 `构建/编译阶段` 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。
你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中
<a-range-picker
  :defaultValue="[moment().subtract(1, 'month'), moment()]"
  :disabledDate="disabledDate"
2. 在 `methods` 中定义 `disabledDate` 方法，该方法用于限制时间范围，返回 `true` 代表该时间不可选。
```vue
<script>
export default {
  methods: {
    disabledDate(current) {
      // 获取当前日期
      const today = moment();
      // 获取一个月前的日期
      const oneMonthAgo = moment().subtract(1, 'month');
      // 如果当前日期早于一个月前的日期或晚于今天的日期，则不可选
      return current < oneMonthAgo || current > today;
</script>
这样，就可以限制 `a-range-picker` 组件的选择时间范围为一个月了。