Guide for preventing hours before the scheduled date and time with v-calendar

I am utilizing v-calendar to display the start date and time as well as end date and time in dateTime mode. My goal is to prevent the end date and time from being set before the start date and time. In order to achieve this, I have implemented the :min-date prop bound with the value of the start date and time, as shown in the code snippet below.

<v-date-picker :min-date="this.formData.startDate" v-model="formData['endDate']" mode="dateTime" :timezone="timezone" name="End Date" class="dateTimePicker">
    <template v-slot="{ inputValue, inputEvents }">
        <input
           class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
           :value="inputValue"
           v-on="inputEvents"
        />
    </template>
</v-date-picker>

For instance, if the selected start date and time is Feb 10th, 05:00 AM, any dates prior to the 10th will be disabled when selecting the end date and time. However, even if I select the 10th as the date (same date), I am still able to choose 04:00 AM as the time, which is not desired.

Is there a way to disable times based on the selected date?

javascriptvue.jsdatetimevcalendar

Answer №1

According to the information provided, it seems that you have the option to pass a prop called validHours, which should be a function used to determine if an hour is valid or not.

Depending on how you decide to implement this feature, here's an example of how you could approach it:

<v-date-picker :validHours="isHourValid()" :min-date="this.formData.startDate" v-model="formData['endDate']" mode="dateTime" :timezone="timezone" name="End Date" class="dateTimePicker" >
    <template v-slot="{ inputValue, inputEvents }">
        <input
           class="px-2 py-1 border rounded focus:outline-none focus:border-blue-300"
           :value="inputValue"
           v-on="inputEvents"
        />
    </template>
</v-date-picker>

<script>
  function isHourValid(hourThatIsSelected){
    let startDateVal = 12 // extract hour from formData['startDate'], eg. 12
    return hourThatIsSelected > startDateVal 
  }
</script>

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

Strategies for simplifying this extensive if/else block

My current if/else statement in React Native is functional but seems verbose. I am curious to know how other developers would optimize and shorten it. I feel like my code represents a beginner's approach, and I welcome suggestions on how to improve i ...

javascriptreact-native

Is there a way to prevent Material-UI SpeedDial from automatically closing when a SpeedDialAction button is clicked?

Looking to customize the functionality of Material-UI's SpeedDial component (https://material-ui.com/api/speed-dial/). At present, when a SpeedDialAction is clicked, the main SpeedDial component automatically closes. I want to modify this behavior s ...

javascriptreactjsmaterial-uispeed-dial

The script is unable to locate the property 'indexOf' because it is undefined

Searching for a specific value in an array using ui-select to capture values. A function is created to verify the existence of the value, which works perfectly fine. However, the console displays multiple instances of the error 'Cannot read property & ...

javascriptjqueryangularjs

Guide on how to showcase JSON data using vanilla JavaScript within the Laravel framework

