jQuery Datepicker onClose

时间:2016-11-01 18:02:48

标签: javascript jquery datepicker datatables filtering

我有一个按日期过滤dataTables的代码。问题是代码工作正常,但只有当用键盘输入日期而不是像图像那样选择日期时:

datePicker problem

如何在datapicker中设置onClose选项:

    $(document).ready(function(){
        $('#data .input-daterange').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            format: "dd-mm-yyyy",
            onClose: ????????????????
            },
        });

        /* Add event listeners to the two range filtering inputs */
        $('#min, #max').keyup( function() { oTable.draw(); } );
    });

使用此代码配置的dataTables中的过滤器工作?

    /* Function for date filter */
    jQuery.fn.dataTableExt.afnFiltering.push(
        function( oSettings, aData, iDataIndex ) {
            var iMin = document.getElementById('min').value;
            var iMax = document.getElementById('max').value;

            var iMinimo_year = iMin.substring(6,10);
            var iMinimo_month = iMin.substring(3,5);
            var iMinimo_day = iMin.substring(0,2);
            var iMinimo = iMinimo_year.concat(iMinimo_month,iMinimo_day);

            var iMaximo_year = iMax.substring(6,10);
            var iMaximo_month = iMax.substring(3,5);
            var iMaximo_day = iMax.substring(0,2);
            var iMaximo = iMaximo_year.concat(iMaximo_month,iMaximo_day);

            var iCol = 5;
            var iDate_year = aData[iCol].substring(6,10);
            var iDate_month = aData[iCol].substring(3,5);
            var iDate_day = aData[iCol].substring(0,2);
            var iDate = iDate_year.concat(iDate_month,iDate_day);

            if ((iMinimo === "" && iMaximo === "") || (iMinimo <= iDate && iMaximo === "") || (iMinimo === "" && iMaximo >= iDate) || (iMinimo <= iDate && iMaximo >= iDate)) {
                return true;
            } else {
                return false;
            }
        }
    );

HTML部分是:

          `<div class="form-group col-md-offset-4" id="data">
                <label class="font-noraml">Seleccione rango de fechas de ingreso de solicitud a filtrar</label>
                <div class="input-daterange input-group" id="datepicker">
                    <input type="text" class="input-sm form-control" name="min" id="min" value="<?php echo date('');?>"/>
                    <span class="input-group-addon">a</span>
                    <input type="text" class="input-sm form-control" name="max" id="max" value="<?php echo date('d-m-Y');?>" />
                </div>
            </div>

`

1 个答案:

答案 0 :(得分:0)

我认为您正在寻找onSelect

  

选择日期选择器时调用。该函数接收所选日期作为文本,并将datepicker实例作为参数接收。这指的是相关的输入字段。

像这样的东西

$(document).ready(function(){
    $('#data .input-daterange').datepicker({
        todayBtn: "linked",
        keyboardNavigation: false,
        forceParse: false,
        autoclose: true,
        format: "dd-mm-yyyy",
        onSelect: function(dateVal) {
            alert(dateVal); //Method to call when user picks a date
        },
        onClose: function(dateVal) {
            alert(dateVal); //Method to call when user closes the date picker
        },
    });
});