web-dev-qa-db-ja.com

bootstrap-datepickerで最初に日付が空になるように設定する

私のサイトでは 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();
    });

});
javascriptjquerytwitter-bootstrapdatepickerbootstrap-datepicker
17
Nyxynyx

非常によく似たユースケースに遭遇しました。 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

それで十分です。私はこれを自分のソリューションに実装したばかりなので、誰かが問題を見つけたり、より良い提案があれば、ぜひ聞いてみたいと思います。

6
Jason Payne

これを行うにははるかに簡単な方法があります！値を設定するには

$('#listing_filter_available').datepicker();
$('#listing_filter_available').datepicker('setValue', nextMonth);

空白の値を設定するには

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');
11
jshaw.ws

私は同様の問題に遭遇し、これは私にとってはうまくいきます。

$(".date-picker").datepicker("setDate", "");

したがって、ページが読み込まれると、デフォルトで空になり、フィールドは必要ないため、日付を選択する必要がなく、コントローラーがそれを処理するか、日付を選択してコントローラーが処理します。同様に。

3
James Wilson

最近のバージョンのブートストラップでは、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 リンクを確認してください

3
EaziLuizi

bootstrap v3.1.1および

$('#listing_filter_available').datepicker('setValue', nextMonth);

うまくいきませんでした。

あなたが使用する必要があります

$('#listing_filter_available').datepicker('setDate', nextMonth);

日付ピッカーコントロールを設定する

2
Muhammad Waqas Iqbal

Bootstrap-datepicker.jsを編集しないと不可能です

デフォルトの日付はvalue =から取得され、空のままにすると、1970年1月1日（UNIXの日付の開始）に対応します。

たとえあなたが大きな脂肪の賞金を問題に置いたとしても、あまりにも多くの仕事があります。

別のプラグインを見つけることをお勧めします。

Twitterブーストラップとの非互換性があるため、jQuery UIのdatePickerについてはよくわかりません https://github.com/Twitter/bootstrap/issues/156

2
baptme

最新バージョン

$("input[type=date]").datepicker({ defaultViewDate: {} });

ソース： http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate

2
CodeReaper

そのような機能が見つからない場合は、ソースを編集しないでください。賢くあれ。 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を使用してこのクラスを動的に削除します。

1
John Smith

私は同じ問題を抱えていました、私はこの回避策を思いつきました、私は日付を取得する関数を作りました：

getDate: function (input) {
  if ($(input).val() == '') {
    return '';
  }

  return $(input).data('datepicker').date;
}

注：将来的に日付ピッカープラグインを変更する可能性があるため、すべてのゲッターとセッターを標準化しようとしています

1
nrgjack

これをお試しください...

http://aymkdn.github.com/Datepicker-for-Bootstrap/

0
user1618273

これは私のお気に入りです

$('#datetimepicker').datetimepicker({
   defaultDate:'',     
});
0
Hervera