Second day of month selected when value is the first day of the month

[wildeee]

When the value is the first day of the month, the second day of month is selected

[Coreusa]

Doesn't matter what day you choose, when reopening it it automatically chooses the next day. For hilarity, try choosing the last day of a month. 🌕

[gthuo]

It is a bug...I "tweaked" the code to work so that it always shows the correct date...before the bug is fixed in a new version

[JohnnyEnc]

@gthuo can you show us what you did?

[gthuo]

@JohnnyEnc in fact I used the component to recreate a new component. In the new component, I set the date to be used by the calendar to be one day less. I also did not like the idea of having to maintain a separate property to decide whether to show the calendar or hide it. Looked like so much work, esp when I have multiple datepickers, so I thought how I can wrap all that functionality in a custom component where you only pass props and a v-model, and it does all the work internally. I set it that when you click the field, it shows the datepicker, to clear the input, just right-click the field. May be I should post the code for the custom date-picker here

[gthuo]

You can go through the code and the comments there to see if get how it works, or you can just use it! Note, you first need to install the package in this repo because that is what we import and tweak ($ npm install vue-md-date-picker --save) To use this custom component in your code:

1. Save the component below as a MyDatePicker.vue to some location
2. Import the component
3. Use the <my-date-picker v-model="date"></my-date-picker> in your code, where date is the variable in the parent component that you want to store the selected date. You can see what other props can be passed into the custom component by looking at its props attribute

• This being my custom code, mode feedback on it will be appreciated. But as it is, it works for me.

<template>
	<span>
		<date-picker :min="min_value" :max="max_value" @input="updateDate()" @close="show_datepicker = false"v-if="show_datepicker" v-model="calendar_date"></date-picker>
        <!-- On clicking the field, it shows the calendar, on right click, it clears the selected date:-) -->
		<input readonly="" @contextmenu.prevent='date = ""'  @click="show_datepicker=true" type="text" :class="input_class" :placeholder="placeholder_value" :value="date">
	</span>
</template>
<script>
	import DatePicker from 'vue-md-date-picker'
	import moment from 'moment'
	export default {
		name: 'my-date-picker',
		components: {'date-picker': DatePicker},
		props: ['value', 'min', 'max','placeholder','input-class'],
		data(){
            return {
            	show_datepicker: false,
            	placeholder_value: "",
            	input_class: "",
            	date: "",
            	calendar_date: "",
                min_value: "",
                max_value: ""

            }
        },
        created()
        {
            // default the start date to beginning of last year
            // and default the end date to the end of next year
            let start = moment().subtract(1,'year').startOf('year').format('YYYY-MM-DD');
            let end = moment().add(1,'year').endOf('year').format('YYYY-MM-DD');
            this.min_value = this.min && this.min.length>0?this.min:start;
            this.max_value = this.max && this.max.length>0?this.min:end;
            // default the nput class and placeholder
        	this.input_class = this.inputClass?this.inputClass:'form-control'
        	this.placeholder_value = this.placeholder?this.placeholder:'Select Date'
            // tweak the calendar date to take it back by 1 day
        	this.date = this.value?this.value:""
        	if(this.date.length>0)
        	{
        		let date = moment(this.date).subtract(1,'days').format('YYYY-MM-DD');
        		this.calendar_date = date
        	}
        },
        methods: {
        	updateDate() {
                // whenever user clicks OK on calendar:
                // - set the date to the one he selected
                // - then set the calendar date to the previous date
        		this.date = this.calendar_date
                let date = moment(this.date).subtract(1,'days').format('YYYY-MM-DD');
                this.calendar_date = date
        	}
        },
        watch: {
        	date: function(newVal) {
                // communicate to parent component, and emit two events
        		this.$emit('input',this.date) // makes v-model work on this custom component
        		this.$emit('updated',this.date) // can be used for other purposes on parent component
        	},
            // watch it every time...brought about by v-model from parent component
        	value: function(newVal) {
                // basically, set the calendar date to one day behind
        		this.date = this.value?this.value:""
	        	if(this.date.length>0)
	        	{
	        		let date = moment(this.date).subtract(1,'days').format('YYYY-MM-DD');
	        		this.calendar_date = date
	        	}
        	}
        }
	}
</script>

[srukali]

In the source code, I commented out this chunk and it fixed the problem for me:

if (this.initialDate) {
    this.selectedDay = date.getDate() + 1
} else {
    this.selectedDay = date.getDate()
}

[jwkicklighter]

@ridewn Is this project abandoned at this point?