【问题标题】:Update Datepicker date via number of days in Input Field?通过输入字段中的天数更新 Datepicker 日期?
【发布时间】:2013-02-11 17:44:40
【问题描述】:

我希望根据输入字段 id="totaldays" 中输入的天数来更改日期选择器 id="datepicker_end" 的日期。

输入字段id="totaldays"有2个功能

1) 它计算 2 个日期选择器之间的天数(现在可以使用,请参阅 JSFiddle http://jsfiddle.net/Deif/KLpq7/211/) - 我想保留此功能。

2) 如果用户决定直接在输入字段中输入天数,那么我希望第二个日期选择器 id="datepicker_end" 根据输入字段的天数进行更新。

这里的概念是用户可以输入他们想要的天数或在 2 个日期之间进行选择...

我的JSFiddle如下http://jsfiddle.net/Deif/KLpq7/211/

我找不到任何好的例子,所以希望我在上面解释得很好。

【问题讨论】:

  • 这应该可以帮助你。确保在演示下方打开“查看源代码”。 jqueryui.com/datepicker/#date-range
  • Dom,是的,这就是我现在在 JSFIddle 中所做的工作,我不知道如何编辑该字段以使其更新日期

标签: javascript jquery twitter-bootstrap datepicker


【解决方案1】:

你的意思是这样的吗?

function days() {
            var a = new Date($("#datepicker_start").val()),
                b = new Date($("#datepicker_end").val()),
                c = 24*60*60*1000,
                diffDays = Math.round(Math.abs((a - b)/(c)));
            $("#totaldays").val(diffDays);
}

function formatDate(_d){
     var d = new Date(_d);
    var curr_date = d.getDate();
    if(curr_date < 10)
        curr_date = "0" + curr_date;

    var curr_month = d.getMonth() + 1; //Months are zero based
    if(curr_month < 10)
        curr_month = "0" + curr_month;

    var curr_year = d.getFullYear();   
    return curr_month + '/' + curr_date + '/' + curr_year;
}

$('#totaldays').change(function(){        
    if($(this).val() != ''){
        var days = $(this).val();
        var start= new Date($("#datepicker_start").val());
        var newStart = start.setDate(start.getDate() + parseInt(days));    
        $("#datepicker_end").val(formatDate(newStart));
    }else{
        $("#datepicker_end").val($("#datepicker_start").val());
    }

});

$('.datepicker')
    .datepicker({format: 'mm/dd/yyyy'})
    .on('changeDate', function(ev){
        days();
        $(this).datepicker('hide').blur();
});

演示:

http://jsfiddle.net/dirtyd77/KLpq7/218/

【讨论】:

  • 很棒的 Dom,非常感谢伙计!这就像一个魅力!度过了我的夜晚!
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-02-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-11-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多