qt 下拉框组件日历组件_VueJS功能日历组件

qt 下拉框组件日历组件

VueJS功能日历(日期选择器，日期范围) (VueJS Functional Calendar (Date Picker, Date Range))

VueJS Functional Calendar Component.

VueJS功能日历组件。

View Documentation 查看文档 Download Source 下载源

• Lightweight, high performance calendar component based on Vue.js

  基于Vue.js的轻量级高性能日历组件

• Small memory usage, good performance, good style, and high scalability

  内存使用量少，性能好，样式好以及可伸缩性高

• Native js development, no third-party library introduced

  本机js开发，未引入任何第三方库

• Date Picker, Date Range, Multiple Calendars, Modal Calendar

  日期选择器，日期范围，多个日历，模式日历

为什么 (Why)

• Many clicks on Github pop-up calendar to select components for a certain time, but did not find a component that simply displays the calendar and can click to get time.

  在Github弹出式日历上多次单击以选择特定时间的组件，但没有找到仅显示日历并可以单击以获取时间的组件。

• A small number of calendar components take up too much memory, which is obviously not reasonable for a simple function like a calendar.

  少数日历组件占用了过多的内存，这对于诸如日历之类的简单功能显然是不合理的。

安装 (Install)

npm i vue-functional-calendar --save

用法 (Usage)

导入组件 (Import Component)

// Introduced in vue file
import FunctionalCalendar from 'vue-functional-calendar';

组件设定 (Component Settings)

export default {
    components: {
        FunctionalCalendar
    },
    data() {
        return {
            calendar: {}
        }
    },
    clickDay(data) {
      console.log(data); // Get Clicked Day
    },
    changeDate(data) {
      console.log(data); //Click left and right to switch months
    },
    clickToday(data) {
      console.log(data); //Jumped to this month
    }
}

模板用法 (Template Usage)

<FunctionalCalendar
      // v-model="calendar"
      
      // :day-names="dayNames" //dayNames=['Su','Mo','Tu','We','Th','Fr','Sa']
      // :month-names="monthNames" //monthNames=["January","February","March","April","May","June","July","August","September","October","November","December"]
      
      // v-on:choseDay="clickDay"
      // v-on:changeMonth="changeDate"
      // v-on:isToday="clickToday"
      
      // :sundayStart="true"
      
      // :is-date-range="true"
      // :is-date-picker="true"
      // :is-modal="false"
      
      // :is-multiple="true"
      // :calendars-count="3"
      
      // :change-month-function="true"
      // :change-year-function="true"
      
      // :markDate=arr // arr=['2018/10/20','2018/10/28', '2018/10/16']
      // :agoDayHide='1514937600' //Do not click before a date. Timestamp 10 digits
      // :futureDayHide='1525104000' //Do not click after a date Timestamp 10 digits
></FunctionalCalendar>

多个标签示例 (Multiple tag examples)

The className of the April 1 tag is mark 1 and some markup styles are made according to the class.

4月1日标记的className是标记1，并且根据该类制作了一些标记样式。

arr=[{date:'2018/4/1',className:"mark1"}, {date:'2018/4/13',className:"mark2"}];

API (API)

Attributes	Description	Default	Whether it must pass
choseDay	Check the method called on a certain day to return the selected date YY-MM-DD	No	No
changeMonth	Switch the method called by the month, return the date to switch to a certain month YY-MM-DD	No	No
isToday	When switching the month, if you cut to the current month, call this method and return to the current month today.	No	No
markDate	If you need to be marked for a few days of the month, pass the date array of the month. Such as [2,6,8], the second month, the 6th, the 6th, the 8th is marked (the same mark)	Empty array	No
markDateMore	Need different tags as above, the last line of sample code for Usage	Empty Array	No
agoDayHide	Do not click before a date. The timestamp length is 10 digits.	0	No
futureDayHide	Do not click after a date. The timestamp length is 10 digits.	Very large	No

属性	描述	默认	是否必须通过
selectedDay	检查某天调用的方法以返回所选日期YY-MM-DD	没有	没有
changeMonth	切换月份调用的方法，返回日期以切换到某个月份YY-MM-DD	没有	没有
是今天	切换月份时，如果您削减到当前月份，请调用此方法并立即返回到当前月份。	没有	没有
markDate	如果您需要在一个月的几天内进行标记，请传递该月的日期数组。 如[2,6,8]，第二个月，第6，第6，第8被标记(相同的标记)	空数组	没有
markDateMore	需要与上述不同的标签，用法的示例代码的最后一行	空数组	没有
agoDayHide	不要在日期前单击。 时间戳记长度为10位数字。	0	没有
futureDayHide	不要在日期后单击。 时间戳记长度为10位数字。	很大	没有

将ref属性添加到Calendar选项卡，公开了三种直接切换月份的方法 (Add the ref attribute to the Calendar tab, exposing three methods to switch the month directly)

For example: <FunctionalCalendar ref="Calendar"></FunctionalCalendar>

    ✅ this.$refs.Calendar.PreMonth();  //Call method implementation to go to last month
    ✅ this.$refs.Calendar.NextMonth(); //Call method implementation to go to next month
    ✅ this.$refs.Calendar.ChoseMonth('2018-12-12'); //Call method implementation to go to a month
    ✅ this.$refs.Calendar.ChoseMonth('2018-12-12',false); //Jump to December 12, 18, but do not select the day
    //The second parameter false means that the date is not selected

翻译自: https://vuejsexamples.com/vuejs-functional-calendar-component/

qt 下拉框组件日历组件