最新のBootstrap datepicker.jsを使用します。ドロップダウンから日付を選択しても、自動的に閉じられないことを除いて、すべて正常に動作します。Webを検索し、次の関数次のような私のJavaScriptで:
$('#selectDate').datepicker({
autoclose: true
}).on('changeDate', function (ev) {
(ev.viewMode == 'days') ? $(this).datepicker('hide') : '';
});
しかし、Google Chrome Devツールを使用すると、ev.viewmodeが定義されていないことに気付きました。
これを試して:
$('#selectDate').datepicker()
.on('changeDate', function(ev){
$('#selectDate').datepicker('hide');
});
更新:
githubにあるdatepickerの更新バージョンを使用すると、autoclose
は正常に機能します。
私はautoclose:true、を追加しました(最後に半コンマを付けて動作します)
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
todayHighlight:'TRUE',
autoclose: true,
})
上記のどれも私にとってはうまくいきませんでしたが、datepickerのデフォルトオプションをオーバーライドすることは魅力のように機能し、ワンライナーです:
$.fn.datepicker.defaults.autoclose = true;
これを試して:
$('#selectDate').datepicker().on('changeDate', function(ev)
{
$('.datepicker').hide();
});
Datepickerを適用したテキストボックスが複数ある場合、古いソリューションで問題が発生する可能性があります。代わりにこれを試してください。
$('.datepicker').datepicker({
format: "dd/mm/yyyy",
autoclose: true,
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
これを見てください https://github.com/eternicode/bootstrap-datepicker/issues/5
注:jqueryのクラスセレクターを使用していることを忘れないでください。そのため、datepickerクラスをテキストボックスに適用する必要があります。
プロジェクトを保存して更新すると、これでうまくいくはずです。
私にとっては、bootstrap-datepickerドキュメントのタイプミスであることがわかりました。 「autoclose:true」の代わりに「autoClose:true」です。
それが役に立てば幸い。
// 10000%の作業bootstrap-datepicker.jsファイルに移動します
これを検索:
'mousedown touchstart': $.proxy(function(e){
// Clicked outside the datepicker, hide it
if (!(
this.element.is(e.target) ||
this.element.find(e.target).length ||
this.picker.is(e.target) ||
this.picker.find(e.target).length
)) {
this.hide(); //remove this
}
}, this)
}]
];
},
これは私のために働いています。
$(".date-picker").datepicker( {
format: "yyyy-mm-dd",
}).on('change', function (ev) {
$(this).datepicker('hide');
});
クラスのデフォルトのdatepickerでdivにカーソルを合わせると。カレンダーコントロールが表示されます。 Mouseleaveでは、表示されなくなります。
$(document).on("focus", ".defaultdatepicker", function () {
$(this).datepicker({
format: 'dd/mm/yyyy',
todayHighlight: 'TRUE',
autoClose: true,
});
$('#datepicker').css({ "opacity": "1" });
});
$('.defaultdatepicker').on('mouseleave', function () {
$('.datepicker').fadeOut(function () {
$('.formattedStartDate').attr('class', 'formattedStartDate');
$('#datepicker').css({ "opacity": "0" });
});
});