search

Home >Web Front-end >JS Tutorial >jQuery UI sets fixed date selection special effect code sharing_jquery

jQuery UI sets fixed date selection special effect code sharing_jquery

WBOY
WBOYOriginal
2016-05-16 15:42:101386browse

The example in this article describes how to set a fixed date selection effect in jQuery UI. Share it with everyone for your reference. The details are as follows:
jQuery implements UI setting fixed date selection special effects is a jQuery ui date plug-in, with optional fixed dates and custom date codes.
运行效果图：                             -------------------查看效果 下载源码----------- --------

Tips: If the browser does not work properly, you can try switching the browsing mode.
The code for setting a fixed date selection for the jQuery UI shared by everyone is as follows 

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>jQuery UI设置固定日期选择代码</title>

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

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/share.js"></script>

</head>
<body>

<input type="text" class="ui-datepicker-time" readonly value="" />

<div class="ui-datepicker-css"> 
  <div class="ui-datepicker-quick">
    <p>快捷日期<a class="ui-close-date">X</a></p>
    <div>
      <input class="ui-date-quick-button" type="button" value="今天" alt="jQuery UI sets fixed date selection special effect code sharing_jquery" name=""/>
      <input class="ui-date-quick-button" type="button" value="昨天" alt="-1" name=""/>
      <input class="ui-date-quick-button" type="button" value="7天内" alt="-6" name=""/>
      <input class="ui-date-quick-button" type="button" value="14天内" alt="-13" name=""/>
      <input class="ui-date-quick-button" type="button" value="3jQuery UI sets fixed date selection special effect code sharing_jquery天内" alt="-29" name=""/>
      <input class="ui-date-quick-button" type="button" value="6jQuery UI sets fixed date selection special effect code sharing_jquery天内" alt="-59" name=""/>
    </div>
  </div>
  <div class="ui-datepicker-choose">
    <p>自选日期</p>
    <div class="ui-datepicker-date">
      <input name="startDate" id="startDate" class="startDate" readonly value="2jQuery UI sets fixed date selection special effect code sharing_jquery14/12/2jQuery UI sets fixed date selection special effect code sharing_jquery" type="text">
      -
      <input name="endDate" id="endDate" class="endDate" readonly value="2jQuery UI sets fixed date selection special effect code sharing_jquery14/12/2jQuery UI sets fixed date selection special effect code sharing_jquery" type="text" disabled onChange="datePickers()">
    
    </div>
  </div>
</div>

<div style="text-align:center;margin:5jQuery UI sets fixed date selection special effect code sharing_jquerypx jQuery UI sets fixed date selection special effect code sharing_jquery; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：36jQuery UI sets fixed date selection special effect code sharing_jquery、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>

The above is the jQuery UI setting fixed date selection code shared with everyone. I hope you like it.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js realizes Jingdong’s second-level menu effect (with delay function)_jqueryNext article：js realizes Jingdong’s second-level menu effect (with delay function)_jquery

Related articles

See more