本文使用Datepicker插件jQuery UI库控制日历和城市插件输入提示。
XHTML
出发城市：<输入类型文本name=arrcityclass=输入
id=arrcity />
目的地城市：<输入类型文本name=过境class=输入
id=2 />
出发日期：<输入类型文本name=开始日期class=输入
id =开始日期/ >
返回日期：<输入类型文本name=EndDateclass=输入
id=EndDate />
设计城市和日期的输入框，注意的div #使用建议和DIV # suggest2两div来显示城市名单，不显示默认的CSS控制。
CSS
输入{ border: 1px solid # 999 }
。qline {线高度：24px；保证金：10px }
#建议，# suggest2 {宽度：200px；}
灰色；颜色：灰色；}
。ac_results {背景：# FFF；边框1px solid # 7f9db9；位置：绝对的；
Z指数：10000；显示：无；}
。ac_results UL { margin: 0；padding: 0；列表样式：无；}
李。ac_results {白空间：nowrap；文字装饰：没有显示：块；
颜色：# 05a；填充：1px 3px；}
。ac_results李{ border: 1px solid # FFF；线高度：18px }
。ac_over，。ac_results李：悬停{背景：# c8e3fc；}
李。ac_results跨度{浮动权；}
。ac_result_tip {底部边框：1px冲# 666；padding: 3px；}
主要样式是控制城市查询的外观，而日历控件的样式仅使用jQuery UI的样式：
jQuery
首先，要引用主要的Javaｓｃｒｉｐｔ。
注意，aircity.js是在一个城市name.j.suggest.js表单数据数组的输入和查询控制的城市，你可以直接下载。
主要页面是使用jQuery。
$（函数（）{（））
$（# arrcity）。建议（市，{
hot_list：commoncitys，
attachobject：#建议
}）；
$（# 2）。建议（市，{
hot_list：commoncitys，
attachobject：# suggest2
}）；
}）；
上面的代码实现了城市功能、城市的数据，和城市的数据。hot_list：commoncitys指最初的热点城市，和attachobject：#建议是div的城市列表，连接时输入设置。
接下来，添加控制日历的代码。
我们需要控制日历的有效日期，即显示当前日期，以及当前日期未被选中的日期，因为您不能选择已经用作离开日期的日期，也就是显示两个月的日历：
今天=新日期（）；
VaR年= today.getfullyear（）；
VaR月= today.getmonth（）；
VaR天= today.getdate（）；
$（#日期，# EndDate）。Css（颜色
$（#日期，# EndDate）。Datepicker（{
mindate：新的日期（年、月、日+ 1），
numberofmonths：2，
OnClose：函数（）{
美元（这个）。Css（颜色）
}
}）；
代码首先获取当前日期（今天），然后输入框的内容和风格的初始数据，然后调用detepicker插件，设置为当前日期的最小日期，连续两个月的numberofmonths，另外在选择日期，调用函数改变输入框的风格。添加上述代码输入的城市查询代码后面。
这样，你的城市和日期选择功能就已经实现了。本文没有提到核实日期，比如返回日期不能少于出发日期，这是留给大家来考虑的。
以上是如何使用jQuery实现城市查询和日历显示的全过程，希望能对您有所帮助。
