如何让Intimidatetime页面加载即显示并始终展示（无需文本框）

当然可以做到！Intimidatetime组件本身就支持inline（内嵌）模式，完全不需要绑定文本框就能让日期时间选择器始终显示在页面上，正好符合你要的display:block持续展示效果。

具体实现步骤： #

1. 确保已正确引入Intimidatetime的CSS和JS文件（以及依赖的jQuery）
2. 创建一个普通的容器元素（比如<div>）作为选择器的载体
3. 初始化组件时开启inline: true配置项

完整代码示例： #

<html>
<head>
  <!-- 引入Intimidatetime样式文件 -->
  <link rel="stylesheet" href="path/to/intimidatetime.css">
  <!-- 引入依赖的jQuery -->
  <script src="path/to/jquery.min.js"></script>
  <!-- 引入Intimidatetime脚本文件 -->
  <script src="path/to/intimidatetime.js"></script>
</head>
<body>
  <!-- 专门用来承载内嵌选择器的容器 -->
  <div id="inline-datetime-container"></div>

  <script>
    $(document).ready(function() {
      // 初始化inline模式的日期时间选择器
      $('#inline-datetime-container').intimidatetime({
        inline: true, // 核心配置：启用内嵌模式，选择器始终显示
        format: 'Y-m-d H:i:s', // 自定义日期时间格式，可按需调整
        date: '2024-05-20 15:45:00', // 可选：设置默认选中的日期时间
        // 可添加其他配置，比如minDate、maxDate、lang等
      });
    });
  </script>
</body>
</html>

额外说明： #

• 启用inline: true后，选择器会直接渲染在你指定的容器内，默认就是持续显示的状态，不需要通过聚焦文本框触发
• 如果需要获取用户选中的日期时间，可以调用组件的getDate方法：

  const selectedDatetime = $('#inline-datetime-container').intimidatetime('getDate');
  console.log(selectedDatetime);
  

• 若要动态设置选中的日期时间，可使用setDate方法：

  $('#inline-datetime-container').intimidatetime('setDate', '2024-06-01 09:00:00');
  

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