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

Pause the execution of an AJAX callback function after numerous AJAX requests

I have two separate Ajax calls in my code. Both of them have different callbacks that need to execute upon successful call. $.ajax({ type: 'POST', url: "url1", success: foo1 }); $.ajax({ type: 'POST', url: "url2", ...

Insert information into a dialog box in Vuetify

I am currently exploring Vuetify and working on creating a user interface that displays a table of discovered Wifi networks along with each network's properties. Users should have the ability to edit the stored password or remove a Wifi network from t ...

Tips on importing anime js after it has been successfully installed through npm

Today, I added anime js as a dependency to my package.json file. The version 3.0.1 is visible in the dependencies list. I used npm to install it. Next step was creating a folder and a JavaScript file in the public directory. I set up a simple event liste ...

Obtain the present location of the cursor within the TinyMCE editor

Despite various attempts, I have struggled to determine the current cursor position inside TinyMCE. My goal is to implement a change control feature that captures the starting point of text entry within the TinyMCE "textarea," allowing me to save the ente ...

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snip ...

i am trying to execute a function in an angularjs controller through html, but the scope variable that i am

Being new to angularjs, I'm looking to understand the process of calling a function defined in a controller from HTML within angularjs. I have written the following code in my HTML: First.html <input type="text" ng-model="model.name" name="name ...

The characteristics that define an object as a writable stream in nodejs

Lately, I've been delving into the world of express and mongoose with nodejs. Interestingly, I have stumbled upon some functionality that seems to work in unexpected ways. In my exploration, I noticed that when I create an aggregation query in mongoos ...

Avoiding cheating in a JavaScript game

I am in the process of creating a JavaScript/JQuery game that resembles a classic brick breaker. The game includes features such as scoring, levels, and more. I have plans to add a leaderboard where users can submit their final scores. However, my concer ...

Incapable of modifying the text within a div container

I am currently working on a script that translates a Russian forum word by word using TreeWalker. However, there is a specific type of div element that I have been unable to change the text for. That leads to my question: How can I go about changing it? Un ...

Contrasting the lib and es directories

I am seeking clarity on my understanding. I am currently working with a npm package called reactstrap, which is located in the node_modules folder. Within this package, there are 4 folders: dist es lib src I understand that the src folder contains the s ...

Is there a method to accurately detect the rendering of individual elements within a React Component, rather than the entire component itself?

While it's known that Components rendering can be detected through React's Developer Tool, I came across other methods in this source. However, what I'm specifically interested in is detecting the rendering of individual elements within a Co ...

Tips for revealing a hidden div by clicking on another div?

I have a Google visualization chart inside a div tag. I would like to display this chart in a pop-up box when clicking on the chart's div. I am utilizing jQuery for this feature. ...

Select one href by clicking and apply addClass

I have a one-page HTML document with links in the header. I want to make it so that when I click on a link (<a>), only that specific link changes its class to (.links). I've tried various methods, but the current jQuery method I'm using ad ...

Exploring the use of a customizable decorator in Typescript for improved typing

Currently, I am in the process of creating TypeScript typings for a JavaScript library. One specific requirement is to define an optional callable decorator: @model class User {} @model() class User {} @model('User') class User {} I attempted ...

Calculating values within the TR using jQuery: A step-by-step guide

I have a situation where I am looking to use jQuery to calculate values within a table row. Below is a screenshot of the page where I need to determine the number of working days for an employee and display the count as NWD (Number of Working Days). http ...

Issues with AngularJS Filters malfunctioning

After watching some AngularJS videos and attempting to apply a filter to a list of bookmark categories, I'm having trouble loading the main content. At the moment, I haven't implemented views in my code and would like it to remain view-less for n ...

Can you explain the functionality of isolate scope in angularjs?

I'm having trouble grasping the concept of scope : {}. Here's a snippet of code I've been working on. Why does it always display "strength" in the console instead of the actual array value? // Code goes here var app = angular.module("super ...

Error encountered when uploading mp3 file to S3 node due to size limitation

Currently, I am utilizing Node to transmit mp3 files to Amazon S3. However, after uploading the file, it shows a size of 9.0 Bytes and when attempting to play the audio from the public URL, it does not work as expected. Here is my current code snippet: rou ...

Maintain the link's functionality even after it's been clicked by utilizing the same

I have a fixed navbar with same-page anchors and I want to keep the link active after it has been clicked and taken to that section of the page. While this is simple for links to another page, I'm struggling to figure out how to do it here. Here&apos ...

Tips for turning off hash-based redirection in AngularJS

Here is a specific URL: http://www.something.com/sometest/test/#registration Some code has been written based on #registration for Internet Explorer. However, when using AngularJS, it redirects to the following URL, which disrupts the logic: http://www ...