jQuery日期选择器插件jquery.date_input.js

模板网 2014-10-09

官网:http://jonathanleighton.com/projects/date-input/

示例下载:jQuery日期选择器插件jquery.date_input.js

下载:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js

http://github.com/jonleighton/date_input/raw/master/date_input.css

中文支持:

复制代码 代码如下:
jQuery.extend(DateInput.DEFAULT_OPTS, {  month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],  short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],  short_day_names: ["一", "二", "三", "四", "五", "六", "日"]});

说明:默认是日期格式很不好,需要修改。

全部代码:

复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>日历</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.date_input.js"></script>
<link rel="stylesheet" href="date_input.css" type="text/css">
<script>
jQuery.extend(DateInput.DEFAULT_OPTS, {
month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
short_day_names: ["一", "二", "三", "四", "五", "六", "日"],
dateToString: function(date) {
var month = (date.getMonth() + 1).toString();
var dom = date.getDate().toString();
if (month.length == 1) month = "0" + month;
if (dom.length == 1) dom = "0" + dom;
return date.getFullYear() + "-" + month + "-" + dom;
}
});
$(function() {
$(".biuuu1").date_input();
$(".biuuu2").date_input();
});
</script>
</head>
<body>
<input type="text" class="biuuu1" name="date"/>
<input type="text" class="biuuu2" name="date"/>
</body>
</html>

效果截图:

jQuery日期选择器插件jquery.date_input.js

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>jQuery日期选择器插件jquery.date_input.js</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/demo/20141009/001/jquery.date_input.js"></script>
<script type="text/javascript">
    $(function() {
        $("#date").date_input()
    });
    jQuery.extend(DateInput.DEFAULT_OPTS, {
        month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
        short_day_names: ["日", "一", "二", "三", "四", "五", "六"]
    });
    $.extend(DateInput.DEFAULT_OPTS, {
        stringToDate: function(string) {
            var matches;
            if (matches = string.match(/^(\d{4,4})-(\d{2,2})-(\d{2,2})$/)) {
                return new Date(matches[1], matches[2] - 1, matches[3])
            } else {
                return null
            }
        },
        dateToString: function(date) {
            var month = (date.getMonth() + 1).toString();
            var dom = date.getDate().toString();
            if (month.length == 1) month = "0" + month;
            if (dom.length == 1) dom = "0" + dom;
            return date.getFullYear() + "-" + month + "-" + dom
        }
    });
</script>
</head>
<body>
<input name="date" id="date" type="text" />
</body>
</html>

相关文章

  1. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

  2. 医疗网站常用的左右滑动Banner效果_jquery插件

    医疗网站常用的左右滑动Banner效果_jquery插件,使用简单。 在线演示 使用方法: 1.在网页中引入一下代码: 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=

  3. jquery折叠效果

    jquery折叠效果,图片折叠收缩,效果非常棒! 代码打包下载: jquery折叠效果 效果图:

  4. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

  5. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:

随机推荐

  1. jquery.md5.js下载

    jquery.md5.js下载 使用方法 复制代码 代码如下: script type=text/javascript src=jquery.min.js/script script type=jquery.md5.js/script script type=text/javascript alert($.md5(test)); /script 点击下载 官网:https://github.com/placemarker/jQuery

  2. 医疗网站常用的左右滑动Banner效果_jquery插件

    医疗网站常用的左右滑动Banner效果_jquery插件,使用简单。 在线演示 使用方法: 1.在网页中引入一下代码: 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=

  3. jquery折叠效果

    jquery折叠效果,图片折叠收缩,效果非常棒! 代码打包下载: jquery折叠效果 效果图:

  4. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

  5. jQuery火箭上升回到顶部效果

    jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图: