<think>
我们使用HTML5的datetime-local输入类型来创建日期和时间选择器。然后，通过
jQuery获取值
并转换为时间戳。
注意：datetime-local输入返回的是本地日期时间字符串（没有时区信息），格式为"YYYY-MM-DDTHH:mm"。
步骤：
1. 创建
input元素，类型为datetime-local。
2. 使用
jQuery获取该
input的值。
3. 将
获取的字符串转换为Date对象。
4. 使用Date对象的getTime()方法得到时间戳（毫秒）。
注意：由于datetime-local返回的是本地时间，所以转换后的时间戳也是本地时间的时间戳（UTC+时区偏移）。如果需要UTC时间戳，可以使用Date.UTC方法。
我们还可以使用引用[2]中的日期格式化函数来验证，但这里我们主要关注时间戳。
示例代码：
HTML部分：
```html
<label for="datetimePicker">选择日期和时间：</label>
<
input type="datetime-local" id="datetimePicker">
<button id="getTimestamp">
获取时间戳</button>
```
jQuery部分：
```javascript
$(document).ready(function() {
$('#getTimestamp').click(function() {
//
获取datetime-local输入的值，格式如："2023-09-04T09:00"
var datetimeString = $('#datetimePicker').val();
if (!datetimeString) {
alert('请选择日期和时间！');
return;
}
// 将字符串转换为Date对象
var selectedDate = new Date(datetimeString);
//
获取时间戳（毫秒）
var timestamp = selectedDate.getTime();
console.log('时间戳（毫秒）:', timestamp);
// 如果需要秒级时间戳，则除以1000
并取整
var timestampInSeconds = Math.floor(timestamp / 1000);
console.log('时间戳（秒）:', timestampInSeconds);
});
});
```
注意：datetime-local输入类型在Safari和旧版Edge中可能不支持，但现代浏览器基本都支持。
如果我们需要在页面上显示格式化后的日期时间，可以使用引用[2]中的格式化函数，但这里我们不需要显示，只需要时间戳。
另外，关于时区问题：datetime-local输入返回的值是不带时区信息的本地时间，所以new Date()会按照本地时区解析。因此，得到的时间戳是自UTC时间1970年1月1日00:00:00以来的毫秒数，但这里本地时间与UTC时间的偏移取决于用户所在的时区。
例如，如果用户选择的是北京时间2023-09-04 09:00，那么转换为时间戳后，这个时间戳表示的是UTC时间2023-09-04 01:00:00（因为北京时间是UTC+8）？不对，实际上，时间戳是固定的，它表示的是UTC时间的某个点。当我们用new Date('2023-09-04T09:00')创建一个日期对象时，它会被解析为本地时间（假设用户在北京，那么就是UTC+8），然后getTime()返回的是对应的UTC时间戳（即从这个本地时间减去8小时得到的UTC时间）。所以时间戳表示的是UTC时间，而不是本地时间。
因此，上述代码得到的时间戳是正确的，它表示的是用户选择的本地时间所对应的UTC时间的时间戳。
如果我们想得到用户选择的本地时间所对应的UTC时间的时间戳，那么上面的方法就是正确的。
如果我们想得到用户选择的本地时间所对应的本地时间的时间戳（即不考虑时区，把用户输入的时间当作UTC时间），那么我们需要使用Date.UTC方法。但是，通常用户输入的是本地时间，我们希望的是这个本地时间点（也就是在用户所在时区的实际时间点）对应的时间戳，所以上面的方法才是正确的。
总结：使用new Date(datetimeString)来解析datetime-local的值，然后使用getTime()
获取时间戳，这个时间戳就是标准的时间戳（UTC时间1970年1月1日以来的毫秒数），它对应的是用户选择的本地时间。
生成相关问题：
1. 如何将时间戳转换为本地日期时间字符串？
2. 如何处理不同浏览器对datetime-local输入的兼容性问题？
3. 如何设置datetime-local输入的最小和最大日期时间？
4. 如何将时间戳存储到数据库（如MySQL的DATETIME或TIMESTAMP类型）？
5. 在Vue或React中如何使用datetime-local输入
并获取时间戳？
注意：在引用中，引用[1]提到HTML5规范只规定输入类型，没有规定样式。引用[2]提供了一个日期格式化的函数，但我们这里不需要。引用[3]提到了数据库中的DATETIME字段存储视频的拍摄时间，这与我们的时间戳存储类似。
</think>
### 使用
jQuery获取`datetime-local`时间戳的方法
#### 一、HTML创建日期时间选择器
```html
<label>选择日期时间:</label>
<
input type="datetime-local" id="datetimePicker">
<button id="getTimestamp">
获取时间戳</button>
```
- `datetime-local`输入类型支持日期和时间选择
- 现代浏览器自动生成日历和时间控件[^1]
#### 二、
jQuery获取时间戳的核心代码
```javascript
$('#getTimestamp').click(function() {
//
获取datetime-local的值（格式: YYYY-MM-DDTHH:MM）
const datetimeString = $('#datetimePicker').val();
if(!datetimeString) {
alert('请先选择日期时间');
return;
}
// 转换为时间戳（毫秒）
const timestamp = new Date(datetimeString).getTime();
// 转换为秒级时间戳（可选）
const timestampInSeconds = Math.floor(timestamp / 1000);
console.log("原始值:", datetimeString);
console.log("时间戳(毫秒):", timestamp);
console.log("时间戳(秒):", timestampInSeconds);
});
```
#### 三、关键原理说明
1. **时间格式解析**
`datetime-local`返回ISO 8601格式字符串：`YYYY-MM-DDTHH:mm`
```
2023-09-05T14:30
↑ ↑ ↑ ↑ ↑
年 月 日 时 分
```
2. **时间戳转换**
```mermaid
graph LR
A[datetime-local值] --> B[new Date()]
B --> C[Date对象]
C --> D[getTime()方法]
D --> E[时间戳]
```
3. **时区处理**
- `new Date()`会自动解析为本地时区时间
-
获取UTC时间戳需额外处理：
```javascript
const utcTimestamp = Date.UTC(
year, monthIndex, day, hours, minutes
);
```
#### 四、日期格式化扩展
使用引用[2]的格式化函数显示时间：
```javascript
// 添加原型方法
Date.prototype.format = function(fmt) {
/* 引用[2]的格式化代码 */
};
// 使用示例
const date = new Date(timestamp);
console.log(date.format('yyyy-MM-dd hh:mm:ss'));
```
#### 五、常见问题解决方案
1. **默认值设置**
```javascript
// 设置
当前时间为默认值
const now = new Date();
const isoString = new Date(now.getTime() - now.getTimezoneOffset()*60000)
.toISOString()
.slice(0, 16);
$('#datetimePicker').val(isoString);
```
2. **数据库存储**
- 时间戳适合存储为数据库的`BIGINT`类型
- 如需`DATETIME`类型[^3]，转换方法：
```javascript
const mysqlDateTime = new Date(timestamp)
.toISOString()
.slice(0, 19)
.replace('T', ' ');
```
3. **浏览器兼容性**
```javascript
// 检测浏览器支持性
if(!Modernizr.
inputtypes['datetime-local']) {
// 使用
jQuery插件代替
$('#datetimePicker').datetimepicker();
}
```
```mermaid
graph TD
A[用户选择时间] --> B[
jQuery获取值]
B --> C[转换为Date对象]
C --> D[调用getTime方法]
D --> E[获得时间戳]
E --> F[存储到数据库]
E --> G[显示格式化时间]
```
#### 六、完整示例
```html
<!DOCTYPE html>
<html>
<head>
<title>时间戳
获取示例</title>
<script src="https://code.
jquery.com/
jquery-3.6.0.min.js"></script>
</head>
<body>
<
input type="datetime-local" id="datetimePicker">
<button id="getTimestamp">
获取时间戳</button>
<div id="result"></div>
<script>
$(document).ready(function() {
// 设置默认值
const now = new Date();
const isoString = new Date(now.getTime() - now.getTimezoneOffset()*60000)
.toISOString().slice(0,16);
$('#datetimePicker').val(isoString);
//
获取时间戳
$('#getTimestamp').click(function() {
const datetimeString = $('#datetimePicker').val();
const timestamp = new Date(datetimeString).getTime();
$('#result').html(`
<p>原始值: ${datetimeString}</p>
<p>时间戳: ${timestamp}ms</p>
<p>UTC时间: ${new Date(timestamp).toUTCString()}</p>
`);
});
});
</script>
</body>
</html>
```
---
文章介绍了如何利用JavaScript和jQuery，当用户点击按钮时，获取输入框中光标的位置并在该位置插入特定的文字或字符。提供的代码示例展示了实现这一功能的方法。
扫一扫
8584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
