私のサイトでは bootstrap-datepicker を使用しています。日付ピッカーは、検索フィルターを定義するために使用されます。 datepicker入力要素の初期値を空にする必要があるので、検索結果の日付フィルターは導入されません。ユーザーがDatepickerにリンクされたテキスト入力をクリックすると、Datepickerポップアップボックスで翌月の最初の日が選択されます。
問題:最初の日付を設定すると(以下に示すように)、テキスト入力は今日の日付が入りますが、これは私が望むものではありません。ただし、最初の日付を設定しない場合、日付ピッカーは1970年代を示します。私は何をすべきか?
類似: jQueryUI Datepicker のデモ
JSコード
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
HTMLコード
<input type="text" id="listing_filter_available" class="input-small" placeholder="Date Available" />
失敗した試行
Datepickerはテキスト入力elをクリックしてもポップアップしません
$(function() {
var now = new Date();
var nextMonth = new Date();
nextMonth.setDate(1);
nextMonth.setMonth(now.getMonth() + 1);
var prettyDate = nextMonth.getMonth() + '/' + nextMonth.getDate() + '/' + nextMonth.getFullYear();
$('#listing_filter_available').val(''); // clear the date filter
$('#listing_filter_available').click( function() {
$('#listing_filter_available').val(prettyDate);
$('#listing_filter_available').datepicker();
});
});
非常によく似たユースケースに遭遇しました。 bootstrap-datepicker.jsにいくつかの微調整を加えることで、私はそれを機能させることができたと信じています。
スクリプトは2か所で編集する必要があります。
日付フィールドについては、日付(this.date)がUnixの開始日(たとえば、空白の日付)に設定されているかどうかを確認しています。その場合は、終了してフィールドを空白のままにします。
(行:95-約)
setValue: function () {
// EDIT - Don't setValue if date = unix date start
if (DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format)) return false;
// END EDIT
ドロップダウンカレンダーについては、日付(this.date)がUnixの開始日に設定されているかどうかも確認しています。その場合は、日付を今日に設定します。これは、ユーザーが日付フィールドをクリックすると、1970年2月ではなく現在の月が表示されるようにするためです。
(行:144-約)
塗りつぶし:関数(){
// EDIT - Set date in fill to today if date is "blank" (eg Unix start date)
var d = ((DPGlobal.formatDate(this.date, this.format) == DPGlobal.formatDate(new Date(1970, 1, 1, 0, 0, 0), this.format))) ? new Date() : new Date(this.viewDate),
// original code
// var d = new Date(this.viewDate),
// END EDIT
それで十分です。私はこれを自分のソリューションに実装したばかりなので、誰かが問題を見つけたり、より良い提案があれば、ぜひ聞いてみたいと思います。
これを行うにははるかに簡単な方法があります!値を設定するには
$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);
空白の値を設定するには
$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');
私は同様の問題に遭遇し、これは私にとってはうまくいきます。
$(".date-picker").datepicker("setDate", "");
したがって、ページが読み込まれると、デフォルトで空になり、フィールドは必要ないため、日付を選択する必要がなく、コントローラーがそれを処理するか、日付を選択してコントローラーが処理します。同様に。
最近のバージョンのブートストラップでは、Bootstrap V3.3.6&Boostrap-timepicker V0.5.2を使用しています。うまくいき、簡単に:
$('#txtTimepicker').timepicker().val('');
私の個人的なケースでは、MVCかみそり構文を使用してvalセット内で条件チェックを行い、「追加」と「編集」を区別します。
$('#txtTimepicker').timepicker().val('@(Model.Created_Date == null ? "" : Model.Created_Date.ToString("H:mm tt"))');
鉱山を必要に応じて100%動作させるために、入力値と次のオプションを明示的に設定します。
.timepicker({ format: 'HH:mm:ss', 'defaultTime' : 'value', 'showMeridian': false, 'showSeconds': true, 'disableFocus' : false})
その他のオプションについては、ソースコードファイルまたは this リンクを確認してください
bootstrap v3.1.1および
$('#listing_filter_available').datepicker('setValue', nextMonth);
うまくいきませんでした。
あなたが使用する必要があります
$('#listing_filter_available').datepicker('setDate', nextMonth);
日付ピッカーコントロールを設定する
Bootstrap-datepicker.jsを編集しないと不可能です
デフォルトの日付はvalue =から取得され、空のままにすると、1970年1月1日(UNIXの日付の開始)に対応します。
たとえあなたが大きな脂肪の賞金を問題に置いたとしても、あまりにも多くの仕事があります。
別のプラグインを見つけることをお勧めします。
Twitterブーストラップとの非互換性があるため、jQuery UIのdatePickerについてはよくわかりません https://github.com/Twitter/bootstrap/issues/156
最新バージョン
$("input[type=date]").datepicker({ defaultViewDate: {} });
ソース: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate
そのような機能が見つからない場合は、ソースを編集しないでください。賢くあれ。 CSSクラス「active」を探して動的に削除するか、スタイルシートのルールをオーバーライドします。
たとえば、このルールを上書きします(日付ピッカーにはより強力なセレクターを使用します)。
datepicker td.active, .datepicker td.active:hover {
background-color: #006dcc;
background-image: linear-gradient(to bottom, #0088cc, #0044cc);
background-repeat: repeat-x;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #fff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
または、jsを使用してこのクラスを動的に削除します。
私は同じ問題を抱えていました、私はこの回避策を思いつきました、私は日付を取得する関数を作りました:
getDate: function (input) {
if ($(input).val() == '') {
return '';
}
return $(input).data('datepicker').date;
}
注:将来的に日付ピッカープラグインを変更する可能性があるため、すべてのゲッターとセッターを標準化しようとしています
これをお試しください...
これは私のお気に入りです
$('#datetimepicker').datetimepicker({
defaultDate:'',
});