Bootstrap Datepicker - 从内联/嵌入版本中选择日期

Question

有人可以解释如何从内联/嵌入版本的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
});

我确信很清楚，我希望它在所选日期发生变化时写入隐藏输入。

我确定我遗漏了一些显而易见的东西，但其他示例也写入了输入它也是链接的，但似乎没有明显的方法从内联版本输出数据。

所有帮助表示赞赏。

Answer 1

没关系，答案是通过谷歌集团提供的。

我必须添加.on（ChangeDate）......

$('#datepickid div').datepicker({
    startDate: "+1d",
    todayHighlight: true
    }).on('changeDate', function(e){
      $('#dt_due').val(e.format('dd/mm/yyyy'))
    });

Answer 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)
  );
});

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

初始化datepicker：

$("#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);
});

结果：

我希望能帮助你。