jQuery往返城市和日期查询实例讲授,jquery日期查

作者: 网络应用  发布:2019-09-04

基本上旅游网址上都提供了一个城市和日期输入查询的效果。客户在输入框中只需输入城市的拼音只怕简称就足以立时查询到相关城市的名目,选择日期时则是出新五个月的日历控件,只需点选日期就可以,整个操作简捷明了。
正文用到了jquery ui库的datepicker插件来调整天历以及输入城市提醒的插件。

jQuery往返城市和日期查询实例批注,jquery日期查询

多数旅游网址上都提供了三个都会和日期输入查询的作用。客户在输入框中只需输入城市的拼音大概简称就足以立即查询到相关城市的称谓,选拔日期时则是出现八个月的日历控件,只需点选日期就可以,整个操作简捷明了。
本文用到了jquery ui库的datepicker插件来支配日历以及输入城市提醒的插件。

图片 1

XHTML

<div class="qline"> 
  <label for="arrcity">出发城市:</label><input type="text" name="arrcity" class="input" 
id="arrcity" />  
  <div id="suggest" class="ac_results"></div> 
  <label for="city2">目的城市:</label><input type="text" name="city2" class="input" 
id="city2" /> 
  <div id="suggest2" class="ac_results"> </div> 
</div> 
<div class="qline"> 
  <label for="startdate">出发日期:</label><input type="text" name="startdate" class="input" 
id="startdate" /> 
  <label for="enddate">返回日期:</label><input type="text" name="enddate" class="input" 
id="enddate" /> 
</div> 

设计城市和日期的输入框,注意使用了div#suggest和div#suggest2五个DIV是用来彰显城市列表的,私下认可CSS调节为不出示。
CSS

.input{border:1px solid #999} 
.qline{line-height:24px; margin:10px} 
#suggest,#suggest2{width:200px;} 
.gray{color:gray;} 
.ac_results {background:#fff;border:1px solid #7f9db9;position: absolute; 
z-index:10000;display: none;} 
.ac_results ul{margin:0;padding:0;list-style:none;} 
.ac_results li a{white-space: nowrap;text-decoration:none;display:block; 
color:#05a;padding:1px 3px;} 
.ac_results li{border:1px solid #fff; line-height:18px} 
.ac_over,.ac_results li a:hover {background:#c8e3fc;} 
.ac_results li a span{float:right;} 
.ac_result_tip{border-bottom:1px dashed #666;padding:3px;} 

上述样式重假若调控城市查询的外观,而日历控件的体裁大家单独行使jquery ui的体制:

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

jQuery
第一要引用重要javascript:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.js"></script> 
<script type="text/javascript" src="js/aircity.js"></script> 
<script type="text/javascript" src="js/j.suggest.js"></script> 

瞩目aircity.js是以数组的花样积存城市称号等数据。j.suggest.js是决定输入查询城市的,大家可以直接下载使用。
关键看下页面使用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完成城市查询和日历展现的成套流程,希望对大家的上学抱有援救。

相当多旅游网址上都提供了叁个城郭和日期输入查询的作用。客商在输入框中只需输入城市...

图片 2

XHTML

<div class="qline"> 
  <label for="arrcity">出发城市:</label><input type="text" name="arrcity" class="input" 
id="arrcity" />  
  <div id="suggest" class="ac_results"></div> 
  <label for="city2">目的城市:</label><input type="text" name="city2" class="input" 
id="city2" /> 
  <div id="suggest2" class="ac_results"> </div> 
</div> 
<div class="qline"> 
  <label for="startdate">出发日期:</label><input type="text" name="startdate" class="input" 
id="startdate" /> 
  <label for="enddate">返回日期:</label><input type="text" name="enddate" class="input" 
id="enddate" /> 
</div> 

统一准备城市和日期的输入框,注意使用了div#suggest和div#suggest2五个DIV是用来体现城市列表的,暗中认可CSS调节为不显得。
CSS

.input{border:1px solid #999} 
.qline{line-height:24px; margin:10px} 
#suggest,#suggest2{width:200px;} 
.gray{color:gray;} 
.ac_results {background:#fff;border:1px solid #7f9db9;position: absolute; 
z-index:10000;display: none;} 
.ac_results ul{margin:0;padding:0;list-style:none;} 
.ac_results li a{white-space: nowrap;text-decoration:none;display:block; 
color:#05a;padding:1px 3px;} 
.ac_results li{border:1px solid #fff; line-height:18px} 
.ac_over,.ac_results li a:hover {background:#c8e3fc;} 
.ac_results li a span{float:right;} 
.ac_result_tip{border-bottom:1px dashed #666;padding:3px;} 

上述样式首若是决定城市查询的外观,而日历控件的体制我们单独使用jquery ui的样式:

<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 

jQuery
首先要援引首要javascript:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery-ui.js"></script> 
<script type="text/javascript" src="js/aircity.js"></script> 
<script type="text/javascript" src="js/j.suggest.js"></script> 

在意aircity.js是以数组的格局累积城市名称等数码。j.suggest.js是调整输入查询城市的,大家能够一向下载应用。
十分重要看下页面使用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完毕城市查询和日历突显的整套流程,希望对大家的求学抱有辅助。

你恐怕感兴趣的稿子:

  • jQuery输入城市查看地图使用介绍
  • jQuery select表单提交省市区城市三级联合浮动大旨代码
  • jQuery完毕简单的日期输入格式化控件
  • Jquery日期采纳datepicker插件用法实例深入分析
  • jQuery插件datepicker 日期三番五次选用
  • 相近客商体验的Jquery日期、时间接选举拔插件
  • jQuery完成TAB风格的全国省份都会滑动切换效果代码
  • jQuery带时间的日子控件代码分享
  • jQuery UI设置固定日期选用特效代码分享
  • 基于jQuery滑动杆完成买卖日期选取效果

本文由王中王开奖结果发布于网络应用,转载请注明出处:jQuery往返城市和日期查询实例讲授,jquery日期查

关键词: