次のコードを使用して、日付選択ウィジェットをページに追加します。
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<script type='text/javascript' src="http://twitter.github.com/bootstrap/assets/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<script type="text/javascript">
$(function datewidget() {
$( "#datepicker" ).datepicker({
dateFormat : 'dd/mm/yy',
changeMonth : true,
changeYear : true,
yearRange: '-100y:c+nn',
maxDate: '-1d'
});
$('#datepicker').live("change", function() {
datewidget();
});
});
この関数は、以下に示すように、html 内の入力フィールドに適用されます。
<div class="span12">
<form method="post" name="bdayInputFormMain" action="/bdayremind_maininput/" class="form-inline">
{% csrf_token %}
<input name="name" type="text" class="input-medium" placeholder="Name">
<input name="dob" type="text" class="input-small" placeholder="Date of Birth" id="datepicker">
<input name="anni" type="text" class="input-small" placeholder="Anniversy" id="datepicker">
<input name="name" type="text" class="input-xlarge" placeholder="Address">
<button type="submit" class="btn">Update</button>
</form>
ただし、問題は、生年月日フィールドをクリックしたときにのみ日付選択ウィジェットが開くことです。
ありがとう、