2014-09-20 80 views
0

當我選擇一個日期時,我想修改它。 當我選擇一個月或一年而不選擇一天時,我嘗試更改輸入中的日期。 我找不到解決方案。 感謝Pikaday:修改月份或年份而不點擊日期

HTML

<style> 
    div.pika-label:hover{ 
    color:#ff9705; 
} 
</style> 
<input type="text" name="start_date" id="start_date"> 
<input type="text" name="end_date" id="end_date" > 

JS

var start_date = new Pikaday({ 
    format: 'DD/MM/YYYY', 
    field: document.getElementById('start_date'), 
    onSelect: function() { 
     end_date.setMinDate(this.getDate()); 
    } 
}); 
var end_date = new Pikaday({ 
    format: 'DD/MM/YYYY', 
    field: document.getElementById('end_date'), 
    onSelect: function() { 
     start_date.setMaxDate(this.getDate()); 
    } 
}); 
// I want to collect month data and create a new date with Pikaday.setDate() 
jQuery('.pika-select-month').on('change', function() { 
    alert(this.value); 
}); 

http://jsfiddle.net/madvic/nqakkru1/10/

回答

0

這不是你綁定change事件的時刻,因爲工作,選擇可能尚未在DOM存在。嘗試綁定這樣的:

jQuery(document).on('change', '.pika-select-month', function() { 
    alert(this.value); 
}); 

至於更改日期的,Pikaday似乎有一些這方面的輔助方法。

0

有了您的幫助,我更改值:

JS

jQuery(document).on('change', '.pika-select-month', function() { 
    pika_modif_date('month', this.value); 
}); 

jQuery(document).on('change', '.pika-select-year', function() { 
    pika_modif_date('year', this.value); 
}); 


function pika_modif_date(type, value_change){ 
    var pik_obj; 
    // identifying object 
    if(start_date.isVisible()){ 
     pik_obj = 'start_date'; 
    } 
    else{ 
     pik_obj = 'end_date'; 
    } 
    var actual_date; 
    // Date of the object 
    eval('actual_date = '+pik_obj+'.getDate();'); 
    // If date not exist 
    if (actual_date == null){ 
     return; 
    } 
    // Modify month or yeah 
    if('month' == type){ 
     actual_date.setMonth(value_change); 
    } 
    else{ 
     actual_date.setFullYear(value_change); 
    } 
    // Format for set to pikaday 
    year = 1900 + actual_date.getYear(); 
    eval(pik_obj+'.setDate(new Date(' + year +','+ actual_date.getMonth() +','+ actual_date.getDate() +'), 1);'); 
} 

http://jsfiddle.net/madvic/nqakkru1/12/

相關問題