2010-06-29 25 views
8

我正在使用jQuery UI Datepicker作爲項目,但需要今天按鈕才能在用戶點擊該按鈕時將日期輸入到文本字段中。默認情況下,它只是選擇日期,但不會輸入到該字段中。我猜這隻需要一個我的jQuery UI文件的快速修改,但是我該怎麼改?謝謝。jQuery UI Datepicker Today鏈接

編輯:我試過這個:http://dev.jqueryui.com/ticket/4045但它不工作!

+0

有沒有更新?儘快爲項目提供此功能。謝謝。 – Cameron 2010-06-29 13:01:26

回答

17

我找到了一個解決方案,在這裏工作:http://forum.jquery.com/topic/jquery-ui-datepicker-today-button。只是使用jQuery的這個片段(我只是把它與我的日期選擇器初始化代碼):

$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide'); 
}); 

我是焦點將保持在輸入框中單擊「今天」按鈕後,這意味着唯一的問題你不能再次點擊它來選擇不同的日期。這可以通過後面添加模糊()是固定的:

$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); 
}); 

我也不喜歡在「今天」按鈕造型 - 也許這只是我的主題什麼的,但今天按鈕是那種灰色的與「完成」按鈕相比。這可以固定在下面的CSS(可針對不同的主題不同,我不知道):

/* This edit gives five levels of specificity, thus making it override other styles */ 
.ui-datepicker div.ui-datepicker-buttonpane button.ui-datepicker-current { 
    font-weight: bold; 
    opacity: 1; 
    filter:Alpha(Opacity=100); 
} 
+1

你給的CSS,只有當我在所有其餘的(.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current)之前添加.ui-datepicker時,才爲我工作。 – 2011-10-26 10:40:59

+1

@Niels這是由於特殊性規則。我將編輯A以反映適當的特異性。 – jcolebrand 2011-11-16 17:00:44

+1

使用最新版本1.8.16 Jquery。許多其他黑客/覆蓋已過時,不工作。 – Doomsknight 2012-02-09 17:39:07

6

我意識到這是一個遲到的答覆有點,但我只是跑在這個問題和解決方案證明作品像一個魅力。

但是,按鈕樣式問題是由jQuery的ui類造成的。 我下面的代碼添加到日期文本輸入的點擊動作:

$('.date').click(function() { 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); 
}); 

這消除了錯誤的類,並添加正確的類的按鈕,使它同爲「完成」按鈕。 它應該無關緊要你使用的主題。 爲了完整起見,這裏是我的全部代碼:

$('.date').datepicker({ 
    dateFormat: 'yy-mm-dd', 
    showButtonPanel: true 
}).click(function() { 
    $('button.ui-datepicker-current').removeClass('ui-priority-secondary').addClass('ui-priority-primary'); 
}); 
$('button.ui-datepicker-current').live('click', function() { 
    $.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide').blur(); 
}); 

只需添加一個<input type="text" class="date" value="" />,你是好去。

+0

感謝您提供這一點 - 這是有幫助的。雖然,我注意到,點擊「今日」按鈕後,它變回灰顯。有關如何防止這種情況的任何想法? – 2018-03-07 04:02:56