Bootstrap Datepicker - 从内联/嵌入式版本中选择日期
Posted
技术标签:
【中文标题】Bootstrap Datepicker - 从内联/嵌入式版本中选择日期【英文标题】:Bootstrap Datepicker - selecting date from inline/embedded version 【发布时间】:2013-10-06 09:48:21 【问题描述】:有人可以解释如何从 Eternicode 的扩展 Bootstrape Datepicker 的内联/嵌入式版本中捕获选定的日期 - http://eternicode.github.io/bootstrap-datepicker/
<form class="form-date" role="form" action="/'.$ref.'/edit" method="get">
<div class="form-group" id="datepickid">
<div></div>
<input type="hidden" name="dt_due" id="dt_due">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
...
$('#datepickid div').datepicker(
startDate: "+1d",
todayHighlight: true
);
我确定很清楚,我希望它在所选日期更改时写入隐藏输入。
我确定我遗漏了一些明显的东西,但是其他示例也写入了它所链接的输入,但似乎没有明显的方式从内联版本输出数据。
感谢所有帮助。
【问题讨论】:
【参考方案1】:没关系,答案是通过 Google 群组给出的。
我必须添加 .on(ChangeDate)...
$('#datepickid div').datepicker(
startDate: "+1d",
todayHighlight: true
).on('changeDate', function(e)
$('#dt_due').val(e.format('dd/mm/yyyy'))
);
【讨论】:
【参考方案2】:您也可以使用它来获取所有日期(对于多日期)
$('#datepickid div').datepicker(
startDate: "+1d",
todayHighlight: true
).on('changeDate', function(e)
$('#dt_due').val(
$('#datepickid div').datepicker('getFormattedDate') // get the formatted date from the datepicker (using the format you instantiated it with)
);
);
【讨论】:
【参考方案3】:最近我在一个项目中工作,该项目需要使用 datepicker 实现一些页面以提高用户可用性,更具体的是 Bootstrap 3 DatePicker,我认为这是我在互联网上找到的最好的框架。 在我开发的时候,我发现了你描述的同样的问题,但是我不知道你使用的是什么具体的框架,我正在描述我的解决方案和我的代码。 最初,有问题的框架是Bootstrap 3 Datepicker。 此答案可能对某些使用其他框架的用户没有用,与此不同。
我的 html 代码:
<div class="form-group form-group-md" align="left">
<label for="inputDataInicial" class="col-form-label">Data Inicial:</label>
<div class="inputDataInicial" name="inputDataInicial" id="inputDataInicial"></div>
</div>
初始化日期选择器:
$("#inputDataInicial").datetimepicker(
format: 'DD/MM/YYYY',
locale: 'pt-br',
useCurrent: true,
inline: true,
sideBySide: true
).on('dp.change', function(e)
$('.inputDataInicial').val(e.date.format('YYYYMMDD'));
);
接下来,我使用 moment 框架设置默认日期 - Bootstrap 3 Datepicker 使用它:
var currentDate = moment().format('YYYYMMDD');
$('.inputDataInicial').val(currentDate);
$('.inputDataFinal').val(currentDate);
最后,我实现了一个简单的按钮来获取选定的日期:
$(".btn_relatorio_amap_gerar").unbind("click").on("click",function(e)
var data_inicial = $(".inputDataInicial").val() + ' 00:00:00';
var data_final = $(".inputDataFinal").val() + ' 23:59:59';
alert(data_inicial + ' - ' + data_final);
);
结果:
希望对你有帮助。
【讨论】:
【参考方案4】:这对我有用,也是最简单的方法
$('#datetimepicker').datepicker(
format: 'mm/dd/yyyy',
startDate: 'now',
useCurrent: true,
todayBtn: "linked",
todayHighlight: true,
inline: true,
sideBySide: true
);
<div id="datetimepicker">
<input type="hidden" name="delivery_date" id="delivery_date" value="">
</div>
【讨论】:
以上是关于Bootstrap Datepicker - 从内联/嵌入式版本中选择日期的主要内容,如果未能解决你的问题,请参考以下文章
如何设置 bootstrap-datepicker-rails?
BootStrap DatePicker NoConflict