Innologica / vue2-daterange-picker

Vue2 date range picker
https://innologica.github.io/vue2-daterange-picker/
MIT License
330 stars 209 forks source link

Return date like this format YYYY-MM-DD #288

Closed Haythamasalama closed 2 years ago

Haythamasalama commented 2 years ago

I went to return date like this

image

not this

image

<template>
    <div>
        <date-range-picker
            v-model="model"
            @update="updateDate"
            opens="left"
            :max-date="maxDate"
            :min-date="minDate"
            :locale-data="localeData"
            :ranges="ranges"
        >
            <template v-slot:input="picker">
                {{ picker.startDate | date }} - {{ picker.endDate | date }}
            </template>
        </date-range-picker>
    </div>
</template>

<script>
import DateRangePicker from 'vue2-daterange-picker'
import '../../../sass/datepicker/datepicker.scss'
import moment from 'moment'
export default {
    name: "DatePickerTheme",
    components:{
        DateRangePicker
    },
    props : {
        value:{
            default: null
        },
    },
    methods : {
        updateDate(){
            this.$emit('input',this.model)
        },
    },
    data () {
        return {
            maxDate: moment().format('YYYY-MM-DD'),
            minDate: '2020-01-01',
            model: this.value ||  {
                startDate: moment().format('YYYY-MM-DD'),
                endDate:   moment().format('YYYY-MM-DD'),
            },
            localeData:{
                direction: 'rtl',
                format: 'yy-mm-dd',
                separator: ' - ',
                weekLabel: 'W',
                daysOfWeek: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                firstDay: 7
            },

        }
    },
    filters: {
        date(val) {
            return val ? moment(val).format('YYYY-MM-DD') : "";
        }
    }
}
</script>
Haythamasalama commented 2 years ago

l solve that :

updateDate(){
            this.model.startDate = moment(new Date(this.model.startDate)).format('YYYY-MM-DD')
            this.model.endDate = moment(new Date(this.model.endDate)).format('YYYY-MM-DD')
            this.$emit('input',this.model)
        },