The datepicker in Vue.js is experiencing a limitation where it does not allow for the default value of an

I incorporated the vue-date-picker for date picker functionality in my input fields because it perfectly aligned with all of my requirements. The issue I encountered is that when loading the page, I attempted to pass a default value from the database, but it did not display until I removed the v-model attribute.

However, upon removing the attribute, the selected date from the datepicker calendar was not being updated.

Below is the HTML code snippet I am currently using:

<input type="text" id="regular-date" class="form-control w-p100" placeholder="eg. 21 August, 2018" readonly @focus="showRegularDate = true">
<transition name="calendar-fade">
    <date-picker color="#b173f8" :format="formatDate"
                 @close="showRegularDate = false"
                 v-if="showRegularDate"
                 v-model="regularDate"></date-picker>
</transition>

For the format in the script section, I am utilizing:

<script>
        Vue.use(DatePicker)
        Vue.config.lang = 'en';
        new Vue({
            el: '.app',
            created: function () {
                var today = new Date
                this.minDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
                this.maxDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + (today.getDate() + 7)
            },
            data: {
                regularDate: '',
                regularDate_2: '',
                regularDate_3: '',
                regularDate_4: '',
                regularDate_5: '',
                showRegularDate: false,
                minDateLimit: '',
                minDate: '',
                showMinDate: false,
                maxDateLimit: '',
                maxDate: '',
                showMaxDate: false,
                rangeDate: '',
                showRangeDate: false,
                specifiedDate: '2016-4-19',
                showSpecifiedDate: false,
                formattedDate: '',
                showFormattedDate: false
            },
            methods: {
                formatDate(date) {
                    return moment(date).format('LLLL');
                },
                formatDate_2: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_3: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_4: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_5: function (date) {
                    return moment(date).format('LLLL');
                }
            }
        })
    </script>

I am exclusively utilizing this vue for the datepicker. Could there be any specific settings or elements that I might have overlooked?

javascriptvue.jsvuejs2datepickervue-component

Answer №1

To update your template, modify the date-picker @close event to @close="closeDatePickerPopup"

Next, add the following method to your methods object:

closeDatePickerPopup() {
   this.showRegularDate = false;
   console.log(this.regularDate);
   // You now have access to this.regularDate
   // and can manipulate it as needed
}

If you wish to set an initial value for this.regularDate, include this code snippet:

created:function() {
   // ------------
},
mounted: function () {
   // Initialize this.regularDate like so    
   this.regularDate = "2018-09-08";
},

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Alter numerous classifications based on varying circumstances at regular intervals

This code snippet is designed to change randomly all the <div class="percentx"> elements, for example from <div class="percent31"> to <div class="percent52"> (with values between 1-100). It works smoothly. I ...

javascripthtml

Refresh the navigation bar on vuejs post-login

Creating a client login using Vue has been a challenge for me. My main component includes the navigation bar and the content rendering component. The navigation component checks if the user is logged in to display the buttons for guests and hide the button ...

javascriptvue.jsfrontend

Vue.Js allows developers to easily set a default selected value in a select dropdown menu

Having trouble with getting the default selected value using select in VueJs. I've attempted two different approaches: Using id and v-model fields in the select like this: <select v-model="sort_brand" id="sort-brand" class="form-control"> ...

htmlselectvue.jshtml-select

Validation in Angular2 is activated once a user completes typing

My goal is to validate an email address with the server to check if it is already registered, but I only want this validation to occur on blur and not on every value change. I have the ability to add multiple controls to my form, and here is how I have st ...

javascriptangulartypescript

Sort with AngularJS: orderBy multiple fields, with just one in reverse

Currently, I am faced with the challenge of filtering data based on two variables: score and name (score first, followed by name). This task involves various games, some of which have scores in reverse order (like golf) while others maintain a normal scor ...

javascriptangularjsangularjs-filterangular-filtersangularjs-orderby

Missing pieces of data | Utilizing React and Redux Toolkit

I'm facing a problem that's keeping me up for almost 24 hours. I just finished coding this slice, but when I submit the data, only the automatically generated ID is returned. Let me explain further - I have a skill component with two input forms ...

