Question

我的日期选择工作效果很好，但只要选择/更改“#todate”日期，我只需要用所选日期更新a（#daterange）标记：

$(function () {

    var picker_from = $( '#fromdate' ).pickadate({
        onSelect: function() {
            var fromDate = createDateArray( this.getDate( 'yyyy-mm-dd' ) )
            picker_to.data( 'pickadate' ).setDateLimit( fromDate )
        },
        format: 'mmm dd, yyyy',
        formatSubmit: 'yyyy-mm-dd'
    });
    var picker_to = $( '#todate' ).pickadate({
        onSelect: function() {
            var toDate = createDateArray( this.getDate( 'yyyy-mm-dd' ) )
            picker_from.data( 'pickadate' ).setDateLimit( toDate, 1 )
        },
        format: 'mmm dd, yyyy',
        formatSubmit: 'yyyy-mm-dd'
    });
    function createDateArray( date ) {
        return date.split( '-' ).map(function( value ) { return +value })
    };

});

我找不到使用此datepicker插件执行此操作的功能。

Answer 1

您需要为textbox编写onchange函数：

$('#todate').change(function () {
    $('.daterange').text($('#fromdate').val() + '-' + $(this).val());
});

这是jsfiddle

Answer 2

我不确定如何格式化日期，但是将它们放在a标记内，这就是我所做的：

Fiddle work

将一些id添加到span。

<a href="#" class="daterange"><span id="numfrom">Dec 21, 2012 </span>-<span id="numto"> Jan 20, 2013</span></a>

编辑onSelect函数并附加于此：

$('#numfrom').text(fromDate); // For the fromDate section

最终功能变为：

var picker_from = $('#fromdate').pickadate({
    onSelect: function () {
        var fromDate = createDateArray(this.getDate('yyyy-mm-dd'));
        picker_to.data('pickadate').setDateLimit(fromDate);
        $('#numfrom').text(fromDate);
    },
    format: 'mmm dd, yyyy',
    formatSubmit: 'yyyy-mm-dd'
});
var picker_to = $('#todate').pickadate({
    onSelect: function () {
        var toDate = createDateArray(this.getDate('yyyy-mm-dd'));
        picker_from.data('pickadate').setDateLimit(toDate, 1);
        $('#numto').text(toDate);
    },
    format: 'mmm dd, yyyy',
    formatSubmit: 'yyyy-mm-dd'
});

jQuery datepicker - 更新值

2 个答案:

Fiddle work