datepicker示例

简介: jQuery Datepicker          $(function() {  var nowdays = new Date();  var dateConfig = {  showOn:...

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 

<title>jQuery Datepicker</title> 

<script type="text/javascript" src="jquery-1.3.2.js"></script> 

<script type="text/javascript" src="jquery.datepick.js"></script> 

<script type="text/javascript" src="jquery.datepick-zh-CN.js"></script> 

<script type="text/javascript"> 

$(function() { 

var nowdays = new Date(); 

var dateConfig = { 

showOn: 'both',               //二个都显示 

buttonImage: 'calendar.gif',  //加载图片 

buttonImageOnly: true,        //显示图片的地方有一个突出部分,这个就是隐藏那玩意的 

changeFirstDay: false,        //这个参数干什么的呢,星期一是日历的第一个,不可以改动的 

numberOfMonths: 2,            //显示二个月,默认一个月 

minDate: nowdays,             //显示最小时间是今天 

dateFormat: 'yy-mm-dd',       //日期格式 

yearRange: '-20:+20'          //前后20年,不过这根minDate是今天有冲突,自己去试吧。 

}; 

$('#goodplugin').datepick(dateConfig); 

$('#showdate').datepick(dateConfig); 

}); 

</script> 

<link type="text/css" href="smoothness.datepick.css" rel="stylesheet" /> 

</head> 

<body> 

<h1>jquery 日历插件举例</h1> 

<br> 

<a href="datepick1.html">样式1</a> 

<br> 

<a href="datepick2.html">样式2</a> 

<br> 

<a href="datepick3.html">样式3</a> 

<br><br><br> 

<div id="showdate"></div> 

<br> 

<br> 

<div>左边直接显示,右边要点击<input type="text" id="goodplugin"/></div> 

</body> 

</html> 

原文:

http://blog.51yip.com/jsjquery/884.html

http://blog.51yip.com/demo/datepick/datepick3.html

http://blog.51yip.com/demo/datepick/jquery-1.3.2.js

http://blog.51yip.com/demo/datepick/jquery.datepick.js

http://blog.51yip.com/demo/datepick/jquery.datepick-zh-CN.js

http://blog.51yip.com/demo/datepick/humanity.datepick.css

http://docs.jquery.com/UI/Datepicker#options

多个示例:

http://jqueryui.com/datepicker/

http://jqueryui.com/datepicker/#dropdown-month-year

http://www.open-open.com/ajax/ajax20080626102652.htm

http://polaris.blog.51cto.com/1146394/259318

http://www.eyecon.ro/datepicker/#about

目录
相关文章
|
关系型数据库 MySQL 数据库
Element el-date-picker 日期选择器详解
本文目录 1. 前言 2. 基本用法 3. 日期格式化 4. 选择其他日期单位 5. 选择多个日期 6. 带快捷选项 7. 禁用部分日期 8. 小结
5151 0
Element el-date-picker 日期选择器详解
|
6月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
215 1
|
JavaScript 前端开发 程序员
vue的 DatePicker 日期选择器,把选择的日期转化成需要格式传值
vue的 DatePicker 日期选择器,把选择的日期转化成需要格式传值
396 1
|
8月前
el-date-picker组件的picker-options常规属性设置
el-date-picker组件的picker-options常规属性设置
element ui el-date-picker 禁止选择指定日期
element ui el-date-picker 禁止选择指定日期
318 0
192Echarts - 自定义系列(Custom Calendar Icon)
192Echarts - 自定义系列(Custom Calendar Icon)
41 0
|
人工智能 前端开发
修改elmentui中el-date-picker下拉框样式(大小)
修改elmentui中el-date-picker下拉框样式(大小)
|
JavaScript
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
501 0
|
JavaScript
关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题
饿了么组件库的[DatePicker](https://element.eleme.cn/#/zh-CN/component/date-picker) 日期范围选择,
el-date-picker 中 pickerOptions 的 disabledDate 使用自己定义的变量或者方法
el-date-picker 中 pickerOptions 的 disabledDate 使用自己定义的变量或者方法
297 0