2014-04-01 53 views
0

我已經使用「bootstrap-datetimepicke」,我有一個問題,同時清除使用jQuery的文本框。明確的文本框值使用jquery

我的html代碼:

<div class="input-group datetimepicker4"> 
    <input id="from" name="from" value="<?php echo $from ?>" placeholder="from" data-format="yyyy-MM-dd" readonly="readonly" type="text" style="background-color: #fff"> 
    <span class="input-group-addon add-on"> 
     <i data-time-icon="icon-time" data-date-icon="icon-calendar" class="icon-calendar"></i> 
    </span> 
</div> 
<button class="btn btn-default" type="reset" name="reset">Reset</button> 

使用下面的代碼我試圖將文本框的值重置:

$(function() { 
    $('.datetimepicker4').datetimepicker({ 
     pickTime: false, 
     maskInput: true, 
    }); 
}); 


$(document).ready(function() { 
    $('button[type="reset"]').click(function() { 
     $('#from').val('');  
     console.log($('#from').val()); 
    }); 
}); 

按下按鈕,檢查控制檯它顯示了一個空值,該值之後當文本框值保持舊值時輸入正確(輸入值由腳本填充,但用戶應能夠在重置按鈕被單擊時重置該值)。

我將按鈕類型從「重置」更改爲「按鈕」,現在出現了另一個問題!

$(document).ready(function() { 
    $('button[type="button"]').click(function() { 
     $('#from').val('');  
     console.log($('#from').val()); 
    }); 
}); 

當按鈕被點擊它的值不再被示出在打開檢查元件窗口顯示的舊值這帶來提交表單之後發佈相同的值。

回答

1

問題是因爲與數據選擇器相關的input被隱藏,所以你沒有改變正確的值。如果您檢查API,則可以看到您需要使用setValue方法更新字段的值,以使隱藏字段和可見字段保持同步。試試這個:

$('.datetimepicker4').data('datetimepicker').setDate(null); 
+0

上面的鏈接是不正確的。我編輯了網址。這裏是文檔:http://tarruda.github.io/bootstrap-datetimepicker/。但我不知道如何使用setDate函數...! –

+0

它仍然在該頁面中列出。我已經爲你更新了這個例子。 –

+0

已經嘗試並得到此錯誤:未捕獲TypeError:無法調用未定義的方法'setDate' –