Ways to style specific dates on a datepicker?

Is there a way to customize the appearance of the first and last selected days in my ui datepicker for booking, similar to the design shown in the image linked below?

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


            var dateFormat = "DD/MM/YY",
            from = $("#checkin,.checkin").datepicker({
              firstDay: 1,
              minDate: 0,
              showButtonPanel: true,
              closeText: 'Temizle',
              onClose: function(dateText, inst) {
                if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
                  document.getElementById(this.id).value = '';
                  //$('.checkin,#checkin,#checkout,.checkout').val('');
                }
              },
              onSelect: function(date) {
                window.setTimeout($.proxy(function() {
                  $(this).parents(".book-holiday").find("#checkout,.checkout").focus();
                }, this), 10);
                var date2 = $('#checkin,.checkin').datepicker('getDate');
                date2.setDate(date2.getDate() + 1);
                //$('#dt2').datepicker('setDate', date2);
                //sets minDate to dt1 date + 1
                $('#checkout,.checkout').datepicker('option', 'minDate', date2);
              },
              isTo1: true,
              beforeShow: function(input, inst) {
                $(this).datepicker("widget").addClass("main-datepicker");
              }
            });
          $("#checkout,.checkout").datepicker({
            firstDay: 1,
            minDate: 0,
            showButtonPanel: true,
            closeText: 'Temizle',
            onClose: function(dateText, inst) {
              if ($(window.event.srcElement).hasClass('ui-datepicker-close')) {
                document.getElementById(this.id).value = '';
                //$('.checkin,#checkin,#checkout,.checkout').val('');
              }
              var dt1 = $('#checkin,.checkin').datepicker('getDate');
              console.log(dt1);
              var dt2 = $('#checkout,.checkout').datepicker('getDate');
              if (dt2 <= dt1) {
                var minDate = $('#checkout,.checkout').datepicker('option', 'minDate');
                $('#checkout,.checkout').datepicker('setDate', minDate);
              }
            },
            isTo1: true,

            onSelect: function(selectedDate) {
              $(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
            },
            beforeShow: function(input, inst) {
              $(this).datepicker("widget").addClass("main-datepicker");
            }

          });
      
<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> From : <input type="text" class="checkin"> To: <input type="text" class="checkout">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Check out the Codepen Demo here

Answer №1

To customize the appearance of jquery-ui.css selector and change the colors displayed, you can modify it as shown below for the initial day.

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight 
{
  background: #e96e5e;
}

Could you provide additional details on your requirements?

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

Maintaining a fixed header that remains visible while scrolling through a dropdown menu in Angular

In my application, I have a mat-select widget that displays a list of options. When scrolling within the list, I find it difficult to keep track of all the options. I am looking to enhance the user experience by adding a fixed header at the top of the opt ...

The issue of changing the body font size in MUI v5 with React Styleguidist, ScopedCSSBaseline, and createTheme style overrides remains unresolved

Recently, I successfully migrated two MUI-powered UIs from MUI v4 to v5. In the process, I had to override their body fontSize according to the MUI migration guide to maintain the v4 design default of Typography body2 font size. This adjustment has worked ...

Which JQuery plugins can transform regular <select> dropdowns into more stylish options?

After an extensive search, I was only able to locate one solution at this link. I scoured the entire internet for alternatives. ...

How to use Javascript to set focus on a dropdown list within a PHP script

Having trouble setting focus on the dropdown list in my PHP page dc-test.php, where there are two dropdown lists that are interdependent. The values for these dropdown lists are fetched from a database table. I am unable to set focus on the first dropdown ...

Tips for placing a background image on an extended <a> hyperlink in Internet Explorer 6

There seems to be an issue with the background image of a link on my exam project. The requirement is for it to work seamlessly on all browsers, including IE 6. However, the problem arises when the link spans multiple lines in IE 6, causing the background ...

What is the correct way to retrieve a JSON object instead of getting [Object object]?

Creating a basic web scraper integrated with mongoDB. Even though the API returns the JSON object in the correct format, when trying to append it to a bootstrap card on the page, I'm getting [Object object]. Below is my JavaScript code running on th ...

The variable $_FILE fails to retrieve the file, resulting in PHP displaying an undefined variable error

I am facing an issue where I am unable to get the image file sent from an HTML form to insert it into a database. The other variables are being posted successfully, as I have checked them by echoing, but the image file is not getting posted. I suspect that ...

I'm curious why my background generator is only altering a portion of the background instead of the entire thing

I've been attempting to create a JavaScript random background changer, but I'm encountering some challenges. The main issue is that instead of changing the entire page's background, it only alters a strip of it. Additionally, I'm curiou ...

Showing a loading animation inside an HTML element

I have a main webpage that contains several buttons. Each button, when clicked, loads a specific target page as an object within a div on the main page. The "target" refers to the page that will be displayed within the object. <script> .... chec ...

Creating Positioning Magic with HTML Elements

Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...

Incapable of choosing every radio button within the initial three rows of a table

In my table, each row contains approximately 11 radio buttons and a few other attributes. I am attempting to make the radio buttons in the first three rows non-editable using the provided code. However, it seems that the code is not functioning as intend ...

Learn how to effectively transfer data from $.getjson to PHP, specifically through the use of Laravel's @foreach loop

$.getJSON( 'http://localhost/media_books/index.php/new_books.json?provider_id=1&limit=99&offset=1') .done(function( json ) { $(tar).closest('.accordion').children('div').text(json); }); I have successfully obtaine ...

Shifting focus among an array of standard <input> controls with each keystroke

When working with Angular, I encountered a situation where I have an array of arrays of numbers, as shown below: [ [1,1,1,1], [1,1,1,1] ] In my HTML file, I am using ngFor to generate input controls like this: <table> <tbody> ...

Show PDF within the browser using ajax technology

I've come across this question multiple times in various forms, but I still can't seem to find a satisfactory answer. When using the mpdf library to generate PDFs, I send some hidden field data to a PHP script via ajax. Below are snippets of the ...

Exploring the world of Ajax and managing cookies

I am facing an issue with setting cookies in my login form using ajax when the "remember me" checkbox is checked. Despite having code to handle this scenario, the cookies are not getting set properly. After executing var_dump($_COOKIE), I see that only the ...

"Troubleshooting the Touch Functionality on Bootstrap Carousel for Mobile

Sections of my responsive website utilize a bootstrap carousel to cycle through text and images. However, during testing, it was discovered that users on iPads were unable to swipe up and down to view more content on the site. It seems that swipe compatibi ...

Tips on attaching a suffix icon to a material-ui-pickers input box

Here is a snippet of my code: <Box p={6}> <Grid container spacing={2}> <Grid item xs={6}> <TimePicker autoOk label={t('checkIn')} value={time1} onChange={handlecheckIn} clearable /> </Grid> < ...

Ways to determine if an element has exceeded its container's boundaries

After creating the codesandbox, I have developed a webapp that heavily relies on user input. To keep it simple for demonstration purposes, I am displaying various authors on an A4 formatted page using `page` and `font-size` with the `vw` unit for responsiv ...

Tracking monthly expenses in Yii2: Tips on managing your finances

Can someone help me with combining all expenses and income from each user into the same gridview and filter by month? I have two SQL queries that work individually, but I need assistance in using UNION or converting them for Yii2's ActiveDataProvider. ...

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...