Второй datePicker не может выбрать дату меньше, чем первый datePicker

В качестве заголовка я реализовал в своем проекте два datePicker, моя цель состоит в том, чтобы второй datePicker не мог выбрать дату раньше даты, выбранной в первом datePicker.

код:

    <div class = "col-md-4">
    <form name = "NOME_FORM" method = "post" action = "registra_campagne.php" class = "text-center border border-light p-5" onsubmit = "return validateForm()">
    <p class = "h4 mb-4">Durata Campagna</p>
    <div class = "md-form">
    <!--The "from" Date Picker -->
    <input name = "data_inizio" placeholder = "Data inizio" type = "text" id = "date-picker-example" class = "form-control datepicker">
    <label for = "date-picker-example">Inizio</label>

    </div>
    <div class = "md-form">
    <!--The "to" Date Picker -->
    <input name = "data_fine" placeholder = "Data Fine" type = "text" id = "date-picker-example2" class = "form-control datepicker">
    <label for = "date-picker-example2">Fine</label>
    </div>
    <input class = "btn btn-info btn-block" name = "submit" type = "submit" value = "Aggiungi"><br>
    </form>
    </div>
    <script type = "text/javascript">




    // Data Picker Initialization
    $('.datepicker').pickadate({
    min : new Date(),
    onClose: function(){
    $('#date-picker-example2').pickadate({
    min : $('.datepicker').val()
    })
    }
    });


    $('.datepicker').pickadate({
    // Escape any “rule” characters with an exclamation mark (!).
    format: 'yyyy/mm/dd',
    formatSubmit: 'Y/m/d',
    hiddenPrefix: 'prefix__',
    hiddenSuffix: '__suffix'
    })


    $('.datepicker').pickadate({
    closeOnSelect: false,
    closeOnClear: false

    });
    $('#input_starttime').pickatime({
    twelvehour: true

    });
    $('#input_endtime').pickatime({
    darktheme: true,
    twelvehour: false

    });
    </script> 

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
301
1

Ответы 1

У меня было неудовольствие просматривать документацию для датпикера. Это не очень легко понять, но сам datepicker хорошо сделан, по-прежнему превосходит любую родную альтернативу.

Это то, что вам нужно установить, и несколько дополнительных советов:

$("#date2").datepicker({ // initialization, you pass an option object to the datepicker function
changeMonth: true,          // with this you can change months on click

changeYear: true,            //  change year on click

yearRange: "1930:2018",       // your year range , this is what you need
showAnim: "slide",            // give the datpicker calendary UI an animation
onSelect: calcDiff,           // here you can pass you own callback functions, this is mine, you do not need this
onClose: move,                 // another of my own

minDate: null,                 // do not set this if you want to limit the range
maxDate: null                   // do not set this
});

Все, что вам нужно, это yearRange: «1930: 2018» в объекте параметров.

Вы можете проверить это, верхний - это экземпляр datepicker, нижний - очень плохая реализация HTML / JS.

https://codepen.io/damPop/pen/oayEdg?editors=0010

Хорошо, вот еще один, более короткий код:

https://codepen.io/damPop/pen/vQbprR?editors=1010

В строке 8 вы устанавливаете диапазон для первого экземпляра datepicker, yearRange: «1990: 2010».

В строке 28 вы делаете то же самое для второго элемента input, yearRange: "1991: 2010".

Извините, я пытаюсь понять, почему, реализуя ваш скрипт, мой второй datePicker по-прежнему позволяет вам выбирать дату перед первым datePicker

okok 01.12.2018 21:28

Хорошо, я сделаю для тебя ручку, дай мне несколько минут

ptts 01.12.2018 21:38

Надеюсь, теперь все понятно, просто скопируйте мой и возьмите оттуда, у вас 2 ошибки.

ptts 01.12.2018 21:47

Сэр, это полностью меняет логику проекта, созданного до сих пор, используя меня в качестве фреймворка MDBootstrap, используемая версия jquery 3.2.1 противоречит вашему коду, не инициализируя datePicker ..... плохая ситуация !!

okok 01.12.2018 21:51

Другие вопросы по теме