Change the pointer in a bootstrap-datepicker

Navigation
2

I have a bootstrap-datepicker , when I position the mouse over the calendar on the day or in the month browser the pointer that appears is the selection pointer, similar to I , but I would like was that of the hand with the index finger, how could I solve this?

    
asked by anonymous 18.12.2017 / 16:13

3 answers

3

The Datepicker is built on a div with the class="datepicker" (Bootstrap-Datepicker version).

In order for the cursor within this div to be the "index finger" (in CSS = pointer ), include the style in your CSS: 

.datepicker{
   cursor: pointer;
}

In this way, whenever the cursor enters the calendar, you will have the pointer cursor. 

$('#calendario').datepicker();
.datepicker{
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://vitalets.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<input type="text" id="calendario">
    
18.12.2017 / 16:26
3

My answer is very similar to the rest of them. It uses the same concept of changing cursor , but I do for jquery :

Just add the following: 

$( ".ui-datepicker-trigger" ).css('cursor','pointer');

Here's an example of the settings you've commented on: 

$('#calendarioIni').datepicker({ 
  minDate: '01/01/1998'
  , maxDate: '31/12/1998'
  , dateFormat: 'dd/mm/yy' 
}); 

$( ".ui-datepicker-trigger" ).css('cursor','pointer');
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        
<input type="text" id="calendarioIni">
    
25.01.2018 / 17:44
2

I did a little different from Dvd, because when the cursor stays like Pointer the whole time it seems everything is clickable, but not everything has click. So I put cursor:default; in the parent element and only used cursor:pointer; in the clickable areas.

In the jquery-ui.css file, go to the end of the styles, and override the .ui-datepicker 

/* ----- Override de classes -----*/
.ui-datepicker {
    cursor: default;
}
.ui-datepicker a {
    cursor: pointer;
}

Here is the link to get the jquery-ui CSS : link

If you want to use the CDN link as in the example below, just put within the <head> of your page the new CSS inside tags <style> css com o override </style> </head>

If you want to use these classes in a file for example style.css you should put the classes inside it and the <head> where you call the file links should look like this: (Note that your CSS with new classes style.css must come below jquery-ui.css ) 

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">

Example with the Default and Pointer 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

        
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<style>
    .ui-datepicker {
        cursor: default;
    }
    .ui-datepicker a {
        cursor: pointer;
    }
</style>
</head>
<body>

        
        <input type="text" id="calendario">
<script>
$('#calendario').datepicker();

</script>
</body>
</html>
    
25.01.2018 / 17:36
Generate array with random values in Javascript Java polymorphism