I am currently collaborating on the Bootstrap5 project and, in order to accurately incorporate the data, I must align the calendar with the design specifications outlined

Currently, I am working on a project using Bootstrap5 and I need to adjust the calendar to match the design in Figma. At the moment, my calendar looks like this:

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

However, I want it to look like the second image that I am attaching from Figma:

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

I have tried to style the class of the datepicker table but so far nothing has worked.

$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'right',
    locale: {
      format: 'MMM D, YYYY',
      applyLabel: 'Apply', // Custom "Apply" button label
      cancelLabel: 'Cancel',
      daysOfWeek: ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'],
      monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      firstDay: 1
    },
    startDate: moment().subtract(29, 'days'),
    endDate: moment(),
  });
});
.daterangepicker {
  width: 752px;
  height: 470px;
  border-radius: 9px;
  border: none;
  background: #FFF;
  box-shadow: 0px 16px 23.5px 0px rgba(0, 0, 0, 0.15);
}

.daterangepicker:before {
  position: relative;
  border-right: none;
  border-left: none;
  top: 0;
}

.daterangepicker .drp-calendar {
  margin: 20px;
  width: 372px;
}

table>thead>tr:nth-child(1) {
  position: relative;
  width: 372px;
}

table>thead>tr:nth-child(1)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background-color: #BDBDBD;
}

.daterangepicker .calendar-table .prev span {
  /* background-image: url("/assets/images/chevron-left.png"); */
  border: solid #828282;
  border-width: 0 2px 2px 0;
  /* width: 21px;
        height: 21px */
}

.daterangepicker .calendar-table .month {
  color: #828282;
  text-align: center;
  font-size: 17px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3c5e5353484f484e5d4c7c09120f120c115d504c545d0d">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="600a111505121920534e564e50">[email protected]</a>/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4d9dbd9d1dac0f4869a868d9a85">[email protected]</a>/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>

<div class="container mt-5">
  <input type="text" name="daterange" class="form-control" placeholder="Start Date - End Date" id="datefilter">
</div>

htmlcssbootstrap-5

Answer №1

To style the calendar based on the Figma inspect, I attempted to implement the following code snippet but encountered some issues:

$(function() {
  $('input[name="daterange"]').daterangepicker({
    opens: 'right',
    locale: {
      format: 'MMM D, YYYY',
      applyLabel: 'Apliko',  // Your "Apliko" button for apply
      cancelLabel: 'Cancel',
      daysOfWeek: ['MO', 'TU', 'WE', 'TH', 'FR', 'SA', 'SU'],
      monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      firstDay: 1
    },
    startDate: moment().subtract(29, 'days'),
    endDate: moment(),
  });
});
    .daterangepicker {
        width: 752px;
        height: 470px;
        border-radius: 9px;
        border: none;
        background: #FFF;
        box-shadow: 0px 16px 23.5px 0px rgba(0, 0, 0, 0.15);
    }

    .daterangepicker:before {
        position: relative;
        border-right: none;
        border-left: none;
        top: 0;
    }

    .daterangepicker .drp-calendar {
        margin: 20px;
        width: 372px;
    }


    table>thead>tr:nth-child(1) {
        position: relative;
        width: 372px;
    }

    table>thead>tr:nth-child(1)::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: #BDBDBD;
    }

    .daterangepicker .calendar-table .prev span {
        /* background-image: url("/assets/images/chevron-left.png"); */
        border: solid #828282;
        border-width: 0 2px 2px 0;
        /* width: 21px;
        height: 21px */
    }

    .daterangepicker .calendar-table .month{
        color: #828282;
        text-align: center;

        font-size: 17px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
    }
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f4f9f9e2e5e2e4f7e6d6a3b8a5b8a6bbf7fae6fef7a7">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="751f040010070c35465b435b45">[email protected]</a>/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa9795979f948ebac8d4c8c3d4cb">[email protected]</a>/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.js"></script>
</head>
<body>

<div class="container mt-5">
  <input type="text" name="daterange" class="form-control" placeholder="Start Date - End Date" id="datefilter">
</div>


</body>

</html>

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 can I change the names of links containing question marks?

In the past, I would rename links by adding a question mark at the end of them, for example: LinkName.mp4? to Anything I want.mp4 This method allowed me to download the file with the desired name "Anything I want" instead of the original "LinkName"... U ...

htmlhyperlinkrename

Tips for keeping a Bootstrap div fixed at the top of the viewport

I have a webpage built with Bootstrap 5 that incorporates vertical navigation tabs. The issue I am facing is that, particularly on larger screens, the page tends to scroll up and down based on the content displayed in the tabs. My goal is to ensure that t ...

htmlbootstrap-5

displaying a confirmation alert upon unchecking a checkbox using javascript

I am trying to implement a feature where a message saying "are you sure?" pops up when the user tries to uncheck a checkbox. If they choose "yes", then the checkbox should be unchecked, and if they choose "no" it should remain checked. I'm new to Java ...

javascripthtml

Using Angular Ionic 3 to apply the disabled attribute

