javascript - bootstrap-datepickerで日付を最初は空に設定します

Question

私は自分のサイトでbootstrap-datepickerを使用しています。日付ピッカーは、検索フィルターを定義するために使用されます。datepicker入力要素の初期値を空にする必要があるため、検索結果に日付フィルターが導入されません。ユーザーがDatepickerにリンクされたテキスト入力をクリックすると、Datepickerポップアップボックスで翌月の初日が選択されます。

問題：最初の日付を設定した場合（以下に示すように）、テキスト入力に今日の日付が入力されますが、これは私が望むものではありません。ただし、最初の日付を設定しないと、日付ピッカーに1970年代が表示されます。私は何をすべきか？

類似：jQueryUIDatepickerのデモ

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" />

失敗した試み

テキスト入力elをクリックしてもDatepickerがポップアップしません

$(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();
    });

});

score 11 · Accepted Answer

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

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

空白の値を設定するには

$('#listing_filter_available').datepicker();
$('#listing_filter_available').val('');

score 7 · Accepted Answer

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

私はあなたがする必要があるのはそれだけだと信じています。私はこれを私のソリューションに実装したばかりなので、誰かが問題を見つけたり、より良い提案があれば、聞いてみたいです。

score 3 · Accepted Answer

私は同様の問題に遭遇しました、そしてこれは私のために働きます。

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

したがって、ページが読み込まれると、デフォルトで空になります。フィールドは不要なので、日付を選択する必要はありません。コントローラーがそれを処理します。または、日付を選択してコントローラーが処理します。同じように。

score 3 · Accepted Answer

Bootstrapの最近のバージョンでは、BootstrapV3.3.6とBoostrap-timepickerV0.5.2を使用していますが、次のように機能します。

$('#txtTimepicker').timepicker().val('');

私の個人的なケースでは、MVC razor構文を使用して、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})

その他のオプションについては、ソースコードファイルまたはこのリンクを確認してください

score 2 · Accepted Answer

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

デフォルトの日付はvalue=から取得され、空のままにすると、01-01-1970（unix date start）に対応します。

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

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

Twitter Boostrap https://github.com/twitter/bootstrap/issues/156との互換性がないため、jQueryUIdatePickerについてはよくわかりません。

score 2 · Accepted Answer

私はブートストラップv3.1.1と

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

私のために働いていませんでした。

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

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

日付ピッカーコントロールにデータを入力します

score 2 · Accepted Answer

最新バージョンの場合

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

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

score 1 · Accepted Answer

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

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

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

注：将来的にdatepickerプラグインを変更できるようにするために、すべてのゲッターとセッターを標準化しようとしています。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

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

javascript - bootstrap-datepickerで日付を最初は空に設定します

10 に答える 10

Related

Reference