CODEWITHSUNDEEP
jquerycssjquery-uidatetimepicker
MaVRoSCy
MaVRoSCy

Reputation: 17839

Two Different Datepickers in the same page

I have problem displaying two Datepickers on the same page. The one should be displayed with a hidden body like this

enter image description here

and the other one should be a regular datepicker.

To achieve the first functionality I do this:

$('.date-picker').datepicker( {
  changeMonth: true,
  changeYear: true,
  showButtonPanel: true,
  dateFormat: 'MM yy'
});

And then by using css i hide the body:

.ui-datepicker-calendar {
    display: none !important;
}

But when I want to display the second datepicker I cannot overwrite that css style.

I tried

$('.ui-datepicker-calendar').css('display', '');

I tried even completely removing the style attribute but still with no luck.

$('.ui-datepicker-calendar').removeAttr('style');

Does anyone has an idea on how to achieve this?

Thanks

UPDATE:

This is a fiddle of what i have right now

Upvotes: 0

Views: 2256

Answers (3)

shammelburg
shammelburg

Reputation: 7308

can you try

In JS $('.ui-datepicker-calendar').hide(); $('.ui-datepicker-calendar').show();

In CSS

$('.ui-datepicker-calendar').css('visibility', 'hidden');
$('.ui-datepicker-calendar').css('visibility', 'visible');

Upvotes: 1

MaVRoSCy
MaVRoSCy

Reputation: 17839

I have finally reached an acceptable solution using this code: 

            $('#startDate').focusin(function() {
                $('.ui-datepicker-calendar').hide();
            });
            $('#startDate').focusout(function() {
                $('.date-picker').datepicker('close');
                $('.ui-datepicker-calendar').show();
            });

and completely removing the css.

Here is the working fiddle

Upvotes: 2

user2148024
user2148024

Reputation: 1

I have two fields.May be it help u:-

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Select a Date Range</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
</script>
</head>
<body>
<label for="from">From</label>
<input type="text" id="from" name="from" />
<label for="to">to</label>
<input type="text" id="to" name="to" />
</body>
</html>

Upvotes: -1

Related Questions