示例

PCPhonePad

HTMLJAVASCRIPTCSS

<page>
    <form type='base'>
        <item label="daily" node="daily-picker" value="{{daily}}" :selectRange='selectRange' choice-trigger="{{false}}" name="daily2" />
    </form>
</page>

import DailyPicker from 'cabinx/components/daily-picker/0.6.0/index.js';

const today = new Date();

const endDay = new Date(today.getFullYear() + 1,today.getMonth());

export default XPage({
    components: {
        'daily-picker':DailyPicker,
    },
   data: {
        selectRange: [today, endDay],
        daily: {
              value: 0,
        },
   },
});

Attributes

参数	说明	类型	可选值	默认值	端	版本
selectRange	可选时间范围，用于控制弹出层日期选择器时间范围	Array	--	--	PC/Mobile	--
handles	频率可选配置	Array	见频率值	[0,1,2,3,4,5,6]	PC/Mobile	--
disabledEndPick	是否显示结束日期选项	Boolean	true/false	false	PC/Mobile	--
value	值绑定	Object	参考下方值说明	null	PC/Mobile	--
everyBeforeRender	频率前缀31个项可选钩子函数,返回需要的listitem项	function		null	PC/Mobile	--
monthRule	当频率选月时候可选规则列表	list	['date','week']	['date','week']	PC/Mobile	--

value

key	说明	类型	可选值
value	为0 时下面其他key不存在见频率值	number
startTime	起始时间,取selectRange[0]值	Date
frequency	重复间隔(每多少unit重复),	number	1~30
unit	重复单位	string	day/week/month/year
unitRule	当unit 值为month时生效	string	day/week
dayOfWeek	当unit 值为week时生效	Array	[0,1,2,3,4,5,6]
week	当unit 值为month时生效;startTime 所在月的第几周	number
endTime	当disabledEndPick为true时生效;选择频率截止时间	Date
monthsOfYear	当unit 值为year时生效	Array	[1,2,3,4,5,6,7,8,9,10,11,12]

频率值说明

# [0/*不重复*/,1/*天*/,2/*周*/,3/*月*/,4/*年*/,5/*工作日*/,6/*自定义*/]

export default {
    data() {
        return {
            daily: {},
            daily1: {},
            daily2: {},
            daily3: {},
            daily4: {},
            daily5: {},
            daily6: {},
            selectRange: [new Date(), new Date('2021-12-1')],
        
        };
    },
    mounted() {
        // this.initData();
    },
    methods: {
        initData() {
            let today = new Date();
            let month = today.getMonth() + 1;
            this.daily1 = {
                value: 1,
                startTime: today,
                frequency: 1,
                unit: 'day',
                unitRule: null,
                daysOfMonth: [today.getDate()],
                dayOfWeek: [today.getDay()],
                week: this.getWeekNumber(today),
                endTime: null,
                monthsOfYear: [month],
            };
            this.daily2 = {
                value: 2,
                startTime: today,
                frequency: 1,
                unit: 'week',
                unitRule: null,
                daysOfMonth: [today.getDate()],
                dayOfWeek: [today.getDay()],
                week: this.getWeekNumber(today),
                endTime: null,
                monthsOfYear: [month],
            };
            this.daily3 = {
                value: 3,
                startTime: today,
                frequency: 1,
                unit: 'month',
                unitRule: 'week',
                daysOfMonth: [today.getDate()],
                dayOfWeek: [today.getDay()],
                week: this.getWeekNumber(today),
                endTime: null,
                monthsOfYear: [month],
            };
            this.daily4 = {
                value: 4,
                startTime: today,
                frequency: 1,
                unit: 'year',
                unitRule: null,
                daysOfMonth: [today.getDate()],
                dayOfWeek: [today.getDay()],
                week: this.getWeekNumber(today),
                endTime: null,
                monthsOfYear: [month],
            };
            this.daily5 = {
                value: 5,
                startTime: today,
                frequency: 1,
                unit: 'week',
                unitRule: null,
                daysOfMonth: [today.getDate()],
                dayOfWeek: [1, 2, 3, 4, 5],
                week: this.getWeekNumber(today),
                endTime: null,
                monthsOfYear: [month],
            };
            
            this.daily6 = {
                value: 6,
                startTime: today,
                frequency: 1,
                unit: 'month',
                unitRule: 'day',
                daysOfMonth: [today.getDate(), today.getDate() + 3],
                dayOfWeek: [1],
                week: this.getWeekNumber(today),
                endTime: new Date('2022.1.2'),
                monthsOfYear: [month],
            };
            this.daily = this.daily6;
        },
        getWeekNumber(date) {
            const lastSaturday = date.getDate() + ( 6 - date.getDay() );
            return Math.ceil(lastSaturday / 7);
        },
    },
};