使用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

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

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

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行