`
erntoo
  • 浏览: 29587 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论
  • erntoo: 修改somaxconn该内核参数默认值一般是128,对于负载很 ...
    rpm

jquery datepicker 应用笔记

    博客分类:
  • js
阅读更多
var fromdatefunction=function(){
	var maxdate=" -1d";
	if($('#todate').val())	{	maxdate=$('#todate').val();}
	$( "#fromdate" ).datepicker({ 
		changeMonth: true,
		changeYear:true,
		//dayNamesMin:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
		//dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
		firstDay: 1 ,//以星期1 作为一周的第一天
		gotoCurrent: true,
//		showButtonPanel: true,
		hideIfNoPrevNext: false,
		maxDate: maxdate,
		//maxDate: "+2m +1w",//最大时间 两个月 1周后
		minDate: new Date(2012, 1 - 1, 1),//最小时间
		//yearRange: "2008:2012",//显示从2002年到2012年,和maxDate 和 minDate 取交集
		//yearSuffix: "CE",//年的前缀,但是当年和月位置对调出现问题
		//dialog:"xxx",
		setDate:"+1m +7d",
		monthNames: ["01","02","03","04","05","06","07","08","09","10","11","12" ],
		monthNamesShort: ["01","02","03","04","05","06","07","08","09","10","11","12" ],
		showCurrentAtPos: 0,//默认展示当前月
		//showCurrentAtPos: -1,//默认展示一个月后
		nextText:"下一月",
		prevText:"前一月",
		numberOfMonths: [1,1],//展示1行1列
		showMonthAfterYear: true,//年在月前输出
		dateFormat: "yy-mm-dd"
//		showOtherMonths:false,
//		showOn: "both",
//		direction: "up",
//		stepMonths: 1, //上3 月,下三月
//		showWeek: true,//显示一年中的第几周
//		weekHeader: "W",
	});
}
var todatefunction=function(fromdatevalue){
	var mindate=new Date(2012, 1 - 1, 1);
	if($('#fromdate').val())	{	mindate=$('#fromdate').val();}
	$( "#todate" ).datepicker({ 
		changeMonth: true,
		changeYear:true,
		//dayNamesMin:["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
		//dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
		firstDay: 1 ,//以星期1 作为一周的第一天
		gotoCurrent: true,
//		showButtonPanel: true,
		hideIfNoPrevNext: false,
		maxDate: "-1d",
		//maxDate: "+2m +1w",//最大时间 两个月 1周后
		minDate: mindate,//最小时间
		//yearRange: "2008:2012",//显示从2002年到2012年,和maxDate 和 minDate 取交集
		//yearSuffix: "CE",//年的前缀,但是当年和月位置对调出现问题
		//dialog:"xxx",
		setDate:"+1m +7d",
		monthNames: ["01","02","03","04","05","06","07","08","09","10","11","12" ],
		monthNamesShort: ["01","02","03","04","05","06","07","08","09","10","11","12" ],
		showCurrentAtPos: 0,//默认展示当前月
		//showCurrentAtPos: -1,//默认展示一个月后
		nextText:"下一月",
		prevText:"前一月",
		numberOfMonths: [1,1],//展示1行1列
		showMonthAfterYear: true,//年在月前输出
		dateFormat: "yy-mm-dd"
//		showOtherMonths:false,
//		showOn: "both",
//		direction: "up",
//		stepMonths: 1, //上3 月,下三月
//		showWeek: true,//显示一年中的第几周
//		weekHeader: "W",
	});
}
$(function() {
	fromdatefunction();
	todatefunction();
	$( "#todate" ).change(function(){
		 $( "#fromdate" ).datepicker( "destroy" );
		fromdatefunction();
	})
	$( "#fromdate" ).change(function(){
		 $( "#todate" ).datepicker( "destroy" );
		todatefunction();
	})
});

 备忘x

 

分享到:
评论

相关推荐

    BootstrapPlugin - datepicker 使用笔记

    这篇博客文章《BootstrapPlugin - datepicker 使用笔记》将深入探讨如何集成和使用这个插件。 首先,要在项目中使用bootstrap-datepicker,你需要确保已经安装了Bootstrap框架,因为它是该插件的基础。你可以通过...

    JQuery教程自学笔记

    JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画...

    jquery UI(笔记)

    这个笔记主要涵盖jQuery UI的基本概念、核心组件、使用方法以及在实际项目中的应用。 ### 1. jQuery UI 的组成 jQuery UI 包含了以下几大部分: - **Widgets(组件)**:如对话框(Dialog)、日期选择器(Datepicker...

    JQuery教程自学笔记总结

    JQuery教程自学笔记总结 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 ...

    JQuery教程自学笔记(最新)

    JQuery教程自学笔记 1 一、概述 4 二、JQuery技术综述 5 2.1 JQuery基本语法 5 2.1.1 JQuery选择器 6 2.2 JQuery事件响应 8 2.2.1 常见的JQuery事件 9 2.2.2 淡入淡出效果 12 2.2.3 滑动效果 15 2.2.4 动画...

    jQuery笔记和jQuery插件的使用

    6. **时间日期插件**: 如jQuery Datepicker,方便用户选择日期。 **深入jQuery** 1. **AJAX**: jQuery简化了异步数据请求,`$.ajax()`和`$.get()`, `$.post()`等函数使Ajax操作变得简单。 2. **回调函数**: ...

    jquery学习笔记及常用函数封装.zip

    本资料包“jquery学习笔记及常用函数封装.zip”包含了从JQuery基础到进阶,再到实战应用的全方位学习资源,适合对JavaScript有一定了解并希望提升jQuery技能的开发者。 首先,让我们从JQuery的基础知识开始。jQuery...

    jQuery 入门指南 学习文档 范例打包 效果应用 jQuery_api

    `jQuery官方UI插件.rar`包含了jQuery UI库的一些组件,如对话框(Dialog)、滑块(Slider)、日期选择器(DatePicker)等。jQuery UI扩展了jQuery的功能,提供了丰富的用户界面组件,让开发者能够快速创建交互式Web...

    jQuery手机移动端出生年月日日期选择代码.zip

    对于出生年月日的日期选择,我们可能需要引入一个jQuery日期插件,如`bootstrap-datepicker`或`jQuery UI Datepicker`。这些插件通过简单的API调用就能轻松创建日期选择器。以下是一个基本的示例: ```javascript $...

    jquery时间控件,年,年月日,年月的区间

    4. **插件集成**:如果使用现有的jQuery插件,如`bootstrap-datepicker`或`eonasdan-bootstrap-datetimepicker`,需要在页面中引入对应的JS和CSS文件,并按照文档指示进行配置和初始化。 5. **自定义功能**:对于年...

    jQuery弹出框选择日期代码.zip

    在这个例子中,可能使用了某个jQuery插件,如"jQuery UI"或"bootstrap-datepicker"等,它们提供了内置的日期选择器功能。以下是一个使用jQuery UI的简单示例: ```javascript $(document).ready(function() { $("#...

    Jquery UI 1.8 The user interface library

    JQuery UI 是一个基于JQuery的JavaScript库,它为Web开发者提供了丰富的交互式界面组件和特效,以方便快速构建出美观且功能丰富的网页应用程序。JQuery UI 1.8版本是针对JQuery框架的一个用户界面库,为开发者提供了...

    jQuery页面功能分步指引介绍代码.zip

    jQuery生态中有很多第三方插件,它们扩展了jQuery的功能,如轮播图插件(carousel)、日期选择器(datepicker)、模态框(modal)等。这些插件可以通过简单的API调用集成到项目中,提高开发效率。 6. **Ajax交互**...

    jQuery手机选择日期日历插件.zip

    本文将深入探讨jQuery手机选择日期日历插件的原理、实现方式以及在实际开发中的应用。 首先,我们了解下jQuery的基本概念。jQuery是一个轻量级的JavaScript库,简化了HTML文档遍历、事件处理、动画和Ajax交互等任务...

    jQuery手机年月日选择代码.zip

    此外,它可能会使用`$.fn.extend()`扩展jQuery对象,创建一个新的插件方法,比如`$('selector').datePicker()`,以便在任何元素上轻松调用日期选择器。 在`style`文件夹中,我们可以找到CSS样式表,用于定义日期...

    jQuery下拉列表框日期选择代码.zip

    通过理解并分析压缩包中的文件,开发者不仅可以直接应用此代码,还可以根据自己的需求进行二次修改,增强网页的交互体验。无论你是初学者还是经验丰富的开发者,掌握这种技术都将对你的项目大有裨益。

    jQuery点击选择购买年份月份日期代码.zip

    jQuery是一款广泛应用于网页交互与动态效果的JavaScript库,它的出现极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。在这个名为"jQuery点击选择购买年份月份日期代码.zip"的压缩包中,我们可以...

    jQuery交互式日期选择代码.zip

    这个插件可能基于jQuery构建,使用`.on()`方法绑定事件,`.datepicker()`函数初始化日期选择器,并通过`.val()`设置或获取输入框的日期值。插件可能还提供了其他配置选项,如日期格式、禁用日期、语言支持等,通过...

Global site tag (gtag.js) - Google Analytics