Автоматически установить значение для входа

Я работаю над веб-сайтом бронирования с использованием начальной загрузки datepicker, чего я хочу добиться, так это когда пользователь выбирает конкретную дату заезда и количество ночей, он устанавливает значение автоматической даты для даты выезда.

 $.fn.datepicker.defaults.format = "mm/dd/yyyy";
 $(".check-in").datepicker("setDate", new Date());

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<div class = "booking">
  <input class = "check-in" data-provide = "datepicker">
  <input class = "nights" type = "number">
  <input class = "check-out" data-provide = "datepicker">
</div>

javascript jquery html datepicker

14.07.2018 08:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Получите дату из поля регистрации. Затем добавьте это к числу при изменении ввода (числового поля) на setDate(). Наконец, установите эту новую дату в поле выезда. Попробуйте следующее:

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$(".check-in").datepicker("setDate", new Date());

$('.nights').on('input', function(){
  var date2 = $('.check-in').datepicker('getDate'); 
  date2.setDate(date2.getDate() + Number(this.value)); 
  $(".check-out").datepicker("setDate", date2);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<div class = "booking">
  <input class = "check-in" data-provide = "datepicker">
  <input class = "nights" type = "number">
  <input class = "check-out" data-provide = "datepicker">
</div>

14.07.2018 09:10

Попробуйте это с onchange!

    $.fn.datepicker.defaults.format = "mm/dd/yyyy";
    $(".check-in").datepicker("setDate", new Date());

    function checkoutDate(){
       var date1 = $('.check-in').datepicker('getDate');
       var date = new Date( Date.parse( date1 ) );
       var nights = $('.nights').val();
       var count = parseInt(nights);
       date.setDate( date.getDate() + count);
       var newDate = date.toDateString();
       newDate = new Date( Date.parse( newDate ) );
       $('.check-out').datepicker('setDate', newDate );
   }

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />
<div class = "booking">
 <input class = "check-in" data-provide = "datepicker" onchange = "checkoutDate();">
 <input class = "nights" type = "number" onchange = "checkoutDate();">
 <input class = "check-out" data-provide = "datepicker">
</div>

14.07.2018 09:17

Вы можете использовать событие onchange. Как только значение поля даты и числа регистрации изменится, вы либо вводите, либо фокусируетесь, либо щелкаете по дате. Поле выезда будет обновлено.

$.fn.datepicker.defaults.format = "mm/dd/yyyy";
$(".check-in").datepicker("setDate", new Date());

$('.nights, .check-in').on('change', function(){
  var date2 = $('.check-in').datepicker('getDate'); 
  var no_days= $('.nights').val(); 
  date2.setDate(date2.getDate() + Number(no_days)); 
  $(".check-out").datepicker("setDate", date2);
});

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" />

<div class = "booking">
  <input class = "check-in" data-provide = "datepicker">
  <input class = "nights" type = "number" min = "0">
  <input class = "check-out" data-provide = "datepicker">
</div>

14.07.2018 09:24

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

Использование angularjs-datepicker для добавления дат в таблицу

Выполнить jquery только внутри элемента div

JQuery datatable перезагружает данные во второй раз

JQuery parallel ajax rquest для выражения

Как извлечь конкретное поле данных из Javascript с помощью jquery?

Перенаправление не работает при запуске приложения

Как настроить вкладки начальной загрузки, когда они активны?

Проблема построения select / drop-down optgroup с jquery

JQuery Datepicker. 2 датпикера. Диапазон ограничения: максимум 2 недели с выбранной даты начала

Переключить функцию onClick

Автоматически установить значение для входа

Ответы 3

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

Похожие вопросы