[英]Cannot transfer value from JQuery date range picker to input fields
我正在从以下示例站点使用基本的JQuery日期范围选择器: http : //www.daterangepicker.com/ 。 我正在寻找一种从日期范围选择器中获取提供的输出,并在选择日期后将其放置到两个输入字段中的方法。 现在,我只想证明自己可以在新的输入字段中显示每个值。 将来,我将解析该字符串以提供两个单独的日期,但是现在请忽略它。
<input id="dateRangePicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015" /><br />
<input id="selectedDatePickerField" /><br />
<input id="selectedDatePickerField2" />
到目前为止,这是我尝试过的:
脚本:
<script type="text/javascript">
//<![CDATA[
$(function () {
$('input[name="daterange"]').daterangepicker();
});
});
$(document).ready(function () {
$('#dateRangePicker').on('change', function () {
$('#selectedDatePickerField').val(this.value);
$('#selectedDatePickerField2').val(this.value);
}).change();
$('#dateRangePicker').on('daterangepicker', function (e, ui) {
$('#selectedDatePickerField').val(ui.item.value);
$('#selectedDatePickerField2').val(ui.item.value);
});
});
//]]>
</script>
如何将值从日期范围选择器移动到每个输入字段?
您需要使用on('apply.daterangepicker')获取日期选择器的startDate和endDate值到输入字段。
$('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) {
$('#selectedDatePickerField').val(picker.startDate.format('DD/MM/YYYY'));
$('#selectedDatePickerField2').val(picker.endDate.format('DD/MM/YYYY'));
});
片段
//<![CDATA[ $(function () { $('input[name="daterange"]').daterangepicker(); }); $(document).ready(function () { $('#dateRangePicker').on('change', function () { $('#selectedDatePickerField').val(this.value); $('#selectedDatePickerField2').val(this.value); }).change(); $('#dateRangePicker').on('daterangepicker', function (e, ui) { $('#selectedDatePickerField').val(ui.item.value); $('#selectedDatePickerField2').val(ui.item.value); }); }); $('input[name="daterange"]').on('apply.daterangepicker', function(ev, picker) { $('#selectedDatePickerField').val(picker.startDate.format('DD/MM/YYYY')); $('#selectedDatePickerField2').val(picker.endDate.format('DD/MM/YYYY')); });
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> <!-- Include Date Range Picker --> <script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> <input id="dateRangePicker" type="text" name="daterange" value="01/01/2015 - 01/31/2015" /><br /> <input id="selectedDatePickerField" /><br /> <input id="selectedDatePickerField2" />
这是有效的jsfiddle: https ://jsfiddle.net/derfekse/
最好的方法是使用daterangepicker
onselect函数 。 请遵循以下代码::
的HTML
<input id="dateRangePicker" type="text" name="daterange" value="" /><br />
<input id="selectedDatePickerField" /><br />
<input id="selectedDatePickerField2" />
jQuery的
$(document).ready(function (e) {
$('#dateRangePicker').daterangepicker({}, function(start, end, label) {
$('#selectedDatePickerField').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
$('#selectedDatePickerField2').val(start.format('MM/DD/YYYY') + ' - ' + end.format('MM/DD/YYYY'));
});
});
该组件具有两个属性来报告所选的startDate
和endDate
。 生成更改事件后,您需要阅读那些属性。 要访问这些属性,请使用以下语法:
var drp = $('#daterange')。data('daterangepicker')。xxxxxx;
其中xxxx是您要调用的方法(可以是方法或属性)
日期范围选择器文档:
http://www.daterangepicker.com/#options
$('input[name="daterange"]').daterangepicker();
$('#dateRangePicker').on('change', function ()
{
$('#selectedDatePickerField').val($('#dateRangePicker').data('daterangepicker').startDate);
$('#selectedDatePickerField2').val($('#dateRangePicker').data('daterangepicker').endDate);
});
$('#dateRangePicker').on('daterangepicker', function (e, ui)
{
$('#selectedDatePickerField').val(ui.item.value);
$('#selectedDatePickerField2').val(ui.item.value);
});
如果要在初始化后设置开始日期,可以使用:
//change the selected date range of that picker
$('#daterange').data('daterangepicker').setStartDate('03/01/2014');
$('#daterange').data('daterangepicker').setEndDate('03/31/2014');
最后是一个小提琴,显示了所有过程如何结合在一起:
https://jsfiddle.net/HappyiPhone/oj8yhnLo/1/
希望能帮助到你!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.