Changing the pointer on a bootstrap-datepicker

Asked

Viewed 657 times

2

I own a bootstrap-datepicker, when I place the mouse on top of the calendar on the day or on the month navigator the pointer that appears is that of selection, similar to I, but I wish it was the one with the index finger, how could I solve this?

css bootstrap-3

3 answers

3

My answer is very similar to the others uses the same concept of changing the cursor, but I do it for jquery:

Just add the snippet below:

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

Follow example according to the settings you 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>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

        
<input type="text" id="calendarioIni">

  • I had to make some settings in JS pro datepicker, if I do it will work? $('#calendarioIni'). datepicker({ startDate: '01/01/1998', endDate: '31/12/1998', dateFormat: 'dd/mm/yy' }); $( ". ui-datepicker-Trigger" ).css('cursor','Pointer');

  • I tested here and did not roll

  • The style on the cursor works, but I think what you want to do with Startdate and endDate would be the equivalent of minDate and maxDate

  • here is the opposite, it works the range but does not work the cursor

  • Can you edit your question and include the code? With a mcve? This will make our answers more accurate. http://answall.com/help/mcve

3


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

So that the cursor inside that div is the "index finger" (in CSS = pointer), include style in your CSS:

.datepicker{
   cursor: pointer;
}

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

$('#calendario').datepicker();
.datepicker{
   cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="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">

  • would be within the style.css?

  • I put it inside the style.css and the change did not occur, continues with the wrong pointer, you could explain me better where this div occurs?

  • my problem is: where to put this snippet of code... I put it in style.css and it didn’t work, and I put a lot more places and none gave

  • @V.Avancini It gets complicated then, because there is no way to reproduce the problem. In normal ways it would have to work (run the example in the answer).

  • I ran the example, saw it worked right

  • @V.Avancini Run this simple test: open the calendar and leave it open. Open the F12 console and run this code: $("#ui-datepicker-div").css("cursor","pointer")... hover your mouse over the calendar and see if you’ve done the effect.

  • I don’t know how you do it

  • @V.Avancini Open the console and paste the code into the command line and press Enter.

  • noticed an error in jQuery: Uncaught Typeerror: url.indexof is not a Function at jQuery.fn.init.jQuery.fn.load

Show 4 more comments

2

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

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

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

Here’s the link to get the CSS from jquery-ui: https://jqueryui.com/download/all/

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

If you want to use these classes in an aquivo for example style.css you must put the classes inside it and in the <head> where vc calls the links of the files should come like this: (Note that your CSS with new classes style.css should come under the 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 solution 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>
    <script src="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>

Browser other questions tagged css bootstrap-3

You are not signed in. Login or sign up in order to post.