jQuery Datepicker：限制未來2年的日期選擇器

我有關於datepicker的問題。我已經包含了maxDate: "+2y"，但它沒有考慮到它。我會發布我的代碼下面的任何幫助將不勝感激。jQuery Datepicker：限制未來2年的日期選擇器

HTML/PHP：

  <div class="col-md-6 col-xs-6"> 
       <label class="no-margin txt-upper txt-medium">Check In</label> 
       <label class="no-margin arrow_label txt-medium"><i class="fa fa-caret-down"></i></label> 
       <div id="check_in_box" style="position:relative; padding-right: 20px;"> 
        <span id="check_in_d" class="font-size-5" style="font-weight: 600;"><?php echo date('d')?></span><span style="margin-left:5px"> 
        <span id="check_in_m" class="dates txt-upper checkin" style="font-size:18px;"><?php echo date('M')?></span> 
        <span id="check_in_y" class="dates checkin1" style="font-size:12px;"><?php echo date('Y')?></span></span> 
        <input name="check_in" id="check_in" value="<?php echo date('d/m/y')?>" type="text" class="datepicker search-date" style="opacity:0;height:0px;width:0;" autocomplete="off" /> 
       </div> 

      </div>

上面的代碼與在JavaScript的下文提到的所有的ID的HTML/CSS代碼：

 $('#check_in_box').click(function(e){ 
    $('#check_in').datepicker({ format: "dd/mm/yyyy", 
     startView: "months", 
     maxDate: "+2y" 
    }).on('changeDate', function (ev) { 
     $('#check_in_d').text(ev.date.getDate()); 
     console.log(ev.date.getFullYear()); 
     $('#check_in_y').text(ev.date.getFullYear()); 
     $('#check_in_m').text(months[ev.date.getMonth()]); 

     var startDate = new Date(ev.date.valueOf()); 
     startDate.setDate(startDate.getDate(new Date(ev.date.valueOf()))); 
     $('#check_out').datepicker('setStartDate', startDate); 
    }); 
    $('#check_in').datepicker('show') 
})

的maxDate:選項我有包括顯示最多兩年+2y只從現在的日期

下面我是placi納克我的頭文件：

<!DOCTYPE html> 
<html lang="en"> 
<head> 

<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title><?php echo $meta_title; ?></title> 

<!-- Bootstrap Core CSS --> 
<link href="<?=site_url('css/bootstrap.min.css')?>" rel="stylesheet"> 

<!-- user asse --> 
<link href="<?=site_url('css/select2.css')?>" rel="stylesheet"> 

<!-- Custom CSS --> 
<link href="<?=site_url('css/grayscale.css')?>" rel="stylesheet"> 
<link href="<?=site_url('css/custom.css')?>" rel="stylesheet"> 
<link href="<?=site_url('css/pagination.css')?>" rel="stylesheet"> 

<link href="<?=site_url('assests/css/bootstrap-datepicker3.css')?>" rel="stylesheet"> 
<!--link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> 
<!-- Custom Fonts --> 
<link href="<?=site_url()?>font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"> 
<link rel="shortcut icon" href="<?=site_url()?>img/logo.png"> 
<link href="<?php echo site_url('css/tooltipster.css'); ?>" rel="stylesheet"> 
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
    <!-- jQuery --> 

    <!-- Favicons--> 
<link rel="shortcut icon" href="<?=site_url()?>/img/favicon.ico"> 
<link rel="apple-touch-icon" href="<?=site_url()?>/img/apple-touch-icon.png"> 
<link rel="apple-touch-icon" sizes="72x72" href="<?=site_url()?>/img/apple-touch-icon-72x72.png"> 
<link rel="apple-touch-icon" sizes="114x114" href="<?=site_url()?>/img/apple-touch-icon-114x114.png"> 
<link href="<?=site_url('css/custom.css')?>" rel="stylesheet"> 
<link href="<?=site_url('css/box_layout.css')?>" rel="stylesheet"> 
<link rel="stylesheet" href="<?=site_url('front_end/css/skeleton.css')?>"> 
<link rel="shortcut icon" href="<?=site_url()?>img/logo.png"> 

<!--<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
jQuery --> 
<link rel="stylesheet" href="<?=site_url('front_end')?>/css/skeleton.css"> 
<link rel="stylesheet" href="<?=site_url('front_end')?>/css/menu.css"> 
<link rel="stylesheet" href="<?=site_url('front_end')?>/css/layout.css"> 
<link rel="stylesheet" href="<?=site_url('front_end')?>/css/calendar.css"> 
<link rel="stylesheet" href="<?=site_url('front_end')?>/css/fontello.css"> 
<link rel="stylesheet" href="<?=site_url('front_end')?>/css/flexslider.css"> 

