在同一页中的两个不同的日期选择器

我有问题在同一页上显示两个日期选择器。在一个应该用隐身来显示这样在同一页中的两个不同的日期选择器

enter image description here

，另一个应该是一个经常日期选择器。

为了实现第一个功能，我这样做：

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

，然后通过使用CSS我藏起了身体：

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

但是，当我想要显示的第二日期选择器，我不能覆盖该CSS风格。

我试图

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

我试过甚至完全删除样式属性，但仍然没有运气。

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

有没有人有如何实现这个想法？

感谢

UPDATE：

这是什么，我现在所拥有的一个fiddle

来源

2013-05-21 MaVRoSCy

我终于到达使用此代码的可接受的解决方案：

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

和完全除去的CSS。

这里是工作fiddle

来源

2013-05-21 11:47:50 MaVRoSCy

+1，救世主。用beforeShow和onClose尝试，但没有成功...... – TecHunter

你可以尝试

在JS $（” UI的日期选择器，日历。 '）。隐藏（）; $（'。ui-datepicker-calendar'）。show（）;

在CSS

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

来源

2013-05-21 10:58:18 shammelburg

-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>

来源

2013-05-21 11:45:34 user2148024

你会考虑加入一些故事，解释为什么这个代码工作，并且这使其成为一个问题的答案？这对询问问题的人以及任何其他人来说非常有帮助。 –

在同一页中的两个不同的日期选择器

回答

相关问题