Javascript DataTables+日期选择器按日期范围筛选表

尝试使用两个有界日期选择器实现DataTables按日期范围筛选

目前为止，我很少看到类似的问题，但没有一个答案对我有用

到目前为止，我成功地实现了接口元素，但不知道如何将它们组合在一起以继续。感谢您的帮助

var myTableData= [ { id:1， 姓名：老虎尼克松， 职位：系统架构师， 薪金：32.08万美元， 开工日期：2011/04/25， 办公地点：爱丁堡， 分机号码：5421 }, { id:2， 姓名：Garrett Winters， 职位：会计， 薪金：170750美元， 开工日期：2011/07/25， 办公室：东京， 分机号码：8422 }, { id:3， 姓名：阿什顿·考克斯， 职位：初级技术作者， 薪金：86000美元， 开工日期：2009/01/12， 办公室：旧金山， 分机号码：1562 }, { id:4， 姓名：塞德里克·凯利， 职位：高级Javascript开发人员， 薪金：433060美元， 开工日期：2012/03/29， 办公地点：爱丁堡， 分机号码：6224 }, { id:5， 姓名：艾里佐藤， 职位：会计， 薪金：162700美元， 开工日期：2008/11/28， 办公室：东京， 分机号码：5407 }, { id:6， 姓名：Brielle Williamson， 职位：集成专家， 薪金：372000美元， 开工日期：2012/12/02， 办事处：纽约， 扩展名：4804 }, { id:7， 姓名：Herrod Chandler， 职位：销售助理， 工资：137500美元， 开工日期：2012/08/06， 办公室：旧金山， 扩展名：9608 } ]; $'.datepicker'.datepicker； var myDataTable=$'staff'.DataTable{ sDom:'t'， 数据：myTableData， 栏目：[ {title:'Name'，data:'Name'}， {标题：'位置'，数据：'位置'}， {标题：“办公室”，数据：“办公室”}， {标题：'雇用日期'，数据：'开始日期'}， {标题：'Salary'，数据：'Salary'} ] }; 开始日期： 结束日期： 滤器

---

您必须添加此代码部分以获取日期范围和雇用日期

    $(document).ready(function(){
     $.fn.dataTable.ext.search.push(
     function (settings, data, dataIndex) {
        var min = $('#startdate').datepicker("getDate");
        var max = $('#enddate').datepicker("getDate");
        var hireDate = new Date(data[3]);
        if (min == null && max == null) { return true; }
        if (min == null && hireDate <= max) { return true;}
        if(max == null && hireDate >= min) {return true;}
        if (hireDate <= max && hireDate >= min) { return true; }
        return false;
    }
    );
    });

---

第一个代码部分用于获取日期，第二个代码部分用于再次绘制数据表。

您必须添加此代码部分以获取日期范围和雇用日期

    $(document).ready(function(){
     $.fn.dataTable.ext.search.push(
     function (settings, data, dataIndex) {
        var min = $('#startdate').datepicker("getDate");
        var max = $('#enddate').datepicker("getDate");
        var hireDate = new Date(data[3]);
        if (min == null && max == null) { return true; }
        if (min == null && hireDate <= max) { return true;}
        if(max == null && hireDate >= min) {return true;}
        if (hireDate <= max && hireDate >= min) { return true; }
        return false;
    }
    );
    });

---

第一部分代码用于获取日期，第二部分代码用于再次绘制数据表。

我对您的代码做了一些修改。请参阅下面JavaScript代码段中的注释，其中大部分位于底部，在您的var myDataTable=$'staff'下。DataTable声明：

