= [undefined, null];
21 |
22 | if (isEvent(value)) {
23 | return true;
24 | }
25 |
26 | if (isDate(value)) {
27 | return true;
28 | }
29 |
30 | if(isString(value) && moment(value).isValid()) {
31 | return true;
32 | }
33 |
34 | for (const type of allowedTypes) {
35 | const allowed: boolean = value === type || typeof value === type;
36 |
37 | if (allowed) {
38 | return true;
39 | }
40 | }
41 |
42 | return false;
43 | },
44 | required: true
45 | },
46 | options: {
47 | required: false,
48 | default() {
49 | return {};
50 | }
51 | },
52 | autoDefault: {
53 | type: Boolean,
54 | required: false,
55 | default: false
56 | }
57 | },
58 | data() {
59 | return {
60 | visible: false,
61 | elAttrs: {
62 | type: 'text'
63 | },
64 | defaultOptions: {
65 | format: 'D MMM YYYY'
66 | }
67 | };
68 | },
69 | computed: {
70 | elementAttributes(): Object {
71 | return Object.assign({}, this.$attrs, this.elAttrs);
72 | },
73 | mergedOptions() {
74 | return Object.assign({}, this.defaultOptions, this.options);
75 | }
76 | },
77 | render(h: Function): Object {
78 | return h('input', {
79 | attrs: this.elementAttributes,
80 | on: this.$listeners,
81 | value: this.inputValue(this.value)
82 | }, this.$slots.default);
83 | },
84 | mounted() {
85 | this.create();
86 |
87 | this.$watch('value', (value: typeof undefined | null | Date) => {
88 | if (!isDate(value)) {
89 | value = null;
90 | }
91 | if (!this.visible) {
92 | this.pikaday.setDate(value, true);
93 | }
94 | this.change(value);
95 | });
96 | },
97 | beforeDestroy() {
98 | this.destroy();
99 | },
100 | watch: {
101 | options: {
102 | handler() {
103 | this.reload();
104 | },
105 | deep: true
106 | }
107 | },
108 | methods: {
109 | create() {
110 | this.mergedOptions.field = this.$el;
111 |
112 | this.bindListener('onSelect', () => this.onSelect());
113 | this.bindListener('onOpen', () => this.onOpen());
114 | this.bindListener('onClose', () => this.onClose());
115 |
116 | this.pikaday = new Pikaday(this.mergedOptions);
117 |
118 | let defaultValue: typeof undefined | null | Date = this.value;
119 |
120 | if (!this.value && this.autoDefault) {
121 | defaultValue = moment().toDate();
122 | this.change(defaultValue);
123 | }
124 |
125 | this.pikaday.setDate(defaultValue, true);
126 |
127 | if (this.mergedOptions.bound === false) {
128 | this.hide();
129 | } else {
130 | this.visible ? this.show() : this.hide();
131 | }
132 | },
133 | destroy() {
134 | this.pikaday.destroy();
135 | },
136 | reload() {
137 | this.destroy();
138 | this.create();
139 | },
140 | change(value: typeof undefined | null | Date) {
141 | this.$emit('input', value);
142 | this.$emit('input-value', this.inputValue(value));
143 | },
144 | inputValue(value: typeof undefined | null | Date): string | null {
145 | if (!isDate(value)) {
146 | return null;
147 | }
148 | const inputValue: moment = moment(value);
149 | return inputValue.isValid() ? inputValue.format(this.mergedOptions.format) : null;
150 | },
151 | onSelect() {
152 | this.change(this.pikaday.getDate());
153 | },
154 | onOpen() {
155 | this.visible = true;
156 | },
157 | onClose() {
158 | if (!isDate(this.value)) {
159 | this.pikaday.setDate(null, true);
160 | this.change(null);
161 | }
162 | this.visible = false;
163 | },
164 | show() {
165 | this.pikaday.show();
166 | },
167 | hide() {
168 | this.pikaday.hide();
169 | },
170 | bindListener(listener: Function, cb: Function) {
171 | if (this.mergedOptions[listener]) {
172 | const old: Function = this.mergedOptions[listener];
173 | this.mergedOptions[listener] = (...args) => {
174 | old(args);
175 | cb.apply(this);
176 | };
177 | } else {
178 | this.mergedOptions[listener] = cb;
179 | }
180 | }
181 | }
182 | };
183 |
--------------------------------------------------------------------------------
/src/directives.js:
--------------------------------------------------------------------------------
1 | //@flow
2 |
3 | import _debounce from 'lodash/debounce';
4 |
5 | function changeState(state: boolean, target: Object, expression: string, instance: Object | null = null) {
6 | target[expression] = state;
7 | instance = instance || target;
8 | state ? instance.show() : instance.hide();
9 | }
10 |
11 | export const VuePikadayVisible = {
12 | inserted(el: Object, binding: Object, VNode: Object) {
13 | const instance: Object = VNode.componentInstance;
14 |
15 | instance.onOpen = () => _debounce(() => changeState(true, VNode.context, binding.expression, instance), 100);
16 |
17 | instance.onClose = _debounce(() => changeState(false, VNode.context, binding.expression, instance), 100);
18 | },
19 | update(el: Object, binding: Object, VNode: Object) {
20 | _debounce(() => changeState(binding.value, VNode.componentInstance, binding.expression), 100)();
21 | }
22 | };
23 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import VuePikaday from './component';
2 | import { VuePikadayVisible } from './directives';
3 |
4 | const VuePikadayPlugin = {
5 | install(Vue) {
6 | Vue.component(VuePikaday.name, VuePikaday);
7 | Vue.directive('p-visible', VuePikadayVisible);
8 | }
9 | };
10 |
11 | if (typeof window !== 'undefined' && window.Vue) {
12 | window.Vue.use(VuePikadayPlugin);
13 | }
14 |
15 | export default VuePikadayPlugin;
16 |
--------------------------------------------------------------------------------
/test/specs/attributes-event-listeners.js:
--------------------------------------------------------------------------------
1 | const component = {
2 | template: ``,
10 | methods: {
11 | focus() {
12 | this.$emit('focused');
13 | },
14 | blur() {
15 | this.$emit('blurred');
16 | }
17 | }
18 | };
19 |
20 | describe('Attributes & events', () => {
21 | before(() => cy.mount(component));
22 |
23 | it('renders custom attributes', () => {
24 | cy.get('[data-vue-pikaday]').should('have.attr', 'placeholder', 'Pick a date');
25 | });
26 |
27 | it('dispatches event listeners', () => {
28 | const focusSpy = cy.spy();
29 | const blurSpy = cy.spy();
30 |
31 | Cypress.vue.$on('focused', focusSpy);
32 | Cypress.vue.$on('blurred', blurSpy);
33 |
34 | cy.get('[data-vue-pikaday]').as('picker').click().then(() => {
35 | expect(focusSpy).to.be.calledOnce;
36 | });
37 |
38 | cy.get('@picker').blur().then(() => {
39 | expect(blurSpy).to.be.calledOnce;
40 | });
41 | });
42 | });
43 |
--------------------------------------------------------------------------------
/test/specs/basic.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | const component = {
4 | template: ''
5 | };
6 |
7 | describe('Basic', () => {
8 | before(() => cy.mount(component));
9 |
10 | it('renders', () => {
11 | cy.get('[data-vue-pikaday]').should('be.visible');
12 | cy.get('.pika-single').should('not.be.visible');
13 | });
14 |
15 | it('focuses / blurs picker', () => {
16 | cy.get('[data-vue-pikaday]').as('picker').focus();
17 | cy.get('.pika-single').should('be.visible');
18 | cy.get('@picker').blur();
19 | cy.get('.pika-single').should('not.be.visible');
20 | });
21 |
22 | it('selects current date via picker', () => {
23 | cy.get('[data-vue-pikaday]').focus();
24 | cy.get(`[data-day="${ moment().date() }"] button`).click();
25 | });
26 | });
27 |
--------------------------------------------------------------------------------
/test/specs/custom-formating.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | function customFormat(date, format) {
4 | const start = moment(date, format).day(1);
5 | const end = moment(date, format).day(5);
6 | return `${ start.format(format) } - ${ end.format(format) }`;
7 | }
8 |
9 | const component = {
10 | template: ``,
15 | data() {
16 | return {
17 | options: {
18 | pickWholeWeek: true,
19 | toString: customFormat,
20 | parse: () => moment(this.date)
21 | }
22 | };
23 | }
24 | };
25 |
26 | describe('Custom formatting', () => {
27 | before(() => cy.mount(component));
28 |
29 | it('renders input value using custom formatter', () => {
30 | cy.get('[data-vue-pikaday]').as('picker').focus();
31 | cy.get(`[data-day="${ moment().date() }"] button`).click();
32 |
33 | cy.get('@picker').should('have.value', customFormat(moment().date(), 'D MMM YYYY'));
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/test/specs/external-date-change.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | const updatedDateCurrent = moment();
4 | const updatedDateWeekForward = moment().add(7, 'days');
5 |
6 | const component = {
7 | template: `
8 |
12 | Internal date: {{ date ? date : 'null' }}
13 |
14 |
15 |
16 |
`,
17 | methods: {
18 | updateDateCurrent() {
19 | this.date = updatedDateCurrent.toDate();
20 | },
21 | updateDateWeekForward() {
22 | this.date = updatedDateWeekForward.toDate();
23 | },
24 | clear() {
25 | this.date = null;
26 | }
27 | }
28 | };
29 |
30 | describe('External changes', () => {
31 | before(() => cy.mount(component));
32 |
33 | it('updates Pikaday value from outside', () => {
34 | cy.get('[data-test="update-button-current"]').click();
35 | cy.get('[data-vue-pikaday]').as('picker').should('have.value', updatedDateCurrent.format('D MMM YYYY'));
36 |
37 | cy.get('[data-test="update-button-week"]').click();
38 | cy.get('@picker').should('have.value', updatedDateWeekForward.format('D MMM YYYY'));
39 | });
40 |
41 | it('handles removing characters', () => {
42 | cy.get('[data-test="update-button-current"]').click();
43 |
44 | cy.get('[data-vue-pikaday]').as('picker').type('{backspace}');
45 |
46 | cy.get('[data-internal-value]').should('contain', 'null');
47 | });
48 |
49 | it('handles invalid value typed in', () => {
50 | cy.get('[data-vue-pikaday]').as('picker').clear().type('invalid value').blur().should('have.value', '');
51 |
52 | cy.get('@picker').clear().type('13 Se').blur().should('have.value', '');
53 | });
54 |
55 | it('handles clearing value from outside', () => {
56 | cy.get('[data-test="update-button-current"]').click();
57 | cy.get('[data-test="clear-button"]').click();
58 | cy.get('[data-vue-pikaday]').as('picker').should('have.value', '');
59 | });
60 | });
61 |
--------------------------------------------------------------------------------
/test/specs/manual-trigger.js:
--------------------------------------------------------------------------------
1 | const component = {
2 | template: `
3 |
9 |
10 |
`,
11 | data() {
12 | return {
13 | visible: false
14 | };
15 | }
16 | };
17 |
18 | describe('Manual trigger', () => {
19 | before(() => cy.mount(component));
20 |
21 | it('shows / hide via external trigger', () => {
22 | cy.get('[data-test="manual"]').click();
23 | cy.get('.pika-single').should('be.visible');
24 |
25 | cy.get('[data-test="manual"]').click();
26 | cy.get('.pika-single').should('not.be.visible');
27 | });
28 | });
29 |
--------------------------------------------------------------------------------
/test/specs/pikaday-options.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | const allowedDateStart = moment().date(5);
4 | const allowedDateEnd = moment(allowedDateStart).add(6, 'days');
5 |
6 | const component = {
7 | template: `
8 |
14 |
15 |
`,
16 | data() {
17 | return {
18 | options: {
19 | format: 'YYYY/MM/DD',
20 | minDate: allowedDateStart.toDate(),
21 | maxDate: allowedDateEnd.toDate()
22 | }
23 | };
24 | },
25 | methods: {
26 | updateOptions() {
27 | this.options.minDate = moment(allowedDateStart).subtract(2, 'day').toDate();
28 | this.options.maxDate = moment(allowedDateEnd).subtract(2, 'day').toDate();
29 | }
30 | }
31 | };
32 |
33 | describe('Pikaday options', () => {
34 | before(() => cy.mount(component));
35 |
36 | it('have current date filled by default', () => {
37 | let testDate = moment();
38 |
39 | if (testDate >= allowedDateEnd) {
40 | testDate = allowedDateEnd;
41 | }
42 |
43 | if (testDate <= allowedDateStart) {
44 | testDate = allowedDateStart;
45 | }
46 |
47 | cy.get('[data-vue-pikaday]').should('have.value', testDate.format('YYYY/MM/DD'));
48 | });
49 |
50 | it('have custom display format', () => {
51 | cy.get('[data-vue-pikaday]').as('picker').click();
52 | cy.get(`[data-day="${ allowedDateStart.date() }"] button`).click();
53 | cy.get('@picker').should('have.value', allowedDateStart.format('YYYY/MM/DD'));
54 | });
55 |
56 | it('restricts dates selection to specific week', () => {
57 | cy.get('[data-vue-pikaday]').as('picker').click();
58 | cy.get(`[data-day="${ moment(allowedDateStart).subtract(1, 'day').date() }"]`).should('have.class', 'is-disabled');
59 |
60 | cy.get('@picker').click();
61 | cy.get(`[data-day="${ moment(allowedDateStart).add(8, 'days').date() }"]`).should('have.class', 'is-disabled');
62 |
63 | const plus5Days = moment(allowedDateStart).add(5, 'days');
64 |
65 | cy.get('@picker').click();
66 | cy.get(`[data-day="${ plus5Days.date() }"]`).should('not.have.class', 'is-disabled');
67 | cy.get(`[data-day="${ plus5Days.date() }"] button`).click();
68 | cy.get('@picker').should('have.value', plus5Days.format('YYYY/MM/DD'));
69 | });
70 |
71 | it('updates dates restriction selection', () => {
72 | cy.get('[data-test="update-options"]').click();
73 |
74 | cy.get('[data-vue-pikaday]').as('picker').click();
75 | cy.get(`[data-day="${ moment(allowedDateStart).subtract(3, 'days').date() }"]`).should('have.class', 'is-disabled');
76 |
77 | cy.get('@picker').click();
78 | cy.get(`[data-day="${ moment(allowedDateEnd).subtract(1, 'day').date() }"]`).should('have.class', 'is-disabled');
79 |
80 | const plus2Days = moment(allowedDateStart).add(2, 'days');
81 |
82 | cy.get('@picker').click();
83 | cy.get(`[data-day="${ plus2Days.date() }"]`).should('not.have.class', 'is-disabled');
84 | cy.get(`[data-day="${ plus2Days.date() }"] button`).click();
85 | cy.get('@picker').should('have.value', plus2Days.format('YYYY/MM/DD'));
86 | });
87 | });
88 |
--------------------------------------------------------------------------------