生日：無需點擊日期即可修改月份或年份

Question

選擇日期后，我想對其進行修改。 當我選擇一個月或一年而不選擇一天時，我嘗試更改輸入中的日期。 我找不到解決方法。 謝謝

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

Answer 1

它不起作用，因為在您綁定change事件時，選擇可能尚未在DOM上存在。 嘗試這樣綁定：

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

從更改日期開始， Pikaday似乎為此提供了一些輔助方法。

Answer 2

在您的幫助下，我更改了值：

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/