Problem with disabling dates on jQuery datepicker

After spending several days trying to solve this issue, I've decided to seek help. The problem at hand is disabling dates in my bootstrap datepicker using the following HTML code:

<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<link rel="stylesheet" href="../Css/css.css">
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>


<input type="text"  class="form-control" id="txt_dateDebut" value="<?php 
    echo $uneLocation->getDateDebut(); ?>" name="txt_dateDebut" required>

Despite trying various jQuery solutions, none seem to be working. Here is an example I attempted:

//disable these dates
var datesForDisable = ["25-01-2019", "26-01-2019", "27-01-2019"];

$("#txt_dateDebut").datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    weekStart: 1,
    calendarWeeks: true,
    todayHighlight: true,
    beforeShowDay: function(date){
        //format date in datepicker to dd-mm-yy
        var date1 = $.datepicker.formatDate('dd-mm-yy', date);
        //disable dates
        return [ datesForDisable.indexOf(date1) == -1 ]
    }
});

(Once the test is done successfully the goal is to dynamically fill in PHP the table of dates to disable )

javascriptphpjquerybootstrap-4bootstrap-datepicker

Answer №1

You have the option to use beforeShowDay from datepicker in order to deactivate certain dates like this: 

//these are the dates to be disabled
var disableDates = ["25.01.2019", "26.01.2019", "27.01.2019"]

$("#txt_dateDebut").datepicker({
      format: 'dd/mm/yyyy',
      autoclose: true,
      weekStart: 1,
      calendarWeeks: true,
      todayHighlight: true,
      beforeShowDay: function(date){
       //format the date in the datepicker to dd-mm-yy
        var formattedDate = $.datepicker.formatDate('dd.mm.yy', date);
        //disable the dates
        return [ disableDates.indexOf(formattedDate) == -1 ]
       }
      });
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

<input  type="text" class="form-control" id="txt_dateDebut" value="<?php echo $uneLocation->getDateDebut(); ?>" name="txt_dateDebut" required>

Answer №2

For those utilizing bootstrap datepicker, here is a helpful tip:

$('.#txt_dateDebut').datepicker({
beforeShowDay:function(Date){
var curr_date = Date.getDate();
var curr_month = Date.getMonth()+1;
var curr_year = Date.getFullYear();        
var curr_date=curr_month+'/'+curr_date+'/'+curr_year;        

if (datesForDisable.indexOf(curr_date)>-1) return false;        
}
});

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

The infinite loop issue arises when the useEffect is utilizing the useNavigate hook

As I integrate the useNavigate hook within React to guide users to a specific page post-login, an unexpected infinite loop arises. Most sources online recommend utilizing the useNavigate hook inside a useEffect block; however, this method triggers a Warnin ...

javascriptreactjsreact-hooksuse-effect

What's the reason behind this file not opening?

When I try to insert this code into files index.html, style.css, and app.js, the page refuses to open. The browser constantly displays a message saying "The webpage was reloaded because a problem occurred." I am using a MacBook Air with macOS Big Sur and a ...

javascripthtmlcss

Utilizing jQuery AJAX with the data type set as HTML