//我将一些start_date值更改为更新的值，只是为了测试。 var myTableData=[{ id:1， 姓名：老虎尼克松， 职位：系统架构师， 薪金：32.08万美元， 开工日期：2017/04/25， 办公地点：爱丁堡， 分机号码：5421 }, { id:2， 姓名：Garrett Winters， 职位：会计， 薪金：170750美元， 开工日期：2018/07/25， 办公室：东京， 分机号码：8422 }, { id:3， 姓名：阿什顿·考克斯， 职位：初级技术作者， 薪金：86000美元， 开工日期：2019/01/12， 办公室：旧金山， 分机号码：1562 }, { id:4， 姓名：塞德里克·凯利， 职位：高级Javascript开发人员， 薪金：433060美元， 开工日期：2018/03/29， 办公地点：爱丁堡， 分机号码：6224 }, { id:5， 姓名：艾里佐藤， 职位：会计， 薪金：162700美元， 开工日期：2018年11月28日， 办公室：东京， 分机号码：5407 }, { id:6， 姓名：Brielle Williamson， 职位：集成专家， 薪金：372000美元， 开工日期：2018/12/02， 办事处：纽约， 扩展名：4804 }, { id:7， 姓名：Herrod Chandler， 职位：销售助理， 工资：137500美元， 开工日期：2018/08/06， 办公室：旧金山， 扩展名：9608 } ]; var myDataTable=$'staff'.DataTable{ sDom:'t'， 数据：myTableData， 栏目：[{ 标题：“姓名”， 数据：“名称” }, { 标题：“职位”， 数据：“位置” }, { 标题：“办公室”， 数据：“办公室” }, { 标题：“雇用日期”， 数据：“开始日期” }, { 标题：“工资”， 数据：“工资” } ] }; //我在这里实例化了这两个日期选择器，而不是像以前那样一次全部实例化。 //我还更改了dateFormat以匹配数据表中日期的格式。 $startdate.datepicker{ 日期格式：年月日， onSelect:functiondate{//此处理程序启动筛选。 minDateFilter=newDateDate.getTime； myDataTable.draw；//使用筛选的数据重新绘制表。 } }.keyup函数{ minDateFilter=new Datethis.value.getTime； myDataTable.draw； }; $enddate.datepicker{ 日期格式：年月日， onSelect:functiondate{ maxDateFilter=new Datedate.getTime； myDataTable.draw； } }.keyup函数{ maxDateFilter=new Datethis.value.getTime； myDataTable.draw； }; //下面的代码实际执行日期过滤器i ng。 minDateFilter=； maxDateFilter=； $.fn.dataTableExt.afnFiltering.push 功能设置、数据、数据索引{ 如果数据类型。\u日期==“未定义”{ aData.\u date=new DateaData[3].getTime；//您的日期列是3，因此aData[3]。 } 如果minDateFilter&！isNaNminDateFilter{ 如果日期maxDateFilter{ 返回false； } } 返回true； } ; 开始日期： 结束日期：

---

我对你的代码做了一些修改。请参阅下面JavaScript代码段中的注释，其中大部分位于底部，在您的var myDataTable=$'staff'下。DataTable声明：

//我将一些start_date值更改为更新的值，只是为了测试。 var myTableData=[{ id:1， 姓名：老虎尼克松， 职位：系统架构师， 薪金：32.08万美元， 开工日期：2017/04/25， 办公地点：爱丁堡， 分机号码：5421 }, { id:2， 姓名：Garrett Winters， 职位：会计， 薪金：170750美元， 开工日期：2018/07/25， 办公室：东京， 分机号码：8422 }, { id:3， 姓名：阿什顿·考克斯， 职位：初级技术作者， 薪金：86000美元， 开工日期：2019/01/12， 办公室：旧金山， 分机号码：1562 }, { id:4， 姓名：塞德里克·凯利， 职位：高级Javascript开发人员， 薪金：433060美元， 开工日期：2018/03/29， 办公地点：爱丁堡， 分机号码：6224 }, { id:5， 姓名：艾里佐藤， 职位：会计， 薪金：162700美元， 开工日期：2018年11月28日， 办公室：东京， 分机号码：5407 }, { id:6， 姓名：Brielle Williamson， 职位：集成专家， 薪金：372000美元， 开工日期：2018/12/02， 办事处：纽约， 扩展名：4804 }, { id:7， 姓名：Herrod Chandler， 职位：销售助理， 工资：137500美元， 开工日期：2018/08/06， 办公室：旧金山， 扩展名：9608 } ]; var myDataTable=$'staff'.DataTable{ sDom:'t'， 数据：myTableData， 栏目：[{ 标题：“姓名”， 数据：“名称” }, { 标题：“职位”， 数据：“位置” }, { 标题：“办公室”， 数据：“办公室” }, { 标题：“雇用日期”， 数据：“开始日期” }, { 标题：“工资”， 数据：“工资” } ] }; //我在这里实例化了这两个日期选择器，而不是像以前那样一次全部实例化。 //我还更改了dateFormat以匹配数据表中日期的格式。 $startdate.datepicker{ 日期格式：年月日， onSelect:functiondate{//此处理程序启动筛选。 minDateFilter=newDateDate.getTime； myDataTable.draw；//使用筛选的数据重新绘制表。 } }.keyup函数{ minDateFilter=new Datethis.value.getTime； myDataTable.draw； }; $enddate.datepicker{ 日期格式：年月日， onSelect:functiondate{ maxDateFilter=new Datedate.getTime； myDataTable.draw； } }.keyup函数{ maxDateFilter=new Datethis.value.getTime； myDataTable.draw； }; //下面的代码实际上执行日期筛选。 minDateFilter=； maxDateFilter=； $.fn.dataTableExt.afnFiltering.push 功能设置、数据、数据索引{ 如果数据类型。\u日期==“未定义”{ aData.\u date=new DateaData[3].getTime；//您的日期列是3，因此aData[3]。 } 如果minDateFilter&！isNaNminDateFilter{ 如果日期maxDateFilter{ 返回false； } } 返回true； } ; 开始日期： 结束日期：

