Laravel implementation of Bootstrap Datepicker

Incorporating Laravel bootstrap and a date picker, I have encountered an issue where the todayHighlight feature is not functioning correctly. Additionally, the container aspect is also not working as intended.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72021d020217005c180132435c43444547485c">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
    $(document).ready(function(){
        $('.datepicker_modal').datepicker({
            dateFormat: 'dd-mm-yy',
            container: $(this).closest('.dateContainer'),
            todayHighlight: false
        });
    });
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button type="button" class="btn btn-success mx-1" data-toggle="modal" data-placement="bottom" title="Approve" data-target="#accept_1">
        Click to Show
    </button>
    <div class="modal fade" id="accept_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-accept modal-content">
            <div class="modal-header bg-success text-light">
              <h5 class="modal-title" id="exampleModalLongTitle"><strong>ACCEPT </strong></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                      </button>
            </div>
            <form method="POST" action="">
              <div class="modal-body">
                <div class="form-group dateContainer">
                  <label for="date_pick">Date</label>
                  <input id="date_pick" placeholder="DD-MM-YYYY" type="text" class="form-control datepicker_modal" name="date_pick" autocomplete="off" required>
                </div>
              </div>
              <div class="modal-footer d-flex justify-content-center">
                <button type="button" class="btn btn-danger" data-dismiss="modal">CANCEL</button>
                <button type="submit" class="btn btn-success">ACCEPT</button>
              </div>
            </form>
          </div>
        </div>
      </div>
</body>
</html>

Notably, within my Laravel project, the date picker appears misaligned with floating elements while still highlighting the current date. Seeking advice on potential solutions to this dilemma.

javascriptlaravelbootstrap-4

Answer №1

Make sure to include the startDate parameter in your JavaScript code:

<script>
    $(document).ready(function(){
        $('.datepicker_modal').datepicker({
            dateFormat: 'dd-mm-yy',
            startDate: "12-12-2020",
            container:'#myModalId',
            todayHighlight: false
        });
    });
</script>

Using the container attribute can help with positioning issues:

<input id="date_pick" placeholder="DD-MM-YYYY" type="text" data-date-container='#myModalId' class="form-control datepicker_modal" name="date_pick" autocomplete="off" required>

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

How come the use of a timeout causes the this variable to seemingly lose its reference?