<script src="<?=site_url('js/jquery.js')?>"></script> 
<link href="<?php echo site_url('backend/css/datatables/jquery.dataTables.css'); ?>" rel="stylesheet"> 
<script src="<?php echo site_url('backend/js/datatables/jquery.dataTables.js'); ?>"></script> 
<!-- multiselect --> 
<?php if (isset($multiSelect)): ?> 
<script src="<?php echo site_url('backend/js/multiselect/bootstrap-multiselect.js'); ?>"></script> 
<?php endif; ?> 

<!-- drop zone --> 
<link href="<?php echo site_url('backend/css/dropzone/css/dropzone.css'); ?>" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="<?php echo site_url('backend/css/dropzone/dropzone.js'); ?>"></script> 
<!-- /multiselect --> 
<script type="text/javascript" src="<?php echo site_url('js/jquery.tooltipster.js'); ?>"></script> 

<?php if(isset($map_page)){ ?> 

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<?php } ?> 
<script> 
      $(document).ready(function() { 
       $(".tabrow a").click(function(event) { 
        event.preventDefault(); 
        $(this).parent().addClass("selected"); 
       $(this).parent().siblings().removeClass("selected"); 
        var tab = $(this).attr("href"); 
        $(".tab-content").not(tab).css("display", "none"); 
        $(tab).fadeIn(); 
       }); 
      }); 
</script> 
<script> 
       $(document).ready(function() { 
       $(".tabrow2 a").click(function(event) { 
        event.preventDefault(); 
        $(this).parent().addClass("selected"); 
        $(this).parent().siblings().removeClass("selected"); 
        var tab = $(this).attr("href"); 
        $(".tab-content2").not(tab).css("display", "none"); 
        $(tab).fadeIn(); 
       }); 
      }); 
</script> 
<script> 
    function showStuff (id) 
{ 

    document.getElementById("firstab-1").style.display = "none"; 
    document.getElementById("firstab-2").style.display = "none"; 
    document.getElementById("firstab-3").style.display = "none"; 
    document.getElementById("firstab-4").style.display = "none"; 
    document.getElementById(id).style.display = "block"; 

    } 
    </script> 
    <script> 
    function showStuffI (id) 
    { 

    document.getElementById("firstab-1").style.display = "none"; 
    document.getElementById("firstab-2").style.display = "none"; 
    document.getElementById("firstab-3").style.display = "none"; 
    document.getElementById(id).style.display = "block"; 

    } 
    </script> 
</script>

來源

2015-12-18 david noronha

大衛的工作對我來說，檢查了小提琴，HTTP：//jsfiddle.net/8w8v9/736/ – Afsar

嘿喜贊，感謝您的答覆。我使用codeigniter它可能會導致它不工作的一些庫的COS？ –

@davidnoronha，它意味着jquery是衝突的，請問您可以在這裏添加什麼其他庫，你正在使用 –

請嘗試以下代碼。它會正常工作。

<!doctype html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>jQuery UI Datepicker - Default functionality</title> 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
     <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    </head> 
    <body> 

     <div class="col-md-6 col-xs-6"> 
      <label class="no-margin txt-upper txt-medium">Check In</label> 
      <label class="no-margin arrow_label txt-medium"><i class="fa fa-caret-down"></i></label> 
      <div id="check_in_box" style="position:relative; padding-right: 20px;"> 
       <span id="check_in_d" class="font-size-5" style="font-weight: 600;"><?php echo date('d') ?></span><span style="margin-left:5px"> 
        <span id="check_in_m" class="dates txt-upper checkin" style="font-size:18px;"><?php echo date('M') ?></span> 
        <span id="check_in_y" class="dates checkin1" style="font-size:12px;"><?php echo date('Y') ?></span></span> 
       <input name="check_in" id="check_in" value="<?php echo date('d/m/y') ?>" type="text" class="datepicker search-date" style="opacity:0;height:0px;width:0;" autocomplete="off" /> 
      </div> 

     </div> 

    </body> 
</html> 

<script> 
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 
    $(function() { 
     $('#check_in').datepicker({format: "dd/mm/yyyy", 
      startView: "months", 
      maxDate: "+2y" 
     }).on('change', function(ev) { 
      var sel_date = new Date($(this).val()); 
      $('#check_in_d').html(sel_date.getDate()); 

      $('#check_in_y').html(sel_date.getFullYear()); 
      $('#check_in_m').html(months[sel_date.getMonth()] + ""); 

      var startDate = new Date($(this).val()); 
      startDate.setDate(startDate.getDate(new Date($(this).val()))); 
      $('#check_out').datepicker('setStartDate', startDate); 
     }); 
     $('#check_in_box').click(function(e) { 

      $('#check_in').datepicker('show') 
     }); 
    }); 
</script>

來源

2015-12-18 06:36:50

嗨Shrey，謝謝你的回覆，但是仍然可以到2018年。 –

@david對我來說工作得很好。我有整個示例代碼給你。你只需在你的系統中嘗試。它應該工作 –

嗨Shrey，我提供了一個截圖（檢查下面的問題鏈接）供您參考。還是行不通 –

jQuery Datepicker：限制未來2年的日期選擇器

回答

相關問題