---

您的示例稍加修改，带有特定的附加值时区独立、有限的年份范围、有限的日期选择器：

//数据定义 var myTableData= [{ id:1， 姓名：老虎尼克松， 职位：系统架构师， 薪金：32.08万美元， 开工日期：2011/04/25， 办公地点：爱丁堡， 分机号码：5421 }, { id:2， 姓名：Garrett Winters， 职位：会计， 薪金：170750美元， 开工日期：2011/07/25， 办公室：东京， 分机号码：8422 }, { id:3， 姓名：阿什顿·考克斯， 职位：初级技术作者， 薪金：86000美元， 开工日期：2009/01/12， 办公室：旧金山， 分机号码：1562 }, { id:4， 姓名：塞德里克·凯利， 职位：高级Javascript开发人员， 薪金：433060美元， 开工日期：2012/03/29， 办公地点：爱丁堡， 分机号码：6224 }, { id:5， 姓名：艾里佐藤， 职位：会计， 薪金：162700美元， 开工日期：2008/11/28， 办公室：东京， 分机号码：5407 }, { id:6， 姓名：Brielle Williamson， 职位：集成专家， 薪金：372000美元， 开工日期：2012/12/02， 办事处：纽约， 扩展名：4804 }, { id:7， 姓名：Herrod Chandler， 职位：销售助理， 工资：137500美元， 开工日期：2012/08/06， 办公室：旧金山， 扩展名：9608 } ]; //地球仪 供将来使用的变量 变量日期选择器=[{ id:'开始日期'， coid:'结束日期'， 值：null， 限制器：“minDate” }, { id:'结束日期'， coid:'开始日期'， 值：null， 限制器：“maxDate” } ]; //将“yy/mm/dd”字符串转换为UTC日期 常量yymddutc=str=>新日期…str.split'/'。映射值，索引=>索引==1？值-：值； //数据表对象定义 var myDataTable=$'staff'.DataTable{ sDom:'t'， 数据：myTableData， 栏目：[{ 标题：“姓名”， 数据：“名称” }, { 标题：“职位”， 数据：“位置” }, { 标题：“办公室”， 数据：“办公室” }, { 标题：“雇用日期”， 数据：“开始日期” }, { 标题：“工资”， 数据：“工资” } ] }; //将日期选择器选项限制为对当前数据集有效的选项 var dates=myDataTable.column3.data.unique.sort； var minDate=日期[0]； var maxDate=日期[dates.length-1]； //日期选择器对象定义 $'.datepicker'.datepicker{ 日期格式：“年/月/日”， 变化月：对， 默认日期：minDate， 变化年：是的， 年份范围：minDate.substr0,4+'：'+maxDate.substr0,4， onSelect：函数selectedDate{ 让datepicker=datepickers.findentry=>entry.id==this.attr'id'； $`${datepicker.coid}`.datepicker'option'，datepicker.limiter，selectedDate； datepicker.value=YYMMDDUTCSelectedate； myDataTable.draw； } }.关于“变化”，函数{ datepickers[datepickers.findIndexitem=>item.id==$this.attr'id'].value=yymmddUTC$this.val； myDataTable.draw； }; //外部搜索功能 $.fn.DataTable.ext.search.pushsettings，行=>{ 让rowDate=yymmddUTCrow[3]；

---

返回rowDate>=datepickers[0]。值| | datepickers[0]。值==null&&rowDate您稍微修改过的示例，具有特定的附加值时区独立、有限的年份范围、有限的日期选择器：

