How to change the CSS of Datepicker?

Asked

Viewed 1,113 times

0

Watch the image;

inserir a descrição da imagem aqui

This is my HTML;

 <input  class="form-control date-picker"  placeholder="Data Início">

And this is my Javascript code;

$(function() {
    $('.date-picker').datepicker( {
        changeMonth: true,
        changeYear: true,
            dateFormat: 'MM/yy',
       // dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'],
        dayNamesMin: ['D', 'S', 'T', 'Q', 'Q', 'S', 'S', 'D'],
        dayNamesShort: ['Dom', 'Seg', 'Ter', 'Qua', 'Qui', 'Sex', 'Sáb', 'Dom'],
        monthNames: ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'],
        monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
        nextText: 'Proximo',
        prevText: 'Anterior'
    });
});
  1. Please, how do I change the color of the calendar to Blue?
  2. And how do I get the names of the months, because it’s blank?
css jquery-ui
  • 1

    Hi, you can create a complementary stylesheet and make use of the browser element inspector to view the style tree and modify them or risk changing the original file, which is not advisable, create a new sheet and calla after the plugin and make your modifications.

  • Guy puts the plugin you are using there. only with these hints can not answer you... Here for example is getting like this http://prntscr.com/ndb82y and vc uses Bootstrap 3 or 4?

1 answer

1


jQuery has a page where you can assemble the theme you want for the component (choosing colors etc.)

The link is this: http://jqueryui.com/themeroller/

As you want to change only Datepicker, just change the options in the box to the left of the page and go on to see how it looks (on the page will appear several components. But at least in the middle of the page you will see the Datepicker):

inserir a descrição da imagem aqui

If you don’t want to bother changing the options, on the download page of the theme, there are several pre-configured themes, where you can select the one that suits you best.

Just click on "Download Theme" and at the bottom of the page you will see a select with a list:

inserir a descrição da imagem aqui

Before downloading a preconfigured theme, you can preview them on this page:

https://www.plus2net.com/jquery/msg-demo/date-picker-themes.php

After downloading the theme, unzip the . zip and include the file jquery-ui.theme.css or jquery-ui.theme.min.css (compacted) on your page.

Browser other questions tagged css jquery-ui

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