Enhancing a Datepicker with Jquery: Coloring Weekends and Adjacent Month Dates

Currently, I have a datetime picker code that is functioning correctly. However, I am looking to add colors for weekends (Saturdays & Sundays) and display dates from the next or previous months as well.

I would appreciate any help with achieving this. Below is the runnable code snippet, kindly provide the necessary code modifications:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
  $('#datetimepicker1').datetimepicker(
    {
            format: 'DD/MM/YYYY HH:mm',
    }
);
});
</script>
<style>
body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 12px;
}
</style>
</head>

<body>


<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>


</body>
</html>

Many thanks in advance for your assistance!..

Answer №1

Modify the style of

.bootstrap-datetimepicker-widget .weekend
as shown below.

.bootstrap-datetimepicker-widget .weekend {
  color: red;
  /*Update with your preferred color*/
}
<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(function() {
      $('#datetimepicker1').datetimepicker({
        format: 'DD/MM/YYYY HH:mm',
      });
    });
  </script>
  <style>
    body {
      font-family: Verdana, Arial, sans-serif;
      font-size: 12px;
    }
  </style>
</head>

<body>


  <div class="container">
    <div class="row">
      <div class='col-sm-6'>
        <div class="form-group">
          <div class='input-group date' id='datetimepicker1'>
            <input type='text' class="form-control" />
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/js/bootstrap-datetimepicker.min.js"></script>


</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

pg-promise received an error due to an incorrect parameter being passed in for options

I have been working on transitioning my files from utilizing the pg package to the pg-promise package. Initially, everything was functioning correctly with the original pg solution I had in place. However, upon switching to pg-promise and referencing the d ...

How can I send an object with different data types in an AJAX post request?

Within the confines of my webpage, a single input beckons for user input. Intriguingly, dwelling within my JavaScript sanctuary lies an object structured as such: var obj = { sort: 'newest', num: 10, values: [1, 2, 3, 4] }; A verit ...

DiscordJS bot using Typescript experiences audio playback issues that halt after a short period of time

I am currently experiencing difficulties with playing audio through a discord bot that I created. The bot is designed to download a song from YouTube using ytdl-core and then play it, but for some reason, the song stops after a few seconds of playing. Bel ...

Utilize CSS to ensure footer fills remaining bottom space

My goal is to have the footer take up the entire remaining bottom space. Currently, I am using the following CSS for the footer: clear: both; float: left; background-color: #1F1102; color: #E4F2FA; min-height: 60px; font-family: Verdana, Geneva, sans-serif ...

Include a carbon copy when generating a script for an email

I am working on a form that sends emails, and I need to include a cc email address in the recipient list. Can someone guide me on how to modify the line below to achieve this? Thank you. mail("<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

Create a MongoDB query using AJAX

My goal is to fetch the count of users using the email [email protected] through the ajax request below: function getUserCount(event) { event.preventDefault(); var queryCount = { email:'<a href="/cdn-cgi/l/email-protection" class="__cf_e ...

Guide to successfully downloading an xlsx file in angular through express

I am creating an xlsx file based on user input within the express framework. The data is sent via a post request and I intend to send back the file content using res.download(...). However, when I do this, the data field in my ajax response ends up contai ...

Resolving Jest error in React JS unit tests

While working on a unit test for React code, I encountered an issue with a particular action. For example, suppose I have the following line in testing.js: const images = require.context('../../../media/promotions', true); Here is the unit tes ...

Starting objects before utilizing them in the useFrame() function in react-three-fiber

I am currently working on a project using react-three-fiber to create a scene. However, I am facing an issue with placing 3D objects at different random positions. I tried using a for loop inside useFrame to set random positions, but this causes the partic ...

Error: Trying to access the 'previous' property of an undefined value

I keep encountering an error with functions in firebase: TypeError: Cannot read property 'previous' of undefined at exports.sendNotifications.functions.database.ref.onWrite (/srv/index.js:5:19) at cloudFunction (/srv/node_modules/firebase-functi ...

Node development does not operate continuously

I'm facing a minor issue with node-dev. I followed the instructions in the readme file and successfully installed it. However, when I run the command like so: node-dev somescript.js, it only runs once as if I used regular node without -dev. It doesn&a ...

Having trouble loading a chart with amcharts after sending an ajax request

I have integrated amcharts to create a pie chart. When I click a button, an AJAX request is triggered to fetch data from MySQL in JSON format. After receiving the JSON array, I pass the data to amcharts but the chart doesn't display. Oddly, if I redi ...

What is the best way to arrange an array using AngularJs or Javascript?

When a user makes a selection, I want to sort and display an array in alphabetical order. Specifically, when we render data from the backend, I would like to display the fullName in alphabetical order. The $scope.selectedControlOwner is the ng-click event ...

An element will not automatically wrap text when all anchors are in place

http://jsfiddle.net/awWmY/ I've been struggling to figure out why the text won't wrap to #bigEnough. Can anyone help me with this simple issue? html{background:black;} #bigEnough { width: 500px; text-wrap: normal; } #bigEnough a { -moz-t ...

Adding a background color to the body of your PHP and HTML email template is a simple way to enhance

I am currently using a confirmation email template with a white background, but I want to change it to gray. However, I'm unsure how to update the PHP file containing the email function below: $headers = "From: " . stripslashes_deep( html_entity_deco ...

Change the input type from text to password for enhanced security

Can someone help me with changing the input type to password when it is clicked on? I attempted the following: <input name="pin" id="cp_serv" type="text" class="pin_v" value="Insert PIN Please" onclick="this.value='';$(this).attr('type&a ...

Tips for preserving a string in angularJS or Java (and implementing it in an iframe)

My plan involves utilizing a Java web service to fetch the HTML content from a specific URL using Jsoup, and then returning it as a string to the requesting party, which could be an Angular or JS script. I am keen on preserving this content somewhere and l ...

Save my Facebook profile picture to my website folder

Retrieve a Facebook profile image and store it in my designated directory, "www.site.com/images". <?php $url = "https://graph.facebook.com/$id/picture?width=350&height=500&redirect=false"; ?> The value of "$id" is obtained from a textfield. ...

The module '@algolia/cache-common' is missing and cannot be located

summary: code works locally but not in lambda. My AWS lambda function runs perfectly when tested locally, utilizing Algolia within a service in the server. Despite installing @algolia/cache-common, any call to the lambda results in a crash due to the erro ...

A horizontal line will separate the title both before and after

Is there a way to create an hr line both before and after a title using Bootstrap 5? I have managed to add the lines, but I am struggling to align the title within a container class in order for the lines to span the width of the screen. My current code s ...