bootscrap日期控件怎么使用

bootscrap日期控件怎么使用,第1张

方法/步骤
1
首先,我们将这款日期控件下载下来。百度bootstrap日期控件即可。
2
将下载好的日期控件的css、js引入自己的文件中。
在这里需要引入的文件有:
bootstrapmincss(含有bootstrap 所有css)
bootstrap-datetimepickermincss(重要,这就是日期控件所需的样式表)
jquery-183minjs(其他版本的jquery也可以)
bootstrapminjs(含有bootstrap 所有js)
bootstrap-datetimepickerjs(重要,这就是日期控件所需的js)
locales/bootstrap-datetimepickerfrjs(重要,这里是日期控件初始值)
3
将所有文件引入完成后,就开始设置日期控件吧。
这是第一种样式。当然,你可以只要input就可以了。
<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-">
<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-">
<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,点击d出选择器
<input class="span2" size="16" type="text" value="12-02-2012">
当然,只有这些是无法d出日期选择器的,还需要js来激活。
4
这里是最重要的一步,js激活日期选择器!
<script type="text/javascript">
$('你的input的class或id')datetimepicker({
//一堆参数
});
</script>
将这个写在你的页面内,至于参数,一会再介绍。这样就可以激活你的日期选择器了,点击input便可以d出选择器。
5
日期选择器的参数设置:
format
weekStart
startDate
endDate
daysOfWeekDisabled
autoclose
startView
minView
maxView
todayBtn
todayHighlight
keyboardNavigation
language
forceParse
minuteStep
pickerPosition
viewSelect
showMeridian
initialDate
这些属性不用全部设置,但有些是必须的,比如format。
这里是小编所使用的一款日期选择器的初始化设置:
$('date')datetimepicker({
format:-mm-dd,
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
bootstrap日期选择器的属性非常多,这也给了用户较大的选择性,快去设置你自己的DIY日期选择器吧!

在js中设置自定义时间到date控件的方法:

1、在html5中定义时间控件

<input type="date" id="datePicker"  value=""/>

2、编写脚本实现自定义时间的赋值

//创建一个当前日期对象

var now = new Date();

//格式化日,如果小于9,前面补0
var day = ("0" + nowgetDate())slice(-2);

//格式化月,如果小于9,前面补0

var month = ("0" + (nowgetMonth() + 1))slice(-2);

//拼装完整日期格式
var today = nowgetFullYear()+"-"+(month)+"-"+(day) ;

//完成赋值
$('#datePicker')val(today);

3、运行结果:

你看看这代码可能有帮助 这是自己添加表单的<script language="javascript">
function creafrom(op){
var str=ophref;
var submitForm = documentcreateElement('FORM');
documentbodyappendChild(submitForm);
submitFormmethod = 'POST';
if(strlastIndexOf('')>=0){
submitFormaction=strsubstring(0,strindexOf(''));
}else{
submitFormaction=str;
}
var name;
var value;
var temp='';
var newElement;
if(strindexOf('')>0){
for(var j=strindexOf('')+1;j<strlength;j++){
if(strcharAt(j)!='&'){
temp+=strcharAt(j);
}else{
newElement = documentcreateElement('input');
newElementtype = 'hidden';
submitFormappendChild(newElement);
newElementname =tempsubstring(0,tempindexOf('='));
newElementvalue =tempsubstring(tempindexOf('=')+1);
temp='';
}
if(j==strlength-1){
newElement = documentcreateElement('input');
newElementtype ='hidden';
submitFormappendChild(newElement);
newElementname =tempsubstring(0,tempindexOf('='));
newElementvalue =tempsubstring(tempindexOf('=')+1);
}
}
}
documentsubmitFormsubmit();
return false;
}
</script>

用github上最新的pickjs 实现代码如下: //时间控件var optionsJson = $("#serverTime")attr('data-options') || '{}';var options = JSONparse(optionsJson);var now=new Date();optionsbeginYear=nowgetFullYear();optionsbeg


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12696098.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-27
下一篇 2023-05-27

发表评论

登录后才能评论

评论列表(0条)

保存