jQuery往返城市和日期查询实例讲解

$(function(){
  $("#arrcity").suggest(citys,{
    hot_list:commoncitys,
    attachObject:"#suggest"
  });
  $("#city2").suggest(citys,{
    hot_list:commoncitys,
    attachObject:"#suggest2"
  });
});

上述代码实现了输入查询城市，调用城市数据的功能。hot_list:commoncitys是指初始的热门城市，attachObject:”#suggest”是设置输入时关联的显示城市列表的DIV。
接下来要加入控制日历的代码。
我们需要控制日历的有效日期，即显示当前日期，在当前日期前的日期都不能选中，因为你不可能选择已经过去的日期作为出发日期。还有就是要显示连续的两个月的日历。代码如下：

today=new Date();
var year = today.getFullYear();
var month = today.getMonth();
var day = today.getDate();
$("#startdate,#enddate").css("color","#aaa").attr("value","yyyy-mm-dd");
$("#startdate,#enddate").datepicker({
  minDate: new Date(year, month, day+1),
  numberOfMonths: 2,
  onClose:function(){
   $(this).css("color","#000");
  }
});

代码首先获取了当前日期（即今天），然后初始日期输入框的内容和样式，再调用detepicker插件，设置最小日期为当前日期，设置numberOfMonths为连续的两个月，此外当选择日期后，调用函数将输入框的样式改变。将以上代码追加到城市输入查询代码的后面即可。
如此，你的城市和日期选择功能已经实现。本文未涉及到日期的验证，如返回日期不能小于出发日期，这个就留给大家去想吧。

以上就是如何使用jQuery实现城市查询和日历显示的整个流程，希望对大家的学习有所帮助。