JQuery——日期拾取器

最新推荐文章于 2022-10-10 22:05:55 发布

wxaURmine

最新推荐文章于 2022-10-10 22:05:55 发布

阅读量978

点赞数

分类专栏： jQuery技术文章标签： ui jquery jquery-UI 日期拾取器

本文链接：https://blog.csdn.net/wxaURmine/article/details/46867611

版权

jQuery技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一.生成日期拾取器

<html>
<head>
    <title></title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css">

</style>
<script type="text/javascript">
    $(function(){
        $("#datep").datepicker();
    });
</script>
<body>

    <form method="post" action="http://node.jacquisflowershop.com/order">
        <div class="ui-widget">
            <label for="datep">Date:</label><input id="datep" />
        </div>
    </form>
</body>
</html>

这里写图片描述

二.指定默认日期

<script type="text/javascript">
    $(function(){
        $("#datep").datepicker({
            defaultDate:"+5y"
        });
    });
</script>

这里写图片描述
可以看到+5y，加了5年，还有null默认今天，+1d,+7w,+1m,+1y等代表日，星期，月，年

三.日期拾取器一些实用属性

<html>
<head>
    <title></title>
    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>
    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />
    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script>
</head>
<style type="text/css">

</style>
<script type="text/javascript">
    $(function(){
        $("#datep").datepicker({
           // minDate:"+7",      //今天以后起7天之前都不能选择
            numberOfMonths:[1,3],  //显示3个月的
            showCurrentAtPos:1,    //当前月显示在中间
            changeMonth:true,    //用户可以修改月份
            changeYear:true,     //用户可以修改年份
            yearRange:"-1:+2"   //year的范围为前一年到后两年
        });
    });
</script>
<body>

    <form method="post" action="http://node.jacquisflowershop.com/order">
        <div class="ui-widget">
            <label for="datep">Date:</label><input id="datep" />
        </div>
    </form>
</body>
</html>

这里写图片描述

四.日期拾取器外观属性

appendText：在input后增加一段文本，提示正确的日期格式
closeText：指定按钮面板负责关掉日期拾取器弹出窗口的按钮文本
currentText：指定按钮面板负责返回当前日期的按钮文本
selectOtherMonths：设为true，则显示出来其他月的日期可以选中
showButtonPanel：添加选择按钮
showOtherMonths：true则实用上个月和下个月的部分日期填充原本空白的网格
showWeek：true则增加一列显示星期信息

wxaURmine

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JQuery——日期拾取器

一.生成日期拾取器<html><head> <title></title> <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script> <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jqu
复制链接

扫一扫