Question

很抱歉，代码只是出于一个想法而还不是全部用HTML完成。

$('#Datepicker1').datepicker(
        {
            changeYear: true,
            dateFormat: 'dd.mm.yy',
            maxDate: 0,
            minDate:new Date(_this.minDateSearch), // its 2012-2018 (variable)
            //yearRange: "year:year",
            showButtonPanel: true,

       onClose : function (dateSelected)
            {

                $('#Datepicker1').datepicker('option','yearRange','c-1:c+1');
                $('#Datepicker2').datepicker('option','yearRange','c-1:c+1');

            }
        });

$('#Datepicker2').datepicker(
        {
            changeYear: true,
            dateFormat: 'dd.mm.yy',
            maxDate: 0,
            minDate:new Date(_this.minDateSearch),
            yearRange: "year:year",
            showButtonPanel: true,
            beforeShow: function(input, inst) {
                var from = $('#Datepicker1').val();
                if(from){
                    var year = from.substring(from.length - 4, from.length);
                    var day = from.substring(0, 2);
                    var month = from.substring(3, 5);
                    console.log('beforeShow2 =' + day+"."+month+"."+year);
                    $(this).datepicker('option','maxDate',new                           Date(parseInt(year)+1,parseInt(month)-1,day));
                    console.log('maxDate TO =' + new Date(parseInt(year)+1,parseInt(month)-1,day));
                    $(this).datepicker('option','minDate',new Date(year,parseInt(month)-1,day));
                }else{
                    $('#Datepicker2').datepicker('option','yearRange','c-1:c+1');
                }
            },

            onClose : function (dateSelected)
            {

                $('#Datepicker1').datepicker('option','yearRange','c-1:c+1');
                $('#Datepicker2').datepicker('option','yearRange','c-1:c+1');

            }

        }).datepicker("setDate", new Date(DEStorage.get('statementsDateTo')));

我有2个日历。我想做这样的事情：当我选择第一个日期时，第二个日期应该在1年范围内。例如：我选择2012年6月10日为第一个日期，那么第二个日期应为2012年6月10日至2013年6月10日（一年期）。当我从第一个日历中选择某项时，第二个日历应自动更新，并且第一个日期不应大于第二个日期。有什么帮助吗？

Answer 1

尝试使用此设置。设置为maxDate第一个日期选择器的onClose函数

   $("#searchFromDate").datepicker({
    dateFormat:'yy-mm-dd',
    onClose: function( selectedDate ) {
    
    var date = $(this).datepicker('getDate');
    var todate=new Date(date.getFullYear()+1,date.getMonth(),date.getDate())
    
            $("#searchToDate" ).datepicker( "option", "maxDate", todate );
            $("#searchToDate" ).datepicker( "option", "minDate", selectedDate );
                   }});
  	
    $("#searchFromDate").datepicker("setDate", new Date());
              
    $("#searchToDate").datepicker({dateFormat:'yy-mm-dd'});
    $("#searchToDate").datepicker("setDate", new Date());

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

</head>
<body>
 
<p>Date: <input type="datepicker" id="searchFromDate"></p>
<p>Date: <input type="datepicker" id="searchToDate"></p>
 
 
</body>

数据选择器日历在1年范围内发生变化

1 个答案: