如何为Bootstrap DateTimePicker赋值并读取值（Python后端场景）

我来帮你搞定这个问题——其实Bootstrap DateTimePicker是绑定在<input>元素上的，不管是从Python后端拿初始值，还是选完日期同步到input的value，都有明确的处理方式，咱们一步步来：

一、从Python后端取初始值，让Picker显示对应时间 #

首先得保证后端传过来的日期时间格式和Picker的格式匹配（默认是YYYY-MM-DD HH:mm:ss，你也可以自己配置）。

1. 模板渲染时直接赋值（适合后端直接渲染页面的场景） #

如果你的Python后端用的是Jinja2这类模板引擎，直接把后端的日期值填充到input的value属性里，再初始化Picker就行：

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <!-- 这里用后端变量填充value，比如Jinja2的写法 -->
          <input type='text' class="form-control" value="{{ backend_datetime }}" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
// 初始化Picker，格式要和后端传的一致
$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss'
    });
});
</script>

初始化后，Picker会自动读取input的value并显示对应的时间。

2. 异步获取后端值后动态赋值（比如AJAX请求） #

如果是通过AJAX从后端异步拿数据，就用Picker的date()方法来设置，同时同步到input的value：

// 假设AJAX请求拿到了后端的时间值，比如response.data.datetime
const backendDatetime = '2024-05-20 14:30:00';
// 给Picker设置时间
$('#datetimepicker1').data("DateTimePicker").date(backendDatetime);
// 同步到input的value属性
$('#datetimepicker1 input').val(backendDatetime);

二、选完日期后，同步值到input的value #

其实默认情况下，Picker选完时间会自动把值填到绑定的input的value里，但如果你的场景没生效，就用dp.change事件手动同步：

$(function () {
    $('#datetimepicker1').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss'
    }).on('dp.change', function(e) {
        // 把选择的时间转成字符串格式
        const selectedDatetime = e.date.format('YYYY-MM-DD HH:mm:ss');
        // 同步到input的value
        $(this).find('input').val(selectedDatetime);
        // 这里也可以直接把selectedDatetime传给后端，比如存到表单里提交
    });
});

三、读取Picker当前选中的值 #

有两种简单的方式：

1. 直接读input的value：

const currentValue = $('#datetimepicker1 input').val();

2. 通过Picker的API获取（能拿到moment对象，方便做日期处理）：

const pickerInstance = $('#datetimepicker1').data("DateTimePicker");
const selectedDate = pickerInstance.date(); // 返回moment日期对象
// 转成你需要的字符串格式
const selectedDatetimeStr = selectedDate.format('YYYY-MM-DD HH:mm:ss');

小提醒 #

• 别忘了引入依赖：jQuery、Bootstrap的CSS和JS、Moment.js（DateTimePicker依赖它处理日期），还有DateTimePicker自己的CSS和JS，少一个都可能出问题。
• 后端传的时间格式一定要和Picker配置的format一致，不然Picker解析不了，就显示不出来啦。

内容的提问来源于stack exchange，提问作者alexia