Jquery Datepicker chọn nhiều phạm vi ngày trong một lịch

Yêu cầu của tôi là cho phép người dùng chọn nhiều phạm vi ngày trong một lịch duy nhất, cũng không được phép thay đổi ngày trước đó. Sao có thể như thế được? Dưới đây là đoạn code và liên kết đến fiddle Jquery Datepicker chọn nhiều phạm vi ngày trong một lịch

HTML

<p>from</p> 
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-datefrom"> 
<p>to</p> 
<input type="text" class="spromotion-input-inbody spromotion-input-datepick" id="sproid-bookingcondition-dateto">

SCRIPT

$(function() { 
    var dateFormat = "mm/dd/yy", 
     from = $("#sproid-bookingcondition-datefrom") 
     .datepicker({ 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 1 
     }) 
     .on("change", function() { 
      to.datepicker("option", "minDate", getDate(this)); 
     }), 
     to = $("#sproid-bookingcondition-dateto").datepicker({ 
     defaultDate: "+1w", 
     changeMonth: true, 
     numberOfMonths: 1 
     }) 
     .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; 
    } 
    });

Nguồn

2017-04-18 Shanaka

đâu là vấn đề ở đây? Bạn có ý nghĩa gì với nhiều phạm vi ngày? –

theo mặc định, chúng tôi chỉ có thể chọn một phạm vi ngày, các yêu cầu là chọn nhiều phạm vi ngày trên một lịch. – Shanaka

-1

thử này

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
    <script src="Scripts/jquery-1.11.1.js"></script> 
    <script src="Scripts/jquery-ui-1.11.1.js"></script> 
    <script src="Scripts/jquery-ui.multidatespicker.js"></script> 
    <link href="css/jquery-ui.css" rel="stylesheet" /> 
    <link href="css/jquery-ui.structure.css" rel="stylesheet" /> 
    <link href="css/jquery-ui.theme.css" rel="stylesheet" /> 
    <link href="css/pepper-ginder-custom.css" rel="stylesheet" /> 
    <link href="css/prettify.css" rel="stylesheet" /> 
</head> 

<body> 
    <input type="text" id="fromDate" /> 
    <script> 
     $(function() { 
      $('#fromDate').multiDatesPicker(); 
     }); 
    </script> 
</body> 
</html>

bạn có thể tải các tập tin js fr om liên kết https://sourceforge.net/projects/multidatespickr/

Nguồn

2017-04-18 10:58:09

giải pháp này được áp dụng cho lựa chọn ngày đơn nhiều lần nhưng không phải là phạm vi lựa chọn ngày. – Shanaka

Thật không may đây không phải là thứ mà plugin datepicker có thể thực hiện. Bạn sẽ cần một số JavaScript tùy chỉnh để kích hoạt tính năng này.

Tôi đã tìm thấy cách gần với những gì bạn muốn bằng các sự kiện onSelect và beforeShowDay. Nó duy trì một dãy các ngày được chọn, do đó tiếc là không tích hợp với một hộp văn bản hiển thị ngày hiện tại, v.v .. Tôi chỉ sử dụng nó như một điều khiển nội tuyến, và sau đó tôi có thể truy vấn mảng cho các ngày được chọn hiện tại.

Điều duy nhất bạn cần phải thay đổi về mã này là nhóm hai ngày vào các phạm vi, nhưng có nhiều cách để làm điều đó tùy thuộc vào UX mong muốn của bạn. Cá nhân, tôi sẽ chỉ nhóm hai ngày như một phạm vi theo thứ tự mà người dùng chọn. Sau đó, nếu họ xóa ngày khỏi bất kỳ phạm vi nào, toàn bộ phạm vi sẽ bị xóa (không được mã hóa ở đây, bạn sẽ cần phải thêm vào đó).

Đây là mã của tôi:

<script> 
// Maintain array of dates 
var dates = new Array(); 

function addDate(date) { 
    if (jQuery.inArray(date, dates) < 0) 
     dates.push(date); 
} 

function removeDate(index) { 
    dates.splice(index, 1); 
} 

// Adds a date if we don't have it yet, else remove it 
function addOrRemoveDate(date) { 
    var index = jQuery.inArray(date, dates); 
    if (index >= 0) 
     removeDate(index); 
    else 
     addDate(date); 
    } 

// Takes a 1-digit number and inserts a zero before it 
function padNumber(number) { 
var ret = new String(number); 
if (ret.length == 1) 
    ret = "0" + ret; 
    return ret; 
} 

jQuery(function() { 
    jQuery("#datepicker").datepicker({ 
     onSelect: function (dateText, inst) { 
      addOrRemoveDate(dateText); 
     }, 
     beforeShowDay: function (date) { 
      var year = date.getFullYear(); 
      // months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009" 
      var month = padNumber(date.getMonth() + 1); 
      var day = padNumber(date.getDate()); 
      // This depends on the datepicker's date format 
      var dateString = month + "/" + day + "/" + year; 

      var gotDate = jQuery.inArray(dateString, dates); 
      if (gotDate >= 0) { 
       // Enable date so it can be deselected. Set style to be highlighted 
       return [true, "ui-state-highlight"]; 
      } 
      // Dates not in the array are left enabled, but with no extra style 
      return [true, ""]; 
     } 
    }); 
}); 
</script>

Và đây là một fiddle: http://jsfiddle.net/gydL0epa/

Nguồn

2017-04-20 12:23:37 lax1089

Như những người khác đã gợi ý, tôi MultiDatesPicker đến gần với những gì nhu cầu của bạn. Nó đã cho phép single range selection, vì vậy bạn có thể ngã ba plugin đó và chỉnh sửa/cải thiện nó để cho phép nhiều phạm vi lựa chọn.

Giải pháp nhanh chóng và bẩn sẽ là nhận xét ra the line where the array of selected dates gets reset.

Nguồn

2017-04-24 16:00:19 dubrox

Vui lòng kiểm tra điều này có thể giải quyết được sự cố của bạn.

$(function() { 
 
    $('input[name="daterange"]').daterangepicker(); 
 
    $('input[name="daterange"]').change(function(){ 
 
     $(this).val(); 
 
     console.log($(this).val()); 
 
    }); 
 
});

<html> 
 
<head> 
 
<!-- Include Required Prerequisites --> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" /> 
 
    
 
<!-- Include Date Range Picker --> 
 
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" /> 
 
</head> 
 
<body> 
 
    <input class="pull-right" type="text" name="daterange" value="01/15/2020 - 02/15/2010"> 
 
</body> 
 
</html>

Nguồn

2017-04-25 10:12:25

Tôi nghĩ datepicker đa này sẽ giúp bạn giải quyết vấn đề của bạn.

$('#mdp-demo').multiDatesPicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/> 
 
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script> 
 
<div id="mdp-demo"></div>

Nguồn

2017-04-26 12:23:37

** Điều này hữu ích cho tôi với nhiều ngày (tùy chỉnh) Cảm ơn ** –

Jquery Datepicker chọn nhiều phạm vi ngày trong một lịch

Trả lời

Các vấn đề liên quan