2017-01-05 8 views
1

У меня есть требование, когда дата начала и дата окончания не должны иметь разницу в 144 часа, т. Е. Всего 6 дней.дата и дата выбора даты и времени даты

Дата начала - это поле времени, и пользователь будет выбирать дату и время. В дату окончания дата будет рассчитываться на основе выбранной даты и времени. Время будет до 144 часов.

Кто-нибудь реализовал это? Спасибо заранее.

С уважением, Mayank

+0

Там много и много вопросов об этом, если вы выполните поиск, [это] (http://stackoverflow.com/questions/29122275/set-end-date-after-select-start-date), например. Реализация зависит от библиотеки datepicker, которую вы используете, но логика примерно такая же. –

ответ

0

Я думаю, что код ниже будет решить вашу проблему

$(function() { 
 
    $("#datepicker1").datepicker(); 
 
    $("#datepicker2").datepicker(); 
 
}); 
 

 

 
function validateDiff() { 
 
    var fromdate = new Date($("#datepicker1").val()); 
 
    var todate = new Date($("#datepicker2").val()); 
 
    var validdiff = 1000 * 60 * 60 * 24; 
 

 
    console.log(fromdate); 
 
    console.log(todate); 
 

 
    var date_diff = todate - fromdate; 
 
    console.log(date_diff); 
 

 
    if (date_diff == validdiff * 6) 
 
    alert("Date Difference is 6 Days exact"); 
 
    else if (date_diff <= validdiff * 6) 
 
    alert("Date Difference is less than 6 Days"); 
 
    else 
 
    alert("Date Difference is grater than 6 Days"); 
 
}
<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> 
 

 

 

 
<p>Date From : 
 
    <input type="text" id="datepicker1"> 
 
</p> 
 
<p>Date To : 
 
    <input type="text" id="datepicker2"> 
 
</p> 
 
<button type="button" onclick="validateDiff()">Check</button>

0

Вот пример для начала и конца DatePicker с помощью Jquery

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script> 
    $(document).ready(function() { 
    $("#dt1").datepicker({ 
     dateFormat: "dd-M-yy", 
     minDate: 0, 
     onSelect: function() { 
      var dt2 = $('#dt2'); 
      var startDate = $(this).datepicker('getDate'); 
      //add 30 days to selected date 
      startDate.setDate(startDate.getDate() + 30); 
      var minDate = $(this).datepicker('getDate'); 
      //minDate of dt2 datepicker = dt1 selected day 
      dt2.datepicker('setDate', minDate); 
      //sets dt2 maxDate to the last day of 30 days window 
      dt2.datepicker('option', 'maxDate', startDate); 
      //first day which can be selected in dt2 is selected date in dt1 
      dt2.datepicker('option', 'minDate', minDate); 
      //same for dt1 
      $(this).datepicker('option', 'minDate', minDate); 
     } 
    }); 
    $('#dt2').datepicker({ 
     dateFormat: "dd-M-yy" 
    }); 
}); 
    </script> 
</head> 
<body> 
<form> 
    <input type="text" id="dt1"> 
    <input type="text" id="dt2"> 
</form> 
</body> 
</html>