javascriptreactjsasynchronousredux

Capturing Axios request using universal JavaScript functions

My website is built using web components with a Vue app structure, where each component has its own API layer integrated through Axios. I am in need of implementing Auth middleware for all HTTP requests sent from either the main app or any individual com ...

vue.jsaxiosxmlhttprequest

Retrieving Data from a JSON File in ASP.NET MVC 4

After diving into learning ASP.NET MVC 4, I dabbled in some small projects... On my index page, my goal is to fetch a JSON file containing data and showcase it on the main page. In basic HTML and JavaScript, I utilize ajax for fetching or posting JSON da ...

javascriptasp.netasp.net-mvcjson

Storing video blobs in the filesystem using Electron and Node.js

My electron application allows users to record video from their webcam using the MediaRecorder API. After hitting the "stop record" button, I am able to obtain a blob of the recorded video. I am trying to figure out how to convert this blob into a real w ...

javascriptnode.jsvideoelectron

The MUI static datepicker sx property is malfunctioning

I am trying to deactivate the default action buttons in the mui datepicker by using the sx props, but for some reason it's not working properly This is the code I have implemented for the datepicker component: <LocalizationProvider dateAdapter={Ad ...

reactjsmaterial-uidatepicker

Sharing information between pages in React through Router

I am struggling to transfer a single string from one page to another using react router and only functional components. I have created a button that links my pages, but I can't seem to pass the string successfully. Here is an example of the code on th ...

javascriptreactjsreact-nativereact-router

Deactivating the submit button after a single click without compromising the form's functionality

In the past, I have posed this question without receiving a satisfactory solution. On my quiz website, I have four radio buttons for answer options. Upon clicking the submit button, a PHP script determines if the answer is accurate. My goal is to disable t ...

javascriptphphtmlforms

I am facing an issue where the module pattern functions perfectly on JSBin, but fails to work properly

As a backend developer, I typically only write JavaScript when absolutely necessary, and not always in the best way. However, I have decided to turn over a new leaf and start writing more organized code that follows best practices as much as possible. To ...

javascriptjquerydomscopemodule-pattern

Navigating with vue-router using guard redirections

I am currently working with vue.js and I'm looking to implement a functionality where I can redirect a user to another URL within the navigation guard called beforeRouteEnter. The main objective is to check if the current city of the user is included ...

vue.jsvue-router

Using JavaScript to Access PHP Files

Would like to understand the process of calling a php file (test.php) from either "x:" or "y:" in the code below. var example1 = { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'Most read', ...

javascriptphpvariables

JavaScript: Closing a Tab

Using AngularJS for my project and I have a link that opens a tab. If the user right clicks on the link and selects open link in new tab, then on the page abc.html I have code like $window.close(); which is not working as expected. I am receiving the error ...

javascriptjqueryangularjs

Find the index of the element that was clicked by utilizing pure JavaScript

I am struggling to find the index of the element that was clicked. Can anyone help me with this? for (i = 0; i < document.getElementById('my_div').children.length; i++) { document.getElementById('my_div').children[i].onclick = f ...

javascriptindexingonclick

Having trouble importing the named export `{module}` from a non-ECMAScript module with TipTap and Nuxt?

I'm using TipTap with Nuxt and running into some issues that I can't seem to resolve. Despite following suggestions from the repository's issues, I keep encountering these specific errors: ERROR in /Volumes/Projects/nuxt/candy-hub-lerna/no ...

javascriptvue.jsvue-componentnuxt.js

The functionality of the Bootstrap4 accordion is not functioning according to my expectations

My goal is to create a unique e-commerce checkout page design. Each panel would be opened sequentially, with the next panel unfreezing when the action button of the current panel is clicked. However, I seem to be making a mistake as it is not working as in ...

javascriptjquerycsstwitter-bootstrap

Utilize jQuery to seamlessly transfer each recorded audio file from rows to corresponding input fields within the table

I have a table below with 2 rows but it can be doubled with a button (Add another Word media) and only one submit button for all rows: <tbody> <tr class="form-row dynamic-medias" id="medias-0"> <td class=&quo ...

javascriptjquerydjango