I have a situation in my main.ts where I need to disable a textarea in the HTML if an object is initialized. I've attempted various methods like: ng-attr-disabled="!myObj"; ng-attr-disabled="{myObj!= null}"; and also directly using ng-disabled. I e ...

htmlangulartypescriptionic-frameworkionic3

Bootstrap doesn't display in the dropdown menu

Struggling to get a dropdown menu to display on my page, my HTML code is: <div class="dropdown d-inline"> <div class="widget-header mr-3"> <button href="#" class="icon icon-sm rounded-circle border" data-toggle="dropdown"><i cl ...

htmllaravelbootstrap-4drop-down-menu

Utilizing the essential "required" attribute in HTML5 in conjunction with a submit Button

I'm encountering a frustrating issue with a form. I typically use the 'required' attribute in an input box for quick validation, but when I switch to using a button instead, the validation doesn't seem to work. Is it possible that the & ...

htmlformsbuttonsubmitrequired

The POST method is not retrieving any data from the Form in Django and Bootstrap

I've created a registration form for new users, utilizing Bootstrap 5 for a visually appealing design. However, upon clicking the submit button, the form fails to validate. The error message produced by print(form.errors) indicates that all fields are ...

pythondjangobootstrap-5

Leveraging font display functionality while incorporating a Typekit URL

Pagespeed is giving me a warning, Make sure text remains visible during webfont load I have been researching how to fix this problem and I found people suggesting to include the font-display: fallback argument in the font declaration block. However, I ...

csssasspagespeedtypekit

An easy way to switch animations using CSS display:none

Dealing with some missing gaps here, hoping to connect the dots and figure this out. I'm attempting to create a functionality where a div slides in and out of view each time a button is clicked. Eventually, I want multiple divs to slide out simultane ...

javascriptjquerycss

How can SQL data be loaded following the selection from a dropdown menu?

I have a pressing query that I need assistance with. I am aiming to achieve a certain task, but due to lack of prior experience in this area, I am unsure about how to proceed. My current situation involves populating a dropdown menu with names retrieved f ...

javascriptphphtmlmysqlsql

Having successfully configured and published Google Tag Manager, unfortunately, I am encountering difficulties in displaying the tag on the website

After setting up my GTM account and creating containers, tags, etc., I encountered an issue. Even after publishing my container and creating a version, when I checked my website, all the code was hidden within a div tag with display none and visibility hid ...

javascripthtmlcssgoogle-tag-manager

Combining Text in HTML Using CSS to Create Layered Effects

Link to GitHub: http://github.com/user123/code I'm attempting to position "welcome" behind "home", but I've been struggling to achieve this. I've experimented with setting the position, but so far I haven't been successful. Here' ...

css

Personalizing the React Bootstrap date picker

I am currently working on customizing the react-bootstrap-daterangepicker to achieve a specific look: My goal is to have distinct background colors for when dates are selected within a range and when the user is hovering over dates to make a selection. I ...

javascripthtmlcssreactjsreact-bootstrap

Organize table information using rowspan functionality

View of Current Table I am looking to implement a side column in my table using rowspan to group dates within each pay period. The goal is for a supervisor to be able to create a new pay period, which will assign a unique integer in the database and then ...

javascriptphphtmlsql

Is it necessary to download the PDF file for accessibility purposes?

Currently, I am working on a website that includes downloadable PDF links. We are utilizing a parameter at the end of the file download URL to instruct the browser on how to handle the file: https://example.com?ref=0&download=y By using the download= ...

htmlpdfhyperlinkaccessibility

Challenges encountered when redirecting users with a combination of javascript and php

I have a login form that triggers a JavaScript function upon submission. This function calls a PHP page to process the input. The issue I'm facing is with how the redirections are displayed based on the user's role type. It attempts to display t ...

javascriptphpjqueryhtmlforms

Tips on managing URL in jQuery Mobile that appears in the navigation bar

I am currently working on a jQuery Mobile application that is designed to function on a single static URL, also known as a single page application. Using $.mobile.changePage.defaults.changeHash = false within the mobileinit event has been successful in ma ...

jqueryhtmljquery-mobilemobilesingle-page-application

Steps for eliminating a linebreak at the conclusion of a textarea

Can someone help me figure out why there is an unexpected line break at the end of this textarea, even though I didn't include one in my code? How can I remove it? <textarea readonly="" rows="3" style="padding: 10px; resize: none;"> #!/bin/sh ...

html

The conflict name has an impact on both the folder and the PHP file

Within my web directory, there exists a folder titled area-nursing that houses various PHP files along with a specific file named area_nursing.php. However, upon attempting to rewrite area_nursing.php as area-nursing using the .htaccess file, I encounter ...

phphtmlnaming-conventions

Ace code editor: A guide to implementing hover error messages

Using an Ace editor, I want to enhance my website by highlighting specific code ranges and displaying error messages when they are hovered over, just like in the example image. I'm curious if this functionality can be achieved through the Ace editor ...

jqueryhtmlcssace-editor