显示日期选择器的图标，点击并填写文本框，使所选日期
问题描述：
我想显示按钮点击日期选择器和jQuery中与选定的日期填写文本显示日期选择器的图标，点击并填写文本框，使所选日期
$(function() {
\t //today=new Date(1000*today);
var dateFormat = "mm/dd/yy",
from = $("#from_filter")
.datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to_filter").datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch(error) {
date = NULL;
}
return date;
}
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-4">
<span>From</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'>
<span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span>
</div>
</div>
<div class="col-md-4">
<span>To</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'>
\t \t \t \t \t \t \t <span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span>
</div>
</div>我想说明日期选择器上的图标点击。日期选择器只显示在文本框上点击
答
您可以在图标上单击.datepicker("show")，如下面的代码段所示。
另一种方法是，你还可以集中使用$('#to_filter').focus();这将打开日期选择器
$(function() {
//today=new Date(1000*today);
var dateFormat = "mm/dd/yy",
from = $("#from_filter")
.datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to_filter").datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch (error) {
date = NULL;
}
return date;
}
$('.to_icon').click(function() {
$('#to_filter').datepicker("show");
});
$('.from_icon').click(function() {
$('#from_filter').datepicker("show");
});
});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-4">
<span>From</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'>
<span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span>
</div>
</div>
<div class="col-md-4">
<span>To</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'>
<span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span>
</div>
</div>
答
有一种方法可以做到这一点的文本框，首先创建一个按钮，并创建一个无形的标签。然后点击按钮打开日期时间picke，就像那样;
HTML
<button id = "btn1">Click Here</button>
<div id = "divDatePicker"></div>
JS
$("#divDatePicker").hide();
$("#btn1").click(function(){
$("#divDatePicker").toggle();
});
$("#divDatePicker").datepicker({
onSelect: function(value, date) {
//chose date
$("#divDatePicker").hide();
}
});
这对你一个简单的代码，我想这是帮助你。
答
这里是工作代码只是粘贴和运行。
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="col-md-4">
<span>From</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2017" class="form_date" id='from_filter'>
<span class="glyphicon glyphicon-calendar from_icon " style="padding-right: 6px">icon</span>
</div>
</div>
<div class="col-md-4">
<span>To</span>
<div class="replay-in">
<input type="text" name="" value="" placeholder="04/03/2018" class='to_filter' id='to_filter'>
<span class="glyphicon glyphicon-calendar to_icon" style="padding-right: 6px">icon</span>
</div>
</div>
<script>
$(function() {
//today=new Date(1000*today);
var dateFormat = "mm/dd/yy",
from = $("#from_filter")
.datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
to.datepicker("option", "minDate", getDate(this));
}),
to = $("#to_filter").datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1
})
.on("change", function() {
from.datepicker("option", "maxDate", getDate(this));
});
function getDate(element) {
var date;
try {
date = $.datepicker.parseDate(dateFormat, element.value);
} catch(error) {
date = NULL;
}
return date;
}
});
$('.from_icon').click(function(){
$("#from_filter").datepicker("show");
});
$('.to_icon').click(function(){
$("#to_filter").datepicker("show");
});
</script>
+0
请在发布你的帖子前检查其他答案，并尽量避免发布相同的答案，否则你将得到赞成 –
'我想要'是您的要求。这里有什么问题？你是否面临任何错误？你尝试过哪些调试步骤？请用更多信息更新问题。 –