2017-04-23 13 views
0

私はここ数時間、何も答えずに答えを探しましたが、ここではこれはかなり単純です。jqueryui Datepicker、今年の日付範囲の上限

jqueryuiのDatepickerを「日付範囲」モードで使用することを検討していますが、今年だけに選択できる日付を制限したいと考えています。また、日付形式をmm/dd/yyからdd/mm/yyに変更したいと思います。

私は失敗した努力を投稿する際に何の価値も見られないので、私は元のコードに投稿します。

誰かが私を助けてくれることを願って、ありがとう。あなたのニーズに応じて

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>jQuery UI Datepicker - Select a Date Range</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> 
$(function() { 
var dateFormat = "mm/dd/yy", 
from = $("#from") 
.datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3 
}) 
.on("change", function() { 
to.datepicker("option", "minDate", getDate(this)); 
}), 
to = $("#to").datepicker({ 
defaultDate: "+1w", 
changeMonth: true, 
numberOfMonths: 3 
}) 
.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; 
} 
}); 
</script> 
</head> 
<body> 

答えて

0

適応以下のコード:

$(function() { 
    var year = (new Date).getFullYear(); 
    $("#from").datepicker({ 
     minDate: new Date(year, 0, 1), 
     maxDate: new Date(year, 11, 31) 
    }); 
}); 

var from = $('#from').datepicker({ dateFormat: 'dd-mm-yy' }).val(); 

オリジナルのポスト:あなたの具体的な例herehere

、これは同様に適用することができこれは(私はあなたの完全なコード/ CSSを持っていない):

<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 

<title>jQuery UI Datepicker - Select a Date Range</title> 

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

<script> 
    $(function() { 
     var year = (new Date).getFullYear(); 

     from = $("#from").datepicker({ 
      minDate: new Date(year, 0, 1), 
      maxDate: new Date(year, 11, 31), 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 3 
     }) 
     .on("change", function() { 
      $("#to").datepicker("option", "minDate", new Date($("#from").datepicker().val())); // You set the min date of `to` to be the selected date here 
     }), 

     to = $("#to").datepicker({ 
      maxDate: new Date(year, 11, 31), // minDate has already been set 
      defaultDate: "+1w", 
      changeMonth: true, 
      numberOfMonths: 3 
     }); 

     function getDate(element) { 
      var date; 
      try { 
       date = $(element).datepicker({ dateFormat: 'dd-mm-yy' }).val(); 
      } catch(error) { 
       date = null; 
      } 
      return date; 
     } 
    }); 
</script> 
</head> 

<body> 

<!-- dummy datepickers --> 
<div id="from"></div> 
<div id="to"></div> 

<!-- It is a good practice to import scripts at the end of your page, helps to render quicker the DOM --> 
<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> 

</body> 
</html> 

はそれがお役に立てば幸いです。)

+0

あなたアントワーヌありがとうございますが、これはどこ元のコードに行くんし、私は、既存の情報を削除する必要があります。私と別にみんなにはっきりと分かっている疑問をおそらく尋ねる謝罪! – teddytash

+0

@teddytash OK回答を更新します。しかし、私はコードのスニペットをテスト/理解/カスタマイズするのに、コピー&ペーストするのではなく、単純にコピー/ペーストするのではなく、時間をかけてお勧めします) – Antoine

+0

本当にありがとう、助けてくれてありがとうございます。 – teddytash

関連する問題