2017-01-08 6 views
0

Моя проблема в том, что при втором нажатии на ввод (в) календарь отображает следующий месяц.Jquery ui date picker Предыдущий месяц вместо следующего

Например, при первом нажатии на ввод (на) в календаре отображаются январь и февраль (это то, что я хочу). Если я выбираю дату в январе, нет проблем. Но 1 - если я выбираю дату в феврале, на календаре отображаются февраль и март, а не январь и февраль. 2 - если я выбираю дату в марте, календарь отображает марш и апрель, а не feb и марш ... и т. Д.

https://jsfiddle.net/aminos12/vty1qk7f/

var dateFormat = "mm/dd/yy", 
     from = $("#from") 
     .datepicker({ 
      numberOfMonths: 2 
     }) 
     .on("change", function() { 
      to.datepicker("option", "minDate", getDate(this)); 
     }), 
     to = $("#to").datepicker({ 
     numberOfMonths: 2 
     }) 
     .on("change", function() { 
     from.datepicker("option", "maxDate", getDate(this)); 
     }); 

    function getDate(element) { 
     var date; 
     try { 
     date = $.datepicker.parseDate(dateFormat, element.value); 
     } catch(error) { 
     date = null; 
     } 

     return date; 

enter image description here версия JQuery UI - v1.12.1 Спасибо за вашу помощь

ответ

0

То есть поведение по умолчанию datepicker при установке, чтобы показать несколько месяцев. Если вы измените поведение, вы можете столкнуться с проблемой не показывать правильное month в первый раз, или люди, которые раздражаются, должны нажать на стрелку следующего месяца, когда дело доходит до выбора даты в будущем, и снова открыть datepicker.

Это было бы очень важно, особенно для таких сайтов, как туристические агентства, когда вы захотите выбрать даты и даты.

Лучшим вариантом является показать кнопку Today в нижней части ее для удобства использования, если они выбрали дату в будущем, а затем хотите вернуться к первоначальным двум месяцам или выбрать сегодня.

Это делается с использованием showButtonPanel: true в вариантах.

<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>jQuery UI Datepicker - Display multiple months</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> 
 
    <script> 
 
    $(function() { 
 
    $("#datepicker").datepicker({ 
 
     numberOfMonths: 2, 
 
     showButtonPanel: true 
 
    }); 
 
    }); 
 
    </script> 
 
</head> 
 
<body> 
 
    
 
<p>Date: <input type="text" id="datepicker"></p> 
 
    
 
    
 
</body> 
 
</html>

0

Datepicker по умолчанию не делает этого.

Если я правильно понимаю ваш вопрос, вы хотите, чтобы 2 месяца всегда были в этом месяце и в следующем месяце. Если я выбираю дату в феврале для «из», тогда, когда я нажимаю в поле «в», вы все еще хотите увидеть январь-февраль, это правильно? Вот как работает Datepicker по умолчанию.

JSFiddle

$("#from").datepicker({ 
    numberOfMonths: 2, 
}); 
$("#to").datepicker({ 
    numberOfMonths: 2, 
}); 

screenshot of working JSFiddle

minDate and maxDate установить мин/макс выбираемые даты, а не мин/макс отображаются даты. Если вы установите minDate на 1 января, это означает, что вы не можете выбрать 31-й дек. Чтобы на самом деле изменить, какие месяцы отображаются, используйте showCurrentAtPos. Если вы показываете 2 месяца, установите showCurrentAtPos: 0, чтобы показать текущий месяц в позиции 0 (первый из 2). Обратите внимание, что этот пример не имеет смысла, поскольку это поведение по умолчанию!

+0

@mino это помогло? –