bootstrap

这些年

浏览: 388700 次
性别:
来自: 北京

最近访客更多访客>>

hjz

xray2100

linkoog

luojianbing

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

学习网站：http://www.bootcss.com/

1：日期插件（bootstrap-datepicker）

1）：导入js及css

下载：http://aymkdn.github.io/Datepicker-for-Bootstrap/

2）：创建mod及应用控件

$(document).ready(function() {
	$('#day').datepicker({
		"format":'yyyy-mm-dd'
	});
});

<input   name="day" id="day"  type="text" />

2：别一个可以同时处理日期时间的例子

1）：下载控件

url:http://www.bootcss.com/p/bootstrap-datetimepicker/

2 )：修改其sample in bootstrap v3下的index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
</head>

<body>
<div class="container">
    <form action="" class="form-horizontal"  role="form">
        <fieldset>
            <legend>Test</legend>
            <div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
				<input type="hidden" id="dtp_input1" value="" /><br/>
            </div>
			<div class="form-group">
                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
				<input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
			<div class="form-group">
                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
					<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
                </div>
				<input type="hidden" id="dtp_input3" value="" /><br/>
            </div>
        </fieldset>
    </form>
</div>

<script type="text/javascript" src="./jquery/jquery-1.8.3.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.fr.js" charset="UTF-8"></script>  //国际化文件，须要设置编码
<script  type="text/javascript">
Date.prototype.format = function (format) {  //日期格式化
    /*  
     * eg:format="YYYY-MM-dd hh:mm:ss";  
     */   
    var  o = {  
        "M+"  : this .getMonth() + 1,  // month   
        "d+"  : this .getDate(),  // day   
        "h+"  : this .getHours(),  // hour   
        "m+"  : this .getMinutes(),  // minute   
        "s+"  : this .getSeconds(),  // second   
        "q+"  :Math.floor(( this .getMonth() + 3) / 3),  // quarter   
        "S"  : this .getMilliseconds()  
    // millisecond   
    }  
  
    if  (/(y+)/.test(format)) {  
        format = format.replace(RegExp.$1, (this .getFullYear() +  "" )  
                .substr(4 - RegExp.$1.length));  
    }  
  
    for  (  var  k  in  o) {  
        if  ( new  RegExp( "("  + k +  ")" ).test(format)) {  
            format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]  
                    : ("00"  + o[k]).substr(( ""  + o[k]).length));  
        }  
    }  
    return  format;  
}  
</script>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 2,
		forceParse: 0,
        showMeridian: 1
    });
	$('.form_date').datetimepicker({
		format: 'yyyy-mm-dd',
        language:  'fr', //国际化（语言）
        weekStart: 1,    //一周从哪一天开始。0（星期日）到6（星期六）
        todayBtn:  1,    //是否显示当前日期按钮
		autoclose: 1,    //当选择一个日期之后是否立即关闭此日期时间选择器。
		todayHighlight: 1,   //如果为true, 高亮当前日期
		startView: 2,
		minView: 2,
		forceParse: 0     //当选择器关闭的时候，是否强制解析输入框中的值
    });
	var date1 = new  Date().format("yyyy-MM-dd");
	alert(date1)
	$('.form_date').datetimepicker('setEndDate',date1);//限制其结束时间
	$('.form_time').datetimepicker({
        language:  'fr',
        weekStart: 1,
        todayBtn:  1,
		autoclose: 1,
		todayHighlight: 1,
		startView: 1,
		minView: 0,
		maxView: 1,
		forceParse: 0
    });
</script>

</body>
</html>

3)修改国际化文件：js\locales\bootstrap-datetimepicker.fr.js

/**
 * French translation for bootstrap-datetimepicker
 * Nico Mollet <nico.mollet@gmail.com>
 */
;(function($){
	$.fn.datetimepicker.dates['fr'] = {
		days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
        daysShort: ["日", "一", "二", "三", "四", "五", "六", "日"],
        daysMin: ["日", "一", "二", "三", "四", "五", "六", "日"],
        months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        today: "今天",
		suffix: [],
		meridiem: ["上午", "下午"],
		weekStart: 1,
		format: "yyyy-mm-dd"
	};
}(jQuery));

分享到：

js处理日期（转） | spring MVC 传参

2014-01-07 19:11
浏览 2119
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

bootstrap

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

bootstrap

评论

发表评论

相关推荐

ajaxfileupload 无刷新上传文件

a href=#与 a href=javascript:void(0) 的区别（转）

javascript学习笔记

js 函数大全（转的）

js 对象操作

闭包（转）

jquery 右下角 信息框

JQ 选择器大全（转）

纯js页面跳转整理（转）

jq 实现瀑布流

jQuery 遮罩层效果（转）

jQuery提供了三种删除节点(转)

humble software 简单使用

集成前台验证框架

css

Javascript 装载和执行（转）

编写更好的jQuery代码的建议(转)

js处理日期（转）

html小记

Jeditable（转）

最近访客更多访客>>

jquery 右下角信息框