設置日期初始爲空引導日期選擇器

我在我的網站中使用了bootstrap-datepicker。日期選擇器將用於定義搜索過濾器。我需要datepicker input元素的初始值爲空，所以它不會爲搜索結果引入日期過濾器。當用戶點擊鏈接到Datepicker的文本輸入時，Datepicker彈出框應該選擇下個月的第一天。設置日期初始爲空引導日期選擇器

問題：如果我要設置一個初始日期（如下圖所示），輸入文本會與今天的日期填充這不是我想要的。但是，如果我不設置最初的日期，datepicker將顯示20世紀70年代。我該怎麼辦？

類似：演示了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" />

失敗的嘗試

日期選擇不上單擊文本輸入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(); 
    }); 

});

來源

2012-06-19 Nyxynyx

我懷疑這個問題是相關的與Twitter bootsrap日期選擇器的最新版本。很想聽聽你使用的是哪個版本。 AFAIK在輸入字段上初始化日期選擇器不會再給它任何默認值。這讓我覺得目前理想的解決方案就是升級到某個版本..至少1.3.1版本似乎並不需要任何瘋狂的手段來完成這項工作。 – Timo

我只是遇到了一個非常類似的用例。通過對bootstrap-datepicker.js的一些調整，我相信我已經得到了它的工作。

您需要在兩處編輯腳本。

對於日期字段，我正在檢查日期（this.date）是否設置爲Unix開始日期（.e.g空白日期）。如果是這樣，請退出並將該字段留空。

（線：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

我相信這是所有你需要做的。我剛剛在我的解決方案中實現了這一點，所以如果有人發現任何問題或有更好的建議，我很樂意聽到。

來源

2013-01-10 18:02:31

不幸的是，它不能與當前版本一起工作。 – foxx

現在您需要將語言添加到formatDate：DPGlobal.formatDate（this.date，this.format，this.language）。另外最好將unix的日期設置爲這個新的日期（「1970-01-01T00：00：00Z」），這樣它就不會被時區調整。 –

如果有人在更高版本中查找此內容。在setValue函數內部，添加代碼：\t \t if（newDate.length == 0）{ \t \t return false; \t \t}它會跳過默認日期。當你需要一個空白文本框開始搜索時，這非常適用於 –

它不會不進行編輯的引導，datepicker.js

默認日期來自值是可能=而且如果你離開它清空它對應於01-01-1970（unix date start）。

即使你在這個問題上放了一大筆獎金，也有太多的工作。

我建議你找一個不同的插件。

我不那麼肯定了jQuery UI日期選擇器，因爲有不兼容與Twitter自舉https://github.com/twitter/bootstrap/issues/156

來源

2012-06-19 21:22:25 baptme

試試這個...

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

來源

2012-08-22 22:21:44 user1618273

Thnx會試試:) – Nyxynyx

有一個更簡單的方法來做到這一點！要設置值

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

將一個空值

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

來源

2013-11-06 17:00:09

不適用於我 –

如果不工作：它取決於你在哪裏使用$（'＃listing_filter_available'）.val（''） ;在關閉父函數（）塊之前使用它。 – sambua

我有同樣的問題，我用這個解決辦法就出來了，我做了一個函數來檢索日期：

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

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

注：我試圖標準化每一個吸氣和設置器爲了有可能在未來更改日期選擇器插件

來源

2014-04-29 14:30:11 nrgjack

我與引導V3.1.1工作和

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

並沒有爲我工作。

你必須使用

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

填充日期選擇器控制

來源

2014-07-03 04:37:36

我遇到了類似的問題，這對我的作品。

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

所以現在當我的頁面加載默認爲空，則不需要現場所以他們沒有選擇一個日期和我的控制器會照顧那個，或者他們可以選擇一個日期和控制器也會照顧它。

來源

2014-10-31 22:14:55

如果您找不到這樣的功能，請不要編輯源代碼。放聰明點。查找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。

來源

2015-01-25 18:56:33

在最近版本的bootstrap中，我使用的是Bootstrap V3.3.6 & Boostrap-timepicker V0.5。2，下列作品簡單地進行：

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

對於我個人來說，我做VAL內部條件檢查設置使用MVC剃刀語法「添加」，「編輯」來區分，像這樣：

$('#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鏈接

來源

2016-04-06 12:33:14 EaziLuizi

至於最新版本

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

來源：http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#defaultviewdate

來源

2016-11-09 10:44:53 CodeReaper

設置日期初始爲空引導日期選擇器

回答

相關問題