//数据定义 var myTableData= [{ id:1， 姓名：老虎尼克松， 职位：系统架构师， 薪金：32.08万美元， 开工日期：2011/04/25， 办公地点：爱丁堡， 分机号码：5421 }, { id:2， 姓名：Garrett Winters， 职位：会计， 薪金：170750美元， 开工日期：2011/07/25， 办公室：东京， 分机号码：8422 }, { id:3， 姓名：阿什顿·考克斯， 职位：初级技术作者， 薪金：86000美元， 开工日期：2009/01/12， 办公室：旧金山， 分机号码：1562 }, { id:4， 姓名：塞德里克·凯利， 职位：高级Javascript开发人员， 薪金：433060美元， 开工日期：2012/03/29， 办公地点：爱丁堡， 分机号码：6224 }, { id:5， 姓名：艾里佐藤， 职位：会计， 薪金：162700美元， 开工日期：2008/11/28， 办公室：东京， 分机号码：5407 }, { id:6， 姓名：Brielle Williamson， 职位：集成专家， 薪金：372000美元， 开工日期：2012/12/02， 办事处：纽约， 扩展名：4804 }, { id:7， 姓名：Herrod Chandler， 职位：销售助理， 工资：137500美元， 开工日期：2012/08/06， 办公室：旧金山， 扩展名：9608 } ]; //供将来使用的全局变量 变量日期选择器=[{ id:'开始日期'， coid:'结束日期'， 值：null， 限制器：“minDate” }, { id:'结束日期'， coid:'开始日期'， 值：null， 限制器：“maxDate” } ]; //将“yy/mm/dd”字符串转换为UTC日期 const yymddutc=str=>新日期…str.split'/'。映射值，索引=>索引==1？值-：值； //数据表对象定义 var myDataTable=$'staff'.DataTable{ sDom:'t'， 数据：myTableData， 栏目：[{ 标题：“姓名”， 数据：“名称” }, { 标题：“职位”， 数据：“位置” }, { 标题：“办公室”， 数据：“办公室” }, { 标题：“雇用日期”， 数据：“开始日期” }, { 标题：“工资”， 数据：“工资” } ] }; //将日期选择器选项限制为对当前数据集有效的选项 var dates=myDataTable.column3.data.unique.sort； var minDate=日期[0]； var maxDate=日期[dates.length-1]； //日期选择器对象定义 $'.datepicker'.datepicker{ 日期格式：“年/月/日”， 变化月：对， 默认日期：minDate， 变化年：是的， 年份范围：minDate.substr0,4+'：'+maxDate.substr0,4， onSelect：函数selectedDate{ 让datepicker=datepickers.findentry=>entry.id==this.attr'id'； $`${datepicker.coid}`.datepicker'option'，datepicker.limiter，selectedDate； datepicker.value=YYMMDDUTCSelectedate； myDataTable.draw； } }.关于“变化”，函数{ datepickers[datepickers.findIndexitem=>item.id==$this.attr'id'].value=yymmddUTC$this.val； myDataTable.draw； }; //外部搜索功能 $.fn.DataTable.ext.search.pushsettings，行=>{ 让rowDate=yymmddUTCrow[3]；

---

返回rowDate>=datepickers[0]。值| | datepickers[0]。值==null&&rowDate如果数据表中的日期是yyyy-mm-dd h:i:s格式，我需要在s时仅使用yyyy-mm-dd进行搜索，如何执行此操作

---

如何将数据表中的格式设置为yyyy mm dd h:i:s？任何建议都会大有帮助。提前谢谢@Curr1951我省略了yymmddUTC函数的用法，并使用@AndroidNoobie的方法使用getTime获取时间格式来代替日期筛选，因为我的日期时间是yy mm dd h:i:s格式我在开始时遇到了一些困难，无论如何，@Cur195和@AndroidNoobie的答案都有助于完成这项工作。非常感谢，不过在chrome中，datepicker的输入字段以下拉列表的形式显示以前选择的日期，这很烦人，有什么建议可以解决这个问题吗？另外，在过滤一次之后，如何取消选择日期并返回到以前的完整列表？如果这很烦人，很抱歉，但是如果这与此答案不相关，将发布不同的问题。如果数据表中的日期是yyyy mm dd h:i:s格式，并且我只需要使用YY mm dd进行搜索，而在数据表中显示格式为yyyy mm dd h:i:s，如何执行此操作？任何建议都会大有帮助。提前谢谢@Curr1951我省略了yymmddUTC函数的用法，并使用@AndroidNoobie的方法使用getTime获取时间格式来代替日期筛选，因为我的日期时间是yy mm dd h:i:s格式我在开始时遇到了一些困难，无论如何，@Cur195和@AndroidNoobie的答案都有助于完成这项工作。非常感谢，不过在chrome中，datepicker的输入字段以下拉列表的形式显示以前选择的日期，这很烦人，有什么建议可以解决这个问题吗？另外，在过滤一次之后，如何取消选择日期并返回到以前的完整列表？抱歉，如果这是恼人的，但会张贴一个不同的问题，如果这不是相关的这个答案。