Possuo um bootstrap-datepicker, quando posiciono o mouse em cima do calendário no dia ou então no navegador dos meses o ponteiro que aparece é aquele de seleção, parecido com I
, mas gostaria que fosse aquele da mão com o dedo indicador, como poderia resolver isso?
3 Respostas
O Datepicker é construído em uma div
com a class="datepicker"
(versão Bootstrap-Datepicker).
Para que o cursor dentro dessa div
seja o "dedo indicador" (no CSS = pointer
), inclua no seu CSS o estilo:
.datepicker{
cursor: pointer;
}
Desta forma, sempre que o cursor entrar no calendário, terá o 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">
-
-
coloquei ele dentro do style.css e a mudança não ocorreu, continua com o ponteiro errado, vc poderia me explicar melhor onde essa div ocorre? 25/01/2018 às 15:17
-
o meu problema é: onde colocar esse trecho de código... pus no style.css e não funcionou, e coloquei e mais um porção de lugares e nenhum deu 25/01/2018 às 15:43
-
@V.Avancini Fica complicado então, porque não tem como reproduzir o problema. Em vias normais teria que dar certo (execute o exemplo na resposta).– Meu ovo25/01/2018 às 16:30
-
Minha resposta é bem parecida com as demais utiliza o mesmo conceito de mudar o cursor
, mas faço por jquery
:
Basta adicionar o trecho a abaixo:
$( ".ui-datepicker-trigger" ).css('cursor','pointer');
Segue exemplo conforme as configurações que você comentou:
$('#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">
-
eu tive que fazer algumas definições em JS pro datepicker, se eu fizer isso vai funcionar? $('#calendarioIni').datepicker({ startDate: '01/01/1998', endDate: '31/12/1998', dateFormat: 'dd/mm/yy' }); $( ".ui-datepicker-trigger" ).css('cursor','pointer'); 25/01/2018 às 16:56
-
-
O estilo no cursor funciona, mas acho que o que você quer fazer com StartDate e endDate, seria o equivalente minDate e maxDate 25/01/2018 às 17:05
-
-
Consegue editar sua pergunta e incluir o código? Com um mcve? Isso fara com que nossas respostas sejam mais precisas. pt.stackoverflow.com/help/mcve 25/01/2018 às 17:15
Eu fiz um pouco diferente do Dvd, porque quando o cursor ficar como Pointer
o tempo inteiro parece que tudo é clicável, mas nem tudo tem clique. Por isso eu coloque o cursor:default;
no elemento pai e só usei o cursor:pointer;
na áreas clicáveis.
No arquivo jquery-ui.css
vá até o final dos estilos, e faça um override das classes .ui-datepicker
/* ----- Override de classes -----*/
.ui-datepicker {
cursor: default;
}
.ui-datepicker a {
cursor: pointer;
}
Aqui tem o link para pegar o CSS do jquery-ui: https://jqueryui.com/download/all/
Se quiser usar o link do CDN como no exemplo abaixo, basta colocar dentro da <head>
da sua página o CSS novo dentro de tags <style> css com o override </style>
</head>
Se vc quiser usar essas classe em um aquivo por exemplo style.css
vc deve colocar as classes dentro dele e na <head>
onde vc chama os links dos arquivos deve vir assim: (Repare que o seu CSS com as classes novas style.css
deve vir abaixo do 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">
Exemplo com a solução Default e 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>