日期選擇器即自動顯示在未來14天內

-1

IMAGE：日期選擇器即自動顯示在未來14天內

我想使用引導

關於如何做到這一點任何想法？謝謝。

來源

2017-10-09 Teddy Westside

你嘗試過這麼遠嗎？ –

你需要添加你已經嘗試過的代碼。 –

到目前爲止..沒有。只是一個概念 –

<html> 
 
\t <head> 
 
     <meta charset="utf-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>jQuery UI Datepicker</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 type="text/javascript"> 
 
      var dates = new Array(); 
 

 
      function addDates(date) { 
 
       if (dates.length > 0) { 
 
        dates = []; 
 
       } 
 
       if (jQuery.inArray(date, dates) < 0){ 
 
        var i; 
 
        for (i=1;i<14;i++){ 
 
         var month = date.getMonth()+1; 
 
         var day = date.getDate() + i; 
 
         var year = date.getFullYear(); 
 

 
         var value = month + '/' + day + '/' + year; 
 
         dates.push(value); 
 
        } 
 
        console.log(dates); 
 
       } 
 
      } 
 
      jQuery(function() { 
 
       jQuery("#datepicker").datepicker({ 
 
        autoclose: false, 
 
        onSelect: function (dateText, inst) { 
 
         var date = new Date($(this).datepicker('getDate')); 
 
         addDates(date); 
 
        }, 
 
        beforeShowDay: function (date) { 
 
         var year = date.getFullYear(); 
 
         var month = date.getMonth() + 1; 
 
         var day = date.getDate(); 
 
         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> 
 
    </head> 
 
<body> 
 
    
 
    <p>Date: <input type="text" id="datepicker"></p>

到目前爲止好

來源

2017-10-10 07:24:17

順便說一句，你們有什麼想法可以覆蓋日曆的設計嗎？ –

您可以使用此代碼。

$('.datepicker').datepicker({ multidate: true, });

參考Example

來源

2017-10-09 05:34:52 Jinesh

日期選擇器即自動顯示在未來14天內

回答

相關問題