js中传入指定日期转换为时间戳,可以使用原生javascript的Date对象进行格式化操作或第三方js库如moment.js进行格式化输出。以下是这2种方法的具体实现:
1、使用原生javascript的Date对象,进行格式化
(1)将日期字符串转换为Date类型的对象。
let d = new Date('2018-01-01')
(2)转换为时间戳。
let t = d.getTime(d) // 方法1
let t = d.valueOf(d) // 方法2
let t = d.parse(d) // 方法3
2、第三方js库moment.js进行格式化
(1)在html中引入moment.js,添加以下script标签:
<script src="https://cdn.bootcss.com/moment.js/2.20.1/moment.js"></script>
(2)将日期转换为时间戳
参数格式为:YYYY-MM-DD HH:mm:ss 或 YYYY-MM-DD
moment('2018-01-01').valueOf()
扩展资料:
1、js将当前日期转换为时间戳
let timeStamp = new Date().getTime()
2、js将时间戳转换为日期
let d = new Date(timestamp * 1000)// 时间戳为10位需*1000,时间戳为13位的话不需乘1000
let yyyy = d.getFullYear() + '-'
let MM = (d.getMonth()+1 <10 ? '0'+(d.getMonth()+1) : d.getMonth()+1) + '-'
let dd = d.getDate() + ' '
let HH = d.getHours() + ':'
let mm = d.getMinutes() + ':'
let ss = d.getSeconds()
return yyyy + MM + dd + HH + mm + ss
bootstrap为我们提供了一款十分实用的日期控件,但相对于初学者来说,这款日期控件的用法要比按钮等css样式难上许多。这里小编就为大家介绍一下这款功能强大的日期控件的用法。工具/原料
bootstrap
Dreamweaver
方法/步骤
首先,我们将这款日期控件下载下来。百度bootstrap日期控件即可。
将下载好的日期控件的css、js引入自己的文件中。
在这里需要引入的文件有:
bootstrap.min.css(含有bootstrap 所有css)
bootstrap-datetimepicker.min.css(重要,这就是日期控件所需的样式表)
jquery-1.8.3.min.js(其他版本的jquery也可以)
bootstrap.min.js(含有bootstrap 所有js)
bootstrap-datetimepicker.js(重要,这就是日期控件所需的js)
locales/bootstrap-datetimepicker.fr.js(重要,这里是日期控件初始值)
将所有文件引入完成后,就开始设置日期控件吧。
这是第一种样式。当然,你可以只要input就可以了。
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-th"></i></span>
</div>
第二种样式,带有重置按钮(用于清空输入框)的组件模版:
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012">
<span class="add-on"><i class="icon-remove"></i></span>
<span class="add-on"><i class="icon-th"></i></span>
</div>
i的作用就是两个小图标,若不要可以删去。
最简洁的样式,只有input,点击弹出选择器:
<input class="span2" size="16" type="text" value="12-02-2012">
当然,只有这些是无法弹出日期选择器的,还需要js来激活。
这里是最重要的一步,js激活日期选择器!
<script type="text/javascript">
$('你的input的class或id').datetimepicker({
//一堆参数
})
</script>
将这个写在你的页面内,至于参数,一会再介绍。这样就可以激活你的日期选择器了,点击input便可以弹出选择器。
日期选择器的参数设置:
format
weekStart
startDate
endDate
daysOfWeekDisabled
autoclose
startView
minView
maxView
todayBtn
todayHighlight
keyboardNavigation
language
forceParse
minuteStep
pickerPosition
viewSelect
showMeridian
initialDate
这些属性不用全部设置,但有些是必须的,比如format。
这里是小编所使用的一款日期选择器的初始化设置:
$('.date').datetimepicker({
format:yyyy-mm-dd,
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
})
bootstrap日期选择器的属性非常多,这也给了用户较大的选择性,快去设置你自己的DIY日期选择器吧!