Изменения календаря Datapicker в пределах 1 года - PullRequest
Новая
       6

Изменения календаря Datapicker в пределах 1 года

0 голосов
/ 14 ноября 2018

Извините за код - он не полностью укомплектован 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 года.Пример: я выбираю 10 июня 2012 года для первой даты, затем вторая дата должна быть с 10 июня 2012 года до 10 июня 2013 года (1 год).Когда я выбираю что-то из первого календаря, второй календарь должен обновляться автоматически, и первая дата не должна быть больше второй даты.любая помощь, пожалуйста?

1 Ответ

0 голосов
/ 14 ноября 2018

Попробуйте это ... установить, чтобы maxDate первый DatePicker на функцию Close 

   $("#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>
...