给小莹莹的bootstrap时间控件js

2023-03-05 16:54:02JavaScript017

给小莹莹的bootstrap时间控件js,第1张

首先，我们将这款日期控件下载下来。百度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>

第二种样式，带有重置按钮（用于清空输入框）的组件模版：

</div>

i的作用就是两个小图标，若不要可以删去。

最简洁的样式，只有input,点击弹出选择器：

当然，只有这些是无法弹出日期选择器的，还需要js来激活。

这里是最重要的一步，js激活日期选择器！

$('你的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日期选择器吧！

<%@page contentType="text/html" %>

<%@page pageEncoding="UTF-8" %>

<%@ page import="java.util.Date" %>

<html>

<!--

function disptime( )

{

var time = new Date( )//获得当前时间

var hour = time.getHours( )//获得小时、分钟、秒

var minute = time.getMinutes( )

var second = time.getSeconds( )

var apm="AM"//默认显示上午: AM

if (hour>12) //按12小时制显示

{

hour=hour-12

apm="PM"

}

if (minute <10) //如果分钟只有1位，补0显示

minute="0"+minute

if (second <10) //如果秒数只有1位，补0显示

second="0"+second

/*设置文本框的内容为当前时间*/

document.myform.myclock.value =hour+":"+minute+":"+second+" "+apm

/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/

var myTime = setTimeout("disptime()",1000)

}

//-->

</SCRIPT>

</body></html>

//下面的代码段如果你页面里有，可以去掉

var ie =navigator.appName=="Microsoft Internet Explorer"?true:false

function $(objID){

return document.getElementById(objID)

}

</script>

</head>

<body>

var controlid = null

var currdate = null

var startdate = null

var enddate = null

var yy = null

var mm = null

var hh = null

var ii = null

var currday = null

var addtime = false

var today = new Date()

var lastcheckedyear = false

var lastcheckedmonth = false

function _cancelBubble(event) {

e = event ? event : window.event

if(ie) {

e.cancelBubble = true

} else {

e.stopPropagation()

}

function getposition(obj) {

var r = new Array()

r['x'] = obj.offsetLeft

r['y'] = obj.offsetTop

while(obj = obj.offsetParent) {

r['x'] += obj.offsetLeft

r['y'] += obj.offsetTop

}

return r

}

function loadcalendar() {

s = ''

s += '<div id="calendar" style="display:noneposition:absolutez-index:9" onclick="_cancelBubble(event)">'

if (ie)

{

s += '<iframe width="200" height="160" src="about:blank" style="position: absolutez-index:-1"></iframe>'

}

s += '<div style="width: 200px"><table class="tableborder" cellspacing="0" cellpadding="0" width="100%" style="text-align: center">'

///

s += '<tr align="center" class="header"><td class="header"><A href="#" onclick="refreshcalendar(yy-1, mm)return false" title="上一年"><<</A> <a href="#" onclick="refreshcalendar(yy, mm-1)return false" title="上一月"><</a></td><td colspan="5" style="text-align: center" class="header"><a href="#" onclick="showdiv(\'year\')_cancelBubble(event)return false" title="点击选择年份" id="year"></a><a id="month" title="点击选择月份" href="#" onclick="showdiv(\'month\')_cancelBubble(event)return false"></a></td><td class="header"><A href="#" onclick="refreshcalendar(yy, mm+1)return false" title="下一月">></A> <A href="#" onclick="refreshcalendar(yy+1, mm)return false" title="下一年">>></A></td></tr>'

s += '<tr class="category"><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>'

for(var i = 0i <6i++) {

s += '<tr class="altbg2">'

for(var j = 1j <= 7j++)

s += "<td id=d" + (i * 7 + j) + " height=\"19\">0</td>"

s += "</tr>"

}

s += '<tr id="hourminute"><td colspan="7" align="center"><input type="text" size="1" value="" id="hour" onKeyUp=\'this.value=this.value >23 ? 23 : zerofill(this.value)controlid.value=controlid.value.replace(/\\d+(\:\\d+)/ig, this.value+"$1")\'>点 <input type="text" size="1" value="" id="minute" onKeyUp=\'this.value=this.value >59 ? 59 : zerofill(this.value)controlid.value=controlid.value.replace(/(\\d+\:)\\d+/ig, "$1"+this.value)\'>分</td></tr>'

s += '</table></div></div>'///

s += '<div id="calendar_year" onclick="_cancelBubble(event)"><div class="col">'

for(var k = 1930k <= 2069k++) {

s += k != 1930 &&k % 10 == 0 ? '</div><div class="col">' : ''

s += '<a href="#" onclick="refreshcalendar(' + k + ', mm)$(\'calendar_year\').style.display=\'none\'return false"><span' + (today.getFullYear() == k ? ' class="today"' : '') + ' id="calendar_year_' + k + '">' + k + '</span></a><br />'

}

s += '</div></div>'

s += '<div id="calendar_month" onclick="_cancelBubble(event)">'

for(var k = 1k <= 12k++) {

s += '<a href="#" onclick="refreshcalendar(yy, ' + (k - 1) + ')$(\'calendar_month\').style.display=\'none\'return false"><span' + (today.getMonth()+1 == k ? ' class="today"' : '') + ' id="calendar_month_' + k + '">' + k + ( k <10 ? ' ' : '') + ' 月</span></a><br />'

}

s += '</div>'

var nElement = document.createElement("div")

nElement.innerHTML=s

document.getElementsByTagName("body")[0].appendChild(nElement)

//document.write(s)

document.onclick = function(event) {

$('calendar').style.display = 'none'

$('calendar_year').style.display = 'none'

$('calendar_month').style.display = 'none'

}

$('calendar').onclick = function(event) {

_cancelBubble(event)

$('calendar_year').style.display = 'none'

$('calendar_month').style.display = 'none'

}

function parsedate(s) {

/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec(s)

var m1 = (RegExp.$1 &&RegExp.$1 >1899 &&RegExp.$1 <2101) ? parseFloat(RegExp.$1) : today.getFullYear()

var m2 = (RegExp.$2 &&(RegExp.$2 >0 &&RegExp.$2 <13)) ? parseFloat(RegExp.$2) : today.getMonth() + 1

var m3 = (RegExp.$3 &&(RegExp.$3 >0 &&RegExp.$3 <32)) ? parseFloat(RegExp.$3) : today.getDate()

var m4 = (RegExp.$4 &&(RegExp.$4 >-1 &&RegExp.$4 <24)) ? parseFloat(RegExp.$4) : 0

var m5 = (RegExp.$5 &&(RegExp.$5 >-1 &&RegExp.$5 <60)) ? parseFloat(RegExp.$5) : 0

/(\d+)\-(\d+)\-(\d+)\s*(\d*):?(\d*)/.exec("0000-00-00 00\:00")

return new Date(m1, m2 - 1, m3, m4, m5)

}

function settime(d) {

$('calendar').style.display = 'none'

controlid.value = yy + "-" + zerofill(mm + 1) + "-" + zerofill(d) + (addtime ? ' ' + zerofill($('hour').value) + ':' + zerofill($('minute').value) : '')

}

function showcalendar(event, controlid1, addtime1, startdate1, enddate1) {

controlid = controlid1

addtime = addtime1

startdate = startdate1 ? parsedate(startdate1) : false

enddate = enddate1 ? parsedate(enddate1) : false

currday = controlid.value ? parsedate(controlid.value) : today

hh = currday.getHours()

ii = currday.getMinutes()

var p = getposition(controlid)

$('calendar').style.display = 'block'

$('calendar').style.left = p['x']+'px'

$('calendar').style.top = (p['y'] + 20)+'px'

_cancelBubble(event)

refreshcalendar(currday.getFullYear(), currday.getMonth())

if(lastcheckedyear != false) {

$('calendar_year_' + lastcheckedyear).className = 'default'

$('calendar_year_' + today.getFullYear()).className = 'today'

}

if(lastcheckedmonth != false) {

$('calendar_month_' + lastcheckedmonth).className = 'default'

$('calendar_month_' + (today.getMonth() + 1)).className = 'today'

}

$('calendar_year_' + currday.getFullYear()).className = 'checked'

$('calendar_month_' + (currday.getMonth() + 1)).className = 'checked'

$('hourminute').style.display = addtime ? '' : 'none'

lastcheckedyear = currday.getFullYear()

lastcheckedmonth = currday.getMonth() + 1

}

function refreshcalendar(y, m) {

var x = new Date(y, m, 1)

var mv = x.getDay()

var d = x.getDate()

var dd = null

yy = x.getFullYear()

mm = x.getMonth()

$("year").innerHTML = yy

$("month").innerHTML = mm + 1 >9 ? (mm + 1) : '0' + (mm + 1)

for(var i = 1i <= mvi++) {

dd = $("d" + i)

dd.innerHTML = " "

dd.className = ""

}

while(x.getMonth() == mm) {

dd = $("d" + (d + mv))

dd.innerHTML = '<a href="###" onclick="settime(' + d + ')return false">' + d + '</a>'

if(x.getTime() <today.getTime() || (enddate &&x.getTime() >enddate.getTime()) || (startdate &&x.getTime() <startdate.getTime())) {

dd.className = 'expire'

} else {

dd.className = 'default'

}

if(x.getFullYear() == today.getFullYear() &&x.getMonth() == today.getMonth() &&x.getDate() == today.getDate()) {

dd.className = 'today'

dd.firstChild.title = '今天'

}

if(x.getFullYear() == currday.getFullYear() &&x.getMonth() == currday.getMonth() &&x.getDate() == currday.getDate()) {

dd.className = 'checked'

}

x.setDate(++d)

}

while(d + mv <= 42) {

dd = $("d" + (d + mv))

dd.innerHTML = " "

d++

}

if(addtime) {

$('hour').value = zerofill(hh)

$('minute').value = zerofill(ii)

}

function showdiv(id) {

var p = getposition($(id))

$('calendar_' + id).style.left = p['x']+'px'

$('calendar_' + id).style.top = (p['y'] + 16)+'px'

$('calendar_' + id).style.display = 'block'

}

function zerofill(s) {

var s = parseFloat(s.toString().replace(/(^[\s0]+)|(\s+$)/g, ''))

s = isNaN(s) ? 0 : s

return (s <10 ? '0' : '') + s.toString()

}

loadcalendar()

</script>

</head>

<style>

table tr .td_bg { text-align:leftpadding-left:10px}

#att_info tr td { padding:3pxpadding-left:10px}

.header {font: 12px Arial, Tahoma !importantfont-weight: bold !importantfont: 11px Arial, Tahomafont-weight: boldcolor: #154BA0background:#C2DEEDheight: 25pxpadding-left: 10px

}

.header td {padding-left: 10px}

.header a {color: #154BA0}

.header input {background:nonevertical-align: middleheight: 16px}

.category {font: 12px Arial, Tahoma !importantfont: 11px Arial, Tahomacolor: #92A05Aheight:20pxbackground-color: #FFFFD9}

.category td {border-bottom: 1px solid #DEDEB8}

.expire, .expire a:link, .expire a:visited {color: #999999}

.default, .default a:link, .default a:visited {color: #000000}

.checked, .checked a:link, .checked a:visited {color: #FF0000}

.today, .today a:link, .today a:visited {color: #00BB00}

#calendar_year {display: noneline-height: 130%background: #FFFFFFposition: absolutez-index: 10}

#calendar_year .col {float: leftbackground: #FFFFFFmargin-left: 1pxborder: 1px solid #86B9D6padding: 4px}