Jquery Datepicker操作案例

来源：互联网发布：大数据盈利模式编辑：程序博客网时间：2024/06/05 08:31

简单时间调用

<!doctype html><html lang="en"><head><meta charset="utf-8" /><title>jQuery UI Datepicker - Default functionality</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /><script>$(function() {$( "#datepicker" ).datepicker();});</script></head><body><p>Date: <input type="text" id="datepicker" /></p></body></html>

时间区间调用

<!doctype html><html lang="en"><head><meta charset="utf-8" /><title>jQuery UI Datepicker - Select a Date Range</title><link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /><script src="http://code.jquery.com/jquery-1.9.1.js"></script><script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script><link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css" /><script>$(function() {$( "#from" ).datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 3,onClose: function( selectedDate ) {$( "#to" ).datepicker( "option", "minDate", selectedDate );}});$( "#to" ).datepicker({defaultDate: "+1w",changeMonth: true,numberOfMonths: 3,onClose: function( selectedDate ) {$( "#from" ).datepicker( "option", "maxDate", selectedDate );}});});</script></head><body><label for="from">From</label><input type="text" id="from" name="from" /><label for="to">to</label><input type="text" id="to" name="to" /></body></html>