A guide on fetching the selected date from a datepicker in framework7 with the help of vuejs

Here is a snippet of the code for a component I am working on:

<f7-list-input
label=“Fecha de nacimiento”
type=“datepicker”
placeholder=“Selecciona una fecha”
:value=“perfil.fecha_nacimiento”
@input=“perfil.fecha_nacimiento = $event.target.value”
:calendar-params=“parametrosCalendario”
>

<f7-button class=“button button-big button-fill”
@click=“editarPerfil(perfil)”>Guardar   </f7-button>

script:

 data(){
            return {
                perfil: {
                    fecha_nacimiento: ''
                },
    },
   methods:{
    editarPerfil(perfil){
            let vm = this;
            console.log(perfil); //When printing in console, profile, birthdate, this gap.

        },
}

Unfortunately, I am having trouble retrieving the information for the birthdate.

Answer №1

If you want to achieve this using JavaScript, you can give it a try:

const calendarElement = document.querySelector(selector); // Get the calendar element
const values = calendarElement.getValue();   // Retrieve the current value of the calendar

You may also refer to the official documentation for more information: User Manual for Calendar in Framework7

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

"Upon inspection, the TrackerReact Container shows that the user's profile.avatar is set, yet the console is indicating that

Within my app, I designed a TrackerReact container named ProfileSettingsContainer. This container retrieves the user data with Meteor.user() and passes it to a function called user(), then sends this information to the ProfileSettings component. The main o ...

Tips for extracting a URL from a specific section of a JSON object

I am working with a JavaScript variable like this- var uri = "https:\/\/maps.googleapis.com\/maps\/api\/staticmap?size=100x100&zoom=11&center=22.816667,89.55"; I want to convert it to look like this- var uri = "https://m ...

Designing Object-Oriented JavaScript

Currently, I am in the process of developing a sophisticated JavaScript application. Utilizing an object-oriented design approach, I have organized my code into various files to enhance maintainability. In order to create my application, what is the best ...

Is there a way to display a JS alert just one time?

How can I display a message to users on LT IE8 encouraging them to upgrade their browser for a better web experience? I only want the message to appear on their first visit, not every time they refresh the page. Is there a solution for this issue? Thank ...

Use AppScript to exclude the first row (which contains the column names) when filtering a table

Considering the limitations of Google Sheets with the ImportRange function, I decided to develop an AppScript as a replacement. Although I am new to JavaScript, here is what I have so far: function My_ImportRange() { var clearContent = SpreadsheetApp.ge ...

Pressing an HTML button can enable and disable the pause and resume functions

Currently, I am working on an audio player where I need to implement functionality to pause and resume the playback. I have already set up the pause() and resume() functions in my script. The issue I am facing is related to the HTML button that triggers th ...

The Precision of the IRR (Internal Rate of Return) Calculation in Javascript

I've been working on a custom IRR function in JavaScript to mimic the functionality of Excel's IRR function. Despite my best efforts, it seems that my results are slightly off. Below is the code snippet that I have been using: var IRRval = []; ...

Tips on retrieving a specified string from within an array of strings

I need help extracting the inner string from this array within a string: '["sgrdalal21"]' Can someone provide guidance on how to accomplish this? ...

calendar input type for both internet explorer and firefox

I frequently utilize the input type calendar on my website's intranet, but unfortunately, it only seems to work properly in Google Chrome and not in other browsers. As a solution, I have developed a code for a CSS/JavaScript calendar that I would like ...

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Is there a way to make an AJAX call where one of the parameters is a computed State in VueX? For instance, if I use this.$axios.get('someUrl/' + accID ), with accID being a computed property from VueX (using MapState), sometimes it returns ' ...

Working with MongoDB collections in JavaScript to extract and manipulate array data

I have successfully parsed this array using a for loop You can view the results in the console log below. https://i.sstatic.net/zxBna.png When handling role_code in JavaScript, the following code snippet can be used: for (doctor in data.user.userType){ ...

The ES6 class Inheritance chain does not properly utilize the instanceof keyword

My curiosity lies in understanding why the instanceof operator fails to work properly for the inheritance chain when there are multiple chains of inheritance involved. (optional read) How does the instanceof operator function? When using obj inst ...

Iterating through children of the target element using the .each() method in jQuery

Currently, I am looping through the elements and extracting the src attribute from the child element. This is the snippet of HTML code that I am working with: <noscript data-alt="super awesome"> <img src="http://farm9.staticflickr.com/8235/85 ...

Here's a guide on how to package and send values in ReactJs bundles

I'm currently involved in a ReactJs project that does not rely on any API for data management. For bundling the React APP, we are using Webpack in the project. The challenge now is to make the React APP usable on any website by simply including the ...

Set a hidden field to contain an IEnumerable of integers

Currently, I am working on a project that involves dealing with a viewmodel. [Required(ErrorMessage = "Please enter a title")] [Display(Name="Title")] public string Title { get; set; } [Required(ErrorMessage = "Description is required")] ...

"Despite modifying the ID in the response data of Angular MongoDB, the request data ID remains unchanged

Having trouble with managing requests and responses, specifically when a customer tries to add multiple items of the same product but in different sizes. The initial step involves checking if the ID exists by using a count and an if statement. If it exists ...

What is the functionality of Vue plugins in Vite MPAs?

I have developed a Vite application and I am trying to implement multiple pages. I followed the documentation on how to achieve this (link here), but when I start the server, all I see is a blank page. This is what my vite.config.js file looks like: impor ...

Capturing Data from Tables and Saving it with Protractor

Imagine having a table structured like this <h2>HTML Table</h2> <table> <tr> <th>Company</th> <th>Contact</th> <th>Code</th> </tr> <tr> <td>Alfreds Fu ...

Changes are being made to the state, but the updates are not showing up in the user interface of my photo feed

Welcome everyone, I'm currently immersed in learning react and have developed several apps using react, such as a hotel website (using react and contentful cms), an e-commerce website (using react, contentful cms, paypal), githubfinder app, todos app, ...

Can you pass an array as a prop to a Vue.js component?

I am working on a specialized input component named 'field', which has a set of predefined props listed as: props: ['value','cols','label','group','name'] Since 'field' essentially wr ...