如何在Svelte框架中实现Bootstrap DateTimepicker功能？

一、迁移原 Bootstrap jQuery DateTimepicker 到 Svelte #

原代码依赖 jQuery 和 tempusdominus-bootstrap-4，迁移到 Svelte 时需处理组件生命周期，确保挂载后初始化插件、销毁时清理实例：

1. 安装依赖 #

npm install jquery tempusdominus-bootstrap-4 bootstrap

2. 编写 Svelte 组件 (DateTimePicker.svelte) #

<script>
  import { onMount, onDestroy } from 'svelte';
  import 'bootstrap/dist/css/bootstrap.min.css';
  import 'tempusdominus-bootstrap-4/build/css/tempusdominus-bootstrap-4.min.css';
  import $ from 'jquery';
  import 'tempusdominus-bootstrap-4';

  let pickerContainer;

  onMount(() => {
    $(pickerContainer).datetimepicker();
  });

  onDestroy(() => {
    $(pickerContainer).datetimepicker('destroy');
  });
</script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' bind:this={pickerContainer}>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

注意：若项目已全局引入 Bootstrap 和 jQuery，可省略对应 import 语句。

二、无需 jQuery 的替代实现方案 #

若不想依赖 jQuery，可选择轻量化的 Svelte 专属日期时间选择器库，或原生 HTML 控件：

1. 使用 svelte-flatpickr #

flatpickr 是轻量无依赖的日期时间选择器，可配置出与示例图一致的弹窗效果：

安装依赖

npm install svelte-flatpickr flatpickr

组件代码

<script>
  import Flatpickr from 'svelte-flatpickr';
  import 'flatpickr/dist/flatpickr.min.css';
  import 'bootstrap/dist/css/bootstrap.min.css';

  let selectedDateTime;
</script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <Flatpickr
          bind:value={selectedDateTime}
          class="form-control"
          opts={{
            enableTime: true,
            dateFormat: "Y-m-d H:i",
            wrap: true,
            altInputClass: "form-control"
          }}
        >
          <div class="input-group">
            <input type="text" placeholder="选择日期时间" />
            <span class="input-group-addon">
              <span class="glyphicon glyphicon-calendar"></span>
            </span>
          </div>
        </Flatpickr>
      </div>
    </div>
  </div>
</div>

2. 使用原生 HTML5 datetime-local 控件 #

如果不需要复杂自定义样式，原生控件是最简单的方案（样式可通过 Bootstrap 类调整）：

<script>
  import 'bootstrap/dist/css/bootstrap.min.css';
</script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <input type="datetime-local" class="form-control" />
      </div>
    </div>
  </div>
</div>

3. 使用 svelte-datepicker #

Svelte 专属日期选择库，支持时间选择，样式可自定义：

npm install svelte-datepicker

组件代码

<script>
  import Datepicker from 'svelte-datepicker';
  import 'bootstrap/dist/css/bootstrap.min.css';

  let selectedDate;
</script>

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <Datepicker
          bind:selected={selectedDate}
          enableTime
          inputClasses="form-control"
        />
      </div>
    </div>
  </div>
</div>

效果参考 #

你提供的时间选择器效果如下：

上述方案中，tempusdominus-bootstrap-4 和 svelte-flatpickr 均可配置出与该图一致的弹窗式时间选择效果。

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