How can I set up flat-pickr for date and time input with Vue.js?

I'm currently working with flat-pickr. Let's dive into the configuration part of it. I have a start date field and an end date field. My goal is to make it so that when a time is selected in the start date field, it defaults to 12h AM, and when a time is chosen in the end date field, it defaults to 12h PM.

https://i.sstatic.net/f4Umf.jpg

// Start Date
<flat-pickr
     id="campaign-startdate"
     v-model="model.startdate"
     class="form-control"
     :config="formatStartDate"
/>
// End Date
<flat-pickr
     id="campaign-enddate"
     v-model="model.endDate"
     class="form-control"
     :config="formatEndDate"
/>

data() {
  return: {
    model:{
      startDate: null,
      endDate: null,
    },
    formatStartDate: {
        enableTime: true,
        dateFormat: 'd-m-Y H:i'
    },
    formatEndDate: {
      enableTime: true,
      dateFormat: 'd-m-Y H:i'
    }
  }
}

Answer №1

By configuring default time hours and minutes for each picker in the settings, you can streamline the process.

 configStartDate: {
    altFormat: "F j, Y",
    altInput: true,
    enableTime: true,
    defaultHour:0,
    
  },
  configEndDate:{
   altFormat: "F j, Y",
    altInput: true,
    enableTime: true,
    defaultHour:12,
    
  }

To specify the default hour as 0 for the start date and 12 for the end date.

You can view a demo by following this link: flatpickr

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

Is it possible to call a REST API in Javascript by passing the username and password as

I have been attempting to use Javascript to call the AwaazDe REST API with a specific username and password, but I'm encountering issues. Below is my code: function authenticateUser(user, password) { var token = user + ":" + password; ...

Is it possible to repeatedly activate a function using onmousedown just like with onkeydown?

My goal is to have the onmousedown event trigger repeatedly when the left mouse button is held down, instead of just once upon clicking. Currently, it only fires a single time. wHandle.onmousedown = function (event) { console.log('mouse b ...

Angular 2's Multi-select dropdown feature allows users to select multiple options

Recently, I encountered an issue with customizing CSS for angular2-multiselect-dropdown. I found the solution in this link: https://www.npmjs.com/package/angular2-multiselect-dropdown. I have included my code below. Any assistance in resolving this matter ...

Setting up Redux Saga in a modular format

I am currently using create-react-app for my project. As I now need redux-saga to handle async operations, I am encountering an issue with setting up sagas in a modular manner. When I say modular, I mean having one main sagas file that exports all the comp ...

How many logical lines of code are in the Ubuntu operating system?

As I develop my web application, it is crucial for me to track the lines of code written in languages such as php, css, html, and JavaScript specific to the /var/www directory. However, when using the command line code counter tool, I find myself tempted ...

Utilizing a function argument within the :not() selector

I am currently working towards the objective of selecting all elements in my document except for those within a specific class. This is what I have come up with so far: var x = document.querySelectorAll(":not(.myParameter)"); My aim is to make 'myPa ...

Inscribe latitude from marker onto input field

Currently, I am working on a feature where markers are added to Google Maps API v3 by clicking on the map. Each marker then displays its coordinates in an info window. However, I am facing an issue with picking up the latitude and longitude values and inse ...

Testing a Vue.js/Node.js application using Websockets

I'm working on a Vue project (version 3.0.3) integrated with a Node.js server. Can you provide guidance on how to conduct unit testing for this setup? The application is a game that relies on web-sockets for communication. ...

The candy stripes on a loading bar zebra assist in creating a unique and

I'm in the process of creating my portfolio and I'd like to incorporate unique animated loading bars, such as vertical or horizontal candy stripes, to showcase my coding skills. Can anyone suggest a specific programming language or tool that woul ...

Ionic utilized the $http service and was unexpectedly triggered two times

$scope.login = function(email,password){ $http({ method: 'POST', url: 'http://example.com/login', headers: { 'owner': $rootScope.secret }, data: {email:email, password:password } }).then(function successCallback(response) { co ...

Utilizing dynamic components in React JS

I'm a beginner in React JS and I'm facing an issue where I'm trying to call a React component from an HTML string that is being generated by another JavaScript class. However, the component is not rendering on the screen. class Form extends ...

What is the correct way to declare a new variable for a JSON object?

Within my Node JS application, I have an endpoint where I am attempting to retrieve data from two separate mongo collections. However, when trying to combine this data, I am encountering difficulties adding a new property to the JSON object. const getLesso ...

Establishing a proxy server to support the development of a Create React application

Recently, I initiated a react application with the help of create-react-app. Following that, I executed the npm run eject script to unlock access to all files. Subsequently, I incorporated express and crafted a server.js file which is located on the same l ...

Is it possible to bring in a `devDependency` into your code?

The Mobx DevTool's README instructs users to install it as a dev dependency, and then import it into their code. This approach raises concerns for me because devDependencies are typically reserved for tools used in the build process or managing end co ...

"Implementing a feature in Django that clears the input field upon clicking the clear button

I am working on a Django HTML file that includes an input field and a clear button. I need to clear the input field when the clear button is pressed. Is it necessary to use JavaScript for this task, or is there another way to achieve it? <form> ...

Link specifically for the ADFS 2.0 single sign-on application

I've been conducting research on both Google and Stackoverflow but haven't been able to find a solution to my problem. Within my ADFS portal, there are 5 different services that can be selected. I'm trying to determine how I can generate a ...

What could be the reason for my element-ui-form validator not being triggered?

Here are some codes for validation: **validateCode:[{validator:(rule, value, callback)=>{ if (!value) { callback(new Error('Please enter a code')) } else if(this.radioValue=="mobile"){ validatingCo(this.user.mob ...

Can halting an ajax function mid-process prevent it from finishing?

My objective is to convert a video using ffmpeg, which tends to take a considerable amount of time to complete. I'm considering sending an ajax request to the server for this task, but I don't want the user to have to wait until the video convers ...

In React components, encountering "cannot read properties of undefined" error occurs, whereas it functions perfectly fine within the getStaticProps

I am currently in the process of setting up a blog using Node.js, React, and graphql. Despite being new to these technologies, including Java and Typescript, I am seeking assistance from anyone who may be able to help. My current roadblock involves display ...

Saving large data in NodeJS using MongoDB and Mongoose in a non-blocking manner

Currently, I am in the midst of developing a straightforward application utilizing NodeJS, ExpressJS (with EJS), MongoDB, and Mongoose. Here's a synopsis of the issue at hand that requires some recommendations: Situation 1) Triggered by a specific e ...