Pikaday:修改月份或年份而不点击日期

时间:2014-09-20 12:56:04

标签: javascript

当我选择日期时,我想修改它。 当我选择一个月或一年而不选择一天时,我尝试更改输入中的日期。 我找不到解决办法。 感谢

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/

2 个答案:

答案 0 :(得分:0)

它无法正常工作,因为在绑定change事件的那一刻,DOM上的选择可能还不存在。尝试像这样绑定:

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

在更改日期之前,Pikaday似乎有一些辅助方法。

答案 1 :(得分: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/