js中怎么在input框加日历选择以及在日期选择下加时间设置代码

以下是使用jQuery UI Datepicker和时间选择器插件来为输入框添加日期和时间选择器的代码：

HTML代码：

<label for="datepicker">选择日期：</label>
<input type="text" id="datepicker">

<label for="timepicker">选择时间：</label>
<input type="text" id="timepicker">

JavaScript/jQuery代码：

$(document).ready(function() {
  // 初始化日期选择器
  $("#datepicker").datepicker();

  // 初始化时间选择器
  $("#timepicker").timepicker({
    timeFormat: 'HH:mm:ss',
    interval: 30,
    minTime: '00:00',
    maxTime: '23:59',
    defaultTime: '12:00',
    startTime: '00:00',
    dynamic: false,
    dropdown: true,
    scrollbar: true
  });
});

这里使用了jQuery和jQuery UI库以及一个开源的时间选择器插件 timepicker。您需要在HTML文件中引入这些库的CDN链接或下载并引入这些库的本地文件。

相关问题

js中怎么在input框旁加日历选择以及时间设置

可以使用Bootstrap Datetimepicker库来实现在input框旁加日历选择以及时间设置。

首先，需要在页面引入Bootstrap Datetimepicker库的必要头文件，具体可以参考我之前回答的问题。

接着，在需要加入日历选择和时间设置的input框的HTML代码中，加入以下代码：

<div class='input-group date' id='datetimepicker'>
    <input type='text' class="form-control" />
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

其中，class为`input-group date`的div标签代表整个日期时间选择器，class为`form-control`的input标签为输入框，class为`input-group-addon`的span标签代表日历图标。

最后，在页面的JavaScript代码中，使用以下代码初始化日期时间选择器：

$(function () {
    $('#datetimepicker').datetimepicker({
        format: 'YYYY-MM-DD HH:mm:ss'
    });
});

其中，`#datetimepicker`为选择器，代表初始化id为`datetimepicker`的日期时间选择器；`format`为日期时间的显示格式，可以根据需求进行修改。

这样就可以在input框旁加入日历选择和时间设置了。

js中怎么在input框旁加日历选择以及时间

在JavaScript中，可以使用第三方库或自己编写代码来实现在input框旁加日历选择和时间选择功能。其中比较常用的库有jQuery UI和Bootstrap Datepicker。

如果使用jQuery UI，可以在HTML代码中添加一个input元素和一个空的div元素，然后在JavaScript代码中调用datetimepicker()方法将日期时间选择器绑定到input元素上，同时将日期时间选择器的HTML代码插入到空的div元素中。示例代码如下：

HTML代码：

<input type="text" id="datetimepicker">
<div id="datetimepicker-container"></div>

JavaScript代码：

$(function() {
  $("#datetimepicker").datetimepicker({
    dateFormat: "yy-mm-dd",
    timeFormat: "HH:mm",
    showOn: "button",
    buttonImage: "calendar.png",
    buttonImageOnly: true,
    buttonText: "Select date and time",
    onSelect: function(dateText) {
      // 处理选择日期时间后的逻辑
    }
  }).datetimepicker("widget").appendTo("#datetimepicker-container");
});

如果使用Bootstrap Datepicker，可以在HTML代码中添加一个input元素，然后在JavaScript代码中调用datetimepicker()方法将日期时间选择器绑定到input元素上。示例代码如下：

HTML代码：

<input type="text" id="datetimepicker">

JavaScript代码：

$(function() {
  $("#datetimepicker").datetimepicker({
    format: "yyyy-mm-dd hh:ii",
    autoclose: true,
    todayBtn: true,
    todayHighlight: true
  });
});

以上是两个库的基本使用方法，具体实现还需要根据具体需求进行调整。