Customizing jQuery ui datepicker width

Question

I am using jquery ui datepicker to show datepicker when someone clicks on the input with the help of following code snippet.

Code:

$('#datepicker').datepicker();

JSFIDDLE

The problem I have with this is that the calendar should come as full width of the input before it.

I did search the internet and used a few code snippets but none worked.

My approach:

$('#datepicker').datepicker({
    beforeShow: function(input, inst)
    {
        inst.dpDiv.css({ width: input.width + 'px'});
    }
});

In the Fiddle the input's width is fixed as 500px, so datepicker width should also be 500px wide. And datepicker's width should adapt to whatever width is of this input.

check this http://stackoverflow.com/questions/1865091/jquery-datepicker-language, http://stackoverflow.com/questions/5332445/datepicker-jquery-ui-set-language, — Ranjeet Singh, May 19 '16 at 08:44
Thanks @RanjeetSingh. That helped me to change the language. — Kiran Dash, May 19 '16 at 09:05
@KiranKumarDash *"the calendar should come as full width of the input before it"* - We don't know which jQuery UI theme you're using, (*This isn't how default date picker looks like*) we don't have the input or it's styling, or the customization you did... Please create a [mcve] so that we can see the problem... — T J, May 19 '16 at 09:14
@TJ. Please check again. I have made some edits and provided the jsfiddle to focus only on the issue. — Kiran Dash, May 19 '16 at 09:25

score 2 · Accepted Answer · answered May 19 '16 at 09:42

2

You can adjust the calendar size using the below CSS:

$('#datepicker').datepicker();

#datepicker,
.ui-datepicker,
.ui-datepicker-header,
.ui-datepicker-calendar {
  width: 500px;
}
.ui-datepicker-calendar {
  background: dodgerblue;
}
.ui-datepicker-header {
  text-align: center;
  color: #fff;
  background: #000;
}
.ui-datepicker-prev {
  float: left;
}
.ui-datepicker-next {
  float: right;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="datepicker">

answered May 19 '16 at 09:42

T J

42,762
13
83
138

1

But that will make the width of datepicker fixed. Instead of that I would like to have a jquery script that will make it's width adapt to width of the input. – Kiran Dash May 19 '16 at 09:51
@KiranKumarDash How is the input's width going to change? You can apply the same changes to datepicker as well... why not? Unless you're creating a plugin on top of jQuery UI (*which you are likely not*) I don't see that being a problem. There is something going on behind the hoods that is preventing/clearing the inline width being set by script. – T J May 19 '16 at 10:13
The input's width is actually mentioned in percentage for my case. So, currently I am trying to write some script to first get the width of input and then assign that width to datepicker. – Kiran Dash May 19 '16 at 16:15

Mateusz Matejunas · Answer 2 · 2018-02-20T10:39:23.647

2

Datepicker show function unfortunately resets width parameter, even one set in "beforeShow" callback. To fix this we can move it after show on JS Call Stack by setTimeout().

$('#datepicker').datepicker({
    beforeShow: function (input, inst) {
        setTimeout(function(){
            inst.dpDiv.outerWidth($(input).outerWidth());
        },0);
    },
})

edited Feb 20 '18 at 10:39

answered Feb 19 '18 at 15:19

Mateusz Matejunas

21
4

Code only answers arent encouraged as they dont provide much information for future readers please provide some explanation to what you have written – WhatsThePoint Feb 19 '18 at 15:38

Customizing jQuery ui datepicker width

2 Answers2