Hello, I have encountered an issue while using jQuery Ajax function with PHP. The problem lies in the fact that when setting the datatype to "html", my PHP variables are not being returned correctly. JavaScript $.ajax({ type: "POST", dataType: "html", ur ...

phpjqueryajax

What causes the updated value to be appended to an array when using the spread operator to modify an existing property's value?

In my state, I have an array of objects: const initialState=[{a:1},{b:2},{c:{d:3}}] const [state,setState]=useState(initialState) My goal is to modify the value of b to 5 within my event handler: function changeBToFive() { setState((state) => [ ...

javascriptreactjsobject

Is there a way to handle templates in AngularJS that is reminiscent of Handlebars?

Is there a way to handle an AngularJS template using a syntax similar to Handlebar? <script type="text/ng-template" id="mytemplate"> Name is {{name}} </script> I know how to retrieve the template using $templateCache.get('mytemplate&ap ...

javascriptangularjstemplateshandlebars.js

Two jQuery scripts failing to cooperate

My website is built using jQuery 2.0.3 and bootstrap. I have implemented two different functions in jQuery, one for creating a dropdown menu and another for changing images on page load. $(document).ready(function() { //To display a random image eve ...

javascriptjquerytwitter-bootstrap

Retrieve all elements from an array using jQuery

How do I extract all the elements from the array outside of the function? $.each(Basepath.Templates, function(i){ templateArray = new Array({title: Basepath.Templates[i].Template.name, src: 'view/'+Basepath.Templates[i].Template.id, descri ...

javascriptjqueryarrays

Utilizing NLP stemming on web pages using JavaScript and PHP for enhanced browsing experience

I've been exploring how to incorporate and utilize stemming results with JavaScript and PHP pages on web browsers. After running node index.js in the VS Code terminal, I was able to retrieve the output word using the natural library: var natural = re ...

javascriptnode.jsbrowsernlpstemming

Tips for implementing rtlcss node package with twitter-bootstrap in Laravel framework

Recently, I've delved into using Laravel Mix for compiling SCSS and JS files, and I have a question that's been lingering in my mind. I'm looking to implement rtlcss npm to convert Twitter Bootstrap to right-to-left layout. Below is the def ...

phpnode.jslaravelnpmrtlcss

Overriding the w-4xl with sm:text-2xl in Tailwind CSS

Struggling to achieve responsive design on my Pages, especially with changing text size when the screen is small. I've been following all the correct steps and maintaining the right order. However, whenever I set 'sm', it seems to override a ...

javascriptcssreactjsnode.jstailwind-css

Ways to restrict a function to a single DOM element using either its id or class

This script is responsible for dynamically loading pages on my website. It works fine, except that it currently iterates over all anchor tags a on the site, whereas I want it to iterate only through my navigation menu. Here is the navigation menu: <div ...

javascriptjqueryhtmlajax

Executing multiple HTTP requests simultaneously in groups using an asynchronous for loop for each individual request

I'm currently working on running multiple requests simultaneously in batches to an API using an array of keywords. Read Denis Fatkhudinov's article for more insights. The issue I'm facing involves rerunning the request for each keyword with ...

javascriptnode.jsasync-awaites6-promise

Error 500 encountered while making an Ajax request to the server

I am trying to send a post request using ajax to a controller in Laravel. The ajax request includes two input arguments, and the goal is for the controller to find the column in the database with the first argument and set the name attribute with the secon ...

phpajaxlaravellaravel-5csrf

Is there a Rust secp256k1 alternative to the `crypto::ECDH::computeSecret()` function in NodeJS?

After developing a functional NodeJS/Javascript function, I am now intrigued by the idea of achieving similar results using the Rust secp256k1 library: /* * Calculate the Symmetric Key from the Public and Secret keys from two * different key pairs. * ...

javascriptnode.jsrustsecp256k1

How can I use PHP to update and select on the same page simultaneously?

Having always been able to do something similar in other languages, I'm facing a few difficulties with PHP. My goal is to load a page that displays all the values from a form (created with a SELECT) and then update them all when clicking a "CHANGE" bu ...

phphtmlmysqldatabaseweb

I'm having trouble getting a CSS transition to work on a PNG sequence using jQuery in Mozilla

For my latest project, I decided to create an animation using a PNG sprite sequence. The idea was to add a smooth transition effect on hover and have the animation play in reverse when the hover state ends. If you want to take a look at the code yourself, ...

jquerycss

What is the mechanism behind declaring a function using square brackets in Node.js/Javascript?

Encountering something new while working with Node.js - a unique way of declaring functions. You can find an example at this link. 'use strict'; const Actions = { ONE: 'one', TWO: 'two', THREE: 'three' }; clas ...

javascriptnode.jsfunctionecmascript-6square-bracket

PHP functionality to generate a table with provided data, followed by enabling the user to access the information by

I have a web page created with HTML that utilizes PHP to retrieve information from a database and populate it into a table. How can I set it up so that when a user clicks a button, a specific action is performed based on the data in the table using PHP? I ...

phpmysqldatabasehtml-table

Exploring the features of NextJS version 13 with the benefits

Starting from the 13th step, SSR is utilized by default and in order to opt for client side rendering you must specify it at the top like so: 'use client' Currently, my setup involves TypeScript and styled-component integration. Take a look at ...

javascriptreactjstypescriptnext.js

Retrieving attribute values in PHP using XPath

Similar Question: How can I extract an attribute from an XML node using PHP's DOM Parser? Can someone help me with extracting the value of an HTML tag? Here is the HTML code snippet: <input type="hidden" name="text1" id="text1" value="need ...

phpxpath