As a beginner in Laravel, I am looking to pass JSON data from my controller using vanilla JavaScript to my view blade. However, I am unsure of the steps to accomplish this. Below is an example of my controller: public function index(Request $request) { ...

javascriptjquerylaraveltypescript

Develop and share a function to be assessed within a different scope's context in JavaScript

Currently, I'm exploring the use of angular and bootstrap tour and I have a challenge in trying to isolate objects within their own area without storing them in the controller. My goal is to store an object in the service, which also contains function ...

javascriptangularjs

Glistening: sending reactiveValues to conditionalPanel

Is it possible to pass a reactiveValues to the condition of a conditionalPanel? If so, what is the correct method? Below is my attempt in the UI.R file for the conditionalPanel: conditionalPanel(condition = "values.cond == 0", etc. I have defined values ...

javascriptrshiny

What steps do I need to take to run my Angular project locally using globally installed npm packages?

I'm interested in maintaining all my packages globally, similar to how node package itself operates. For instance, if I have a package named "Highcharts" listed in my package.json file, I prefer to install it globally instead of creating a local node_ ...

javascriptnode.jsangularnpm

What is the best method for importing several components from a directory in ReactJS?

I'm looking for a way to import multiple React components from a directory without having to export them separately in an index.js file. Here's the structure of my directory: src/ components/ comp1.js comp2.js comp3.js ...

javascriptreactjswebpackes6-modules

Utilizing JavaScript to transition a grayscale thumbnail image to vibrant color

I am a beginner in the world of web development and I have no idea how to begin coding a JavaScript function that will smoothly transition a grayscale thumbnail image into a color thumbnail image when the user hovers their mouse over it, and then back to g ...

javascriptjquery

What is the best way to transfer state information from a hook to be displayed in the App component in React

Is there a way to transfer the state(data) of info to the App hook, in order to showcase the properties within div elements? The function setInfo(info) saves the data intended for display on the Map hook and inspecting console.log(info) within _onClick rev ...

javascriptreactjsreact-hooksreact-state-managementreact-state

Using .NET Core 3.1 along with Vue, Axios, and incorporating the use of [ValidateAntiForgeryToken

I've spent the entire day working on this and researching as much as I can, but I have been unsuccessful in getting it to function. Despite comparing my implementation with the Microsoft documentation and various answers on Stack Overflow, none of th ...

c#vue.jsasp.net-coreaxiosantiforgerytoken

Is there a way to send a variable to PHP and execute it on the current page?

I need to integrate an inventory search feature on a local clothing store's website. The challenge lies in setting up the PHP script that pulls and organizes the data to run on the same page as the search form itself. Given my limited experience with ...

javascriptphpjqueryajax

Unveil Secret Divs with a Click

I am in search of a way to display a hidden div when I click on a specific div, similar to the expanding images feature in Google's image search results. I have made progress with my limited knowledge of javascript, as shown in this CodePen: http://co ...

javascriptjqueryhtmlcss

A guide to transferring modules between component files in JavaScript

My query pertains to the handling of imports in web pages. When a file is imported into another, do the declarations and imports from the imported file become available in the file where it is being imported? A suggestion was made for me to import a compo ...

javascriptangularfilechartschart.js

Encountered an error while attempting to complete the 'send' action with 'XMLHttpRequest'

I am currently developing a Cordova application that makes use of ajax. Everything works perfectly during debugging, but once I build the release version, I encounter this error: {"readyState":0,"status":0,"statusText":"NetworkError: Failed to execute &ap ...

javascriptajaxcordova

Challenges faced when using jQuery UI autocomplete

My code utilizes jQuery UI's autocomplete method on a text box: $(function() { $('#project').autocomplete({ source: function(request, response){response(Object.getOwnPropertyNames(projects))}, minLength: 0, ...

javascriptjqueryhtmljquery-uiautocomplete

The error message "invalid date" is appearing while trying to calculate the time difference with moment.js

I'm having trouble figuring out the time difference in hours and minutes between two form fields. I keep getting an error message saying "Invalid Date." I've attempted to modify other examples to fit my requirements, but without success. The inpu ...

javascriptphpmomentjs

"Master the art of creating a curved circular arrow using a combination of HTML, SVG, D3.js

I am looking to design an SVG circle with a fading stroke that blends into the background and features an arrow at one end. The goal is for the ring to fade out completely right above the arrow, similar to the visual reference provided in the image.view ex ...

javascripthtmlcssd3.jssvg

Opt for utilizing v-model over the name attribute when implementing Vee-Validate

Recently, I've embarked on a journey to learn how to create Single Page Applications using Vue. Today, my focus is on Vee-Validate. When working with Vee-Validate, the validation requires the name attribute to be filled in. Otherwise, a warning messa ...

vue.jsvuejs2vee-validate

Conceal header and footer bar in Jquery Datatable theme

I need assistance in removing the header/footer bar from this table Here is a visual representation of what I am looking to remove: The jQuery code for this table: $(document).ready(function() { var oTable = $('#tableSmooth').dataTable({ ...

javascriptjqueryhtmldatatable