码迷,mamicode.com
首页 > Web开发 > 详细

使用jQueryUI实现点击上月下月上周下周,日期相应改变

时间:2017-12-08 14:29:25      阅读:277      评论:0      收藏:0      [点我收藏+]

标签:src   .com   事件   baidu   sda   tar   form   widget   css   


<#assign basePath=request.contextPath />
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="${basePath}/static/libs/jquery-ui/jquery-ui.min.css">
<style type="text/css">
    .stats-input{margin:0;padding:5px 10px;position:relative;top:2px;}
    .dt-buttons{margin-left:5px}
    body,button,input,select,textarea{font:14px \5b8b\4f53,arial,sans-serif;}
</style>

<script type="text/javascript" src="${basePath}/static/libs/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="${basePath}/static/libs/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="${basePath}/static/libs/moment/moment.min.js"></script>

</head>
<body>
        <fieldset>
          <label>开始时间: </label>
          <input class="ui-widget ui-widget-content ui-corner-all stats-input" id="startDate" name="startDate">
          <input id="sDateVal" type="hidden">
          <label>结束时间: </label>
          <input class="ui-widget ui-widget-content ui-corner-all stats-input" id="endDate" name="endDate">
          <input id="eDateVal" type="hidden">
       
          <button id="upMonth" type="button">上月</button>
          <button id="downMonth" type="button">下月</button>
          <button id="upWeek" type="button">上周</button>
          <button id="downWeek" type="button">下周</button>
        </fieldset>
    
        
    
    <script type="text/javascript">
    var now=moment(${.now},YYYY-MM-DD HH:mm:ss);
    
    $(function(){
       var $startDate = $(#startDate),$endDate = $(#endDate),formater=YYYY-MM-DD,n=now.clone().subtract(1,days),y=n.year(),m=n.month()+1;
      
      $.datepicker.setDefaults({
          clearText: 清除,
          closeText: 关闭,
          prevText: 上月,
          nextText: 下月,
          currentText: 今天,
          monthNames: [一月,二月,三月,四月,五月,六月, 七月,八月,九月,十月,十一月,十二月],
          monthNamesShort: [,,,,,, ,,,,十一,十二],
          weekHeader: ,
          dayNames: [星期日,星期一,星期二,星期三,星期四,星期五,星期六],
          dayNamesShort: [周日,周一,周二,周三,周四,周五,周六],
          dayNamesMin: [,,,,,,],
          dateFormat: yy-mm-dd,
          altFormat:yymmdd,
          firstDay: 1,
          changeYear: true,
          changeMonth: true,
          showOtherMonths: true,
          selectOtherMonths: true,
          showMonthAfterYear: true,
          autoSize: true,
          hideIfNoPrevNext: true,
          yearRange:2016:+y,
          maxDate: n.toDate()
        });
      
      
        //开始日期
        $startDate.datepicker({
          altField:#sDateVal,
          onSelect: function(startDate) {
            var endDate = $endDate.datepicker(getDate);
            $endDate.datepicker("option", "minDate", startDate);
          }
        });
        //结束日期
        $endDate.datepicker({
          altField:#eDateVal,
          onSelect: function(endDate) {
            var startDate = $startDate.datepicker("getDate");
            $startDate.datepicker("option", "maxDate", endDate);
          }
        });
        
        // 设置日期初始值
        $startDate.datepicker(setDate, n.format(YYYY-MM-DD));
        $endDate.datepicker(setDate,n.format(YYYY-MM-DD));
        
      
          //上月按钮点击事件
        $(#upMonth).button().click(function() {
          var start = $startDate.datepicker(getDate), date = start ? moment(start, formater) : n.clone(),
         e=date.startOf(month).subtract(1, days).format(formater),s=date.startOf(month).format(formater);
        $startDate.datepicker("option", "maxDate", e).datepicker(setDate,s);
        $endDate.datepicker("option", "minDate", s).datepicker(setDate,e);
      });
      // 下月按钮点击事件
          $(#downMonth).button().click(function() {
          var end = $endDate.datepicker(getDate), date = end ? moment(end, formater) : n.clone(),s,e;
          if (date.endOf(month).add(1, days).isAfter(n)) {
            return;
          }
          s=date.format(formater);
          e=date.endOf(month).format(formater);
          $startDate.datepicker("option", "maxDate", e).datepicker(setDate,s);
          $endDate.datepicker("option", "minDate", s).datepicker(setDate,e);
          });
      
         // 上周按钮点击事件
       $(#upWeek).button().click(function() {
         var start = $endDate.datepicker(getDate), date = start ? moment(start, formater) : n.clone(),
             e=date.startOf(week).subtract(1, days).format(formater),s=date.startOf(week).format(formater);
           $startDate.datepicker("option", "maxDate", e).datepicker(setDate,s);
           $endDate.datepicker("option", "minDate", s).datepicker(setDate,e);
      });
      
      // 下周按钮点击事件
      $(#downWeek).button().click(function() {
       var end = $endDate.datepicker(getDate), date = end ? moment(end, formater) : n.clone();
         if (date.endOf(week).add(1, days).isAfter(n)) {
            return;
       }
       s=date.format(formater);
       e=date.endOf(week).format(formater);
       $startDate.datepicker("option", "maxDate", e).datepicker(setDate,s);
       $endDate.datepicker("option", "minDate", s).datepicker(setDate,e);
      });
    });
    
    
    </script>

</body>
</html>

百度云链接 : 链接:https://pan.baidu.com/s/1o7PkWtk 密码:7lcv

  

使用jQueryUI实现点击上月下月上周下周,日期相应改变

标签:src   .com   事件   baidu   sda   tar   form   widget   css   

原文地址:http://www.cnblogs.com/gaomanito/p/8004776.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!