What is the reason why this: myelements.mouseenter(function() { clearTimeout(globaltimeoutvar); globaltimeoutvar = setTimeout(function() { var index = myelements.index(this); console.log(index); // -1 }, 150); }); Returns -1, while this: m ...

javascriptjquerysettimeout

What are the best practices for implementing image-slice in node.js?

I attempted to utilize image-slice to divide an image into multiple parts using Node.js. I tried installing npm i image-to-slices, sudo port install cairo, npm i canvas, and brew install pkg-config cairo pango libpng jpeg giflib. However, I still encounte ...

javascriptnode.jsslicecaironode-canvas

Allow users to edit the textarea only to input values, not from

I am trying to achieve a specific functionality with two input fields and one textarea. Whenever I type something in the input fields, their values are automatically populated in the textarea using .val(). Currently, this feature is working as intended, b ...

javascriptjqueryhtmlinputtextarea

Tips for removing the current item from a list by clicking on a close icon of the same class name

Is there a way to remove a list item after clicking on its close icon? I am using a JavaScript function to add items to the list. Please refer to the image and code below. Thank you! https://i.stack.imgur.com/aeASd.png The code snippet is as follows: f ...

javascriptjquery

Tips for optimizing large image files on a basic HTML, CSS, and JavaScript website to improve site speed and ensure optimal loading times

Currently, my site is live on Digital Ocean at this link: and you can find the GitHub code here: https://github.com/Omkarc284/SNsite1. While it functions well in development, issues arise when it's in production. My website contains heavy images, in ...

javascripthtmlcssuser-interfacegsap

Encountering an error message when trying to launch an application: Module

Every time I try to launch my react-native app in git-bash, I encounter the following error message. I have already uninstalled and reinstalled node.js, cleared the cache, and attempted various solutions from Stack Overflow and GitHub with no success. ...

javascriptnode.jsreact-nativenpmexpo

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

I'm still getting the hang of typescript, and I've come across a situation where a function inside a Class constructor is calling another function, but when trying to access this within sayHelloAgain(), it returns the window object instead. With ...

javascripttypescriptarguments

Issue encountered while trying to define a global variable within a JavaScript Class

I'm currently working on setting up a page variable that can be utilized by my Scroller class for implementing infinite scrolling. It's crucial for this variable to have global scope, as it needs to retain its value outside of the ajax function. ...

javascriptjqueryajax

Does anyone have insight on which JavaScript library is being utilized in this context?

While perusing an interesting article, I came across an image that caught my attention. Clicking on it revealed a unique way to view the full size. I am curious if anyone knows which JavaScript library was used for this effect. You can find the article her ...

javascripthtmlimage

How can you check if a field is blank without allowing any empty spaces to be saved in JavaScript?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <form id="api_crud_form" name="api_crud_form" action="https://www.google.es"> Name: <input type="text" name="name" id=" ...

javascriptphphtml

Problem encountered when attempting to post to a node/express endpoint

It has been a while since I last used JQuery/Ajax instead of axios to connect to an endpoint, am i making any mistakes here? var express = require('express'); var app = express() var bodyParser = require('body-parser'); var path = re ...

javascriptjquerynode.jsajax

Having trouble troubleshooting the jQuery button

When I click this button, it triggers an ajax call that updates the score_up value. I can't seem to figure out what's wrong. I attempted using Firebug, but it doesn't detect the JavaScript. Any help would be appreciated! Here is the jQuery ...

javascriptjquery

hitting the value of the text input

Is there a way to strike through only the first word in an input box of type text, without editing the html? I've tried using css text-decoration: line-through; but it's striking both words. Any suggestions on how to achieve this using javascript ...

javascripthtmlcss

Switch between accordion items

Currently, I have a React Js accordion in which clicking on an item opens the panel. To close it, you need to click on another item. However, I am looking to enhance this functionality by allowing the active panel to be closed after clicking on the AccButt ...

javascriptreactjs

AngularJS $location Redirect Error: Property 'path' Undefined

I'm struggling with an issue in my AngularJS code where I am trying to change the URL without reloading the page when a submit button is clicked. However, I keep getting a TypeError: Cannot read property 'path' of undefined in the console. ...

javascriptangularjs

Determine the specific value of an HTML table cell by specifying the column name for a specific row

One challenge I am facing is dynamically creating a table using JSON without knowing in advance the number of columns and/or rows that will be generated. I have successfully added a clicked event for the row that gets selected. In every table, there will ...

javascriptjqueryhtml

What steps can be taken to verify that the submitted data is a legitimate numerical pair?

When I receive a string, it should be in the following format: number,number For example: 34.798,52.123 I need to verify that the number is indeed in this format before assigning it to variables and performing calculations. There is also a concern that ...

javascriptnode.js

Creating complex concave shapes using Three.js from a point cloud

Currently facing a challenge in dynamically creating shapes in three.js from a point cloud. While ConvexGeometry works well for convex shapes, it becomes complex when dealing with concave shapes. The process involves drawing a line on the 2D plane (red li ...

javascriptreactjsthree.jsreact-three-fiberreact-three-drei

Utilizing Vue.js to share a single array of data across two distinct input lists

For a clearer understanding of my requirements, I have put together a demo on JSFiddle: https://jsfiddle.net/silentway/aro5kq7u/3/ The code snippet is presented below: <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id=" ...

javascriptvue.jsvuejs2v-model

Update the text on a button using a different button

function modify_button_text(){ //update the word from cat to dog. } <button id="button_1_id" >Cat</button> <br><br><br><br> <button id="modify_button_text_btn" >Change the Text of Above Button</button> ...

javascripthtmljquerycssarrays