type=“datetime-local“ 介绍与使用

1.如何获取 input type=“datetime-local” 的值

耐心看完，一定会有收获。有两个 type=“datetime-local” 时间相减的案例

1.1先说获取输入框中的值
type=“datetime-local” 的时间选择器要在年月日，以及小时和分钟都选完了之后，才可以获取到数据。笔者最初只选择日期，所以获得的数据一直为空，后来把这个dom对象打印出来才发现。
我们一起看一下，当时间没有输入全时候，会这样：


很明显，我们只有日期，时间一定要写！！！ 才可以获取到数据。
1.2接下来就是如何让获取input中的值。
其实就用最简单的 jq 的 ID 选择器 就可以了 ，这个相信大家都懂。就是获取input中的value。方式方法有很多。

   var beginTime = $("#inTime").val();   // inTime 是你input的id的值

这是我们控制台得到的时间。

2020-02-06T15:20

而使用的触发类型呢 ？ 我建议使用失焦事件 如果是onchange，改变的太过频繁 。意思就是当我i们选好了时间，离开那个输入框时，获取到我们已经填写好的数据，这也很符合我下面那个案例的场景
代码如下：

<input type="datetime-local"  id="inTime" class="form-control" onblur="selectTime()" />

2.让 两个 type 为 datetime-local 输入框获取数据 相减得到 天数

2.1这里我用最朴实的例子来给大家展示。我们要求如图两个输入框的时间差，且向上取整（通俗的说，就是变为相近的最大的整数 2.1 天 就会转为 3天。当然，这样的计算是因为我的业务逻辑，计算住房天数，大家可以根据自己的实际需求决定需不需要对时间进行额外处理）

HTML

  入住时间：<input type="datetime-local"  id="inTime" class="form-control" onchange="selectTime()" />
  离开时间：<input type="datetime-local"  id="outTime" class="form-control" onblur="selectTime()"/>

Js

 function selectTime() {
          var beginTime = $("#inTime").val();
          var endTime = $("#outTime").val();
          var date1 = new Date(beginTime)
          var date2 = new Date(endTime)
          console.log(Math.ceil((date2 - date1) / (86400 * 1000)) + "天")
 }

2.2效果展示

2.3分析
由于我们直接从输入框中获得的val 数据 格式 为： 2020-02-06T15:20
无法直接相减，所以我们呢将获取的数据传入到Date()对象中，让Date()对象解析我们获取的时间，然后两个Date()相减，即可获得到时间差（豪秒），注意单位是毫秒！所以获取到的时间差 除以 840001000 就可以获得到相差的天数了。（一天有：2460601000）毫秒

3.谢谢你的阅读，如果对你有用的话，欢迎评论哦。