Vue Js Date Range Picker

<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Date Range Picker</h3>
    <div id="app">
        <div class="date-range-picker-container">
            <div class="date-range-picker">
                <label class="label">From:</label>
                <input class="input" type="date" v-model="startDate" @change="updateDateRange">
                <label class="label">To:</label>
                <input class="input" type="date" v-model="endDate" @change="updateDateRange">
            </div>
            <div class="selected-dates" v-if="startDate || endDate">
                <span class="start-date" v-if="startDate">{{ formattedStartDate }}</span>
                <span v-if="startDate && endDate"> - </span>
                <span class="end-date" v-if="endDate">{{ formattedEndDate }}</span>
            </div>
        </div>

</div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    startDate: new Date(),
                    endDate: new Date()
                };
            },

computed: {
                formattedStartDate() {
                    return this.startDate ? this.formatDate(this.startDate) : '';
                },
                formattedEndDate() {
                    return this.endDate ? this.formatDate(this.endDate) : '';
                }
            },
            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    return `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${year}`;
                },
                updateDateRange() {
                    if (this.startDate && this.endDate && new Date(this.startDate) > new Date(this.endDate)) {
                        [this.startDate, this.endDate] = [this.endDate, this.startDate];
                    }
                }
            }
        })
    </script>
    <style>
        .date-range-picker-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

.date-range-picker {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 10px;
        }

.label {
            margin-right: 10px;
        }

.input {
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

.selected-dates {
            margin-top: 10px;
        }

.start-date {
            font-weight: bold;
        }

.end-date {
            font-weight: bold;
        }
    </style>

</body>

</html>

 
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>Vue Js Date Range Picker</h3>
    <div id="app">
        <div class="date-range-picker-container">
            <div class="date-range-picker">
                <label class="label">From:</label>
                <input class="input" type="date" v-model="startDate" @change="updateDateRange">
                <label class="label">To:</label>
                <input class="input" type="date" v-model="endDate" @change="updateDateRange">
            </div>
            <div class="selected-dates" v-if="startDate || endDate">
                <span class="start-date" v-if="startDate">{{ formattedStartDate }}</span>
                <span v-if="startDate && endDate"> - </span>
                <span class="end-date" v-if="endDate">{{ formattedEndDate }}</span>
            </div>
        </div>
​
    </div>
    <script type="module">
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    startDate: new Date(),
                    endDate: new Date()
                };
            },
​
            computed: {
                formattedStartDate() {
                    return this.startDate ? this.formatDate(this.startDate) : '';
                },
                formattedEndDate() {
                    return this.endDate ? this.formatDate(this.endDate) : '';
                }
            },
            methods: {
                formatDate(dateString) {
                    const date = new Date(dateString);
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    return `${day.toString().padStart(2, '0')}-${month.toString().padStart(2, '0')}-${year}`;
                },
                updateDateRange() {
                    if (this.startDate && this.endDate && new Date(this.startDate) > new Date(this.endDate)) {
                        [this.startDate, this.endDate] = [this.endDate, this.startDate];
                    }
                }
            }
        })
    </script>
    <style>
        .date-range-picker-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
​
        .date-range-picker {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 10px;
        }
​
        .label {
            margin-right: 10px;
        }
​
        .input {
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
​
        .selected-dates {
            margin-top: 10px;
        }
​
        .start-date {
            font-weight: bold;
        }
​
        .end-date {
            font-weight: bold;
        }
    </style>
​
​
</body>
​
</html>