十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
先去下载个My97DatePicker日期插件
创新互联公司专注于剑阁企业网站建设,响应式网站开发,购物商城网站建设。剑阁网站建设公司,为剑阁等地区提供建站服务。全流程按需策划,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务
和js库[这个是1.32版本的],记得在网页中引用。
然后具体的My97DatePicker日期插件使用方法就上去
有很详细的介绍,还用不同的效果
日历插件:
在页面开发中,经常遇到需要用户输入日期的操作。通常的做法是,提供一个文本框,让用户输入,然后,编写代码验证输入的数据,检测其是否是日期型。这样比较麻烦,同时,用户输入日期的操作也不是很方便,影响用户体验。如果使用jQuery UI 中的datepicker日历插件,这些问题都可以迎刃而解。该插件调用的语法格式如下:
$(".selector").datepicker(options);
其中".selector" 表示DOM元素,一般指文本框,由于该插件的作用是提供日期选择,因此,常与一个文本框绑定,将选择后的日期显示在该文本框中。选项options是一个对象。
下面是一些参数:
changeMonth 设置一个布尔值,如果为true,则可以在标题处出现一个下拉选择框,可以选择月份,默认值为false
changeYear 设置一个布尔值,如果为true,则可以在标题处出现一个下拉选择框,可以选择年份,默认值为false
showButtonPanel 设置一个布尔值,如果为true, 则在日期的下面显示一个面板,其中有两个按钮;一个为“今天”,另一个按键为“关闭”,默认值为false,表示不显示。
closeText 设置关闭按钮上的文字信息,这项设置的前提是,showButtonPanel的值必须为true,否则显示不了效果。
dateFormat 设置显示在文本框中的日期格式,可设置为{dateFormat:'yy-mm-dd'},表示日期的格式为 年-月-日,如2012-10-1.
defaultDate 设置一个默认日期值,如{defaultDate:+7}, 表示,弹出日期选择窗口后,默认的日期是在当前日期加上7天
showAnim 设置显示弹出或隐藏日期选择窗口的方式。可以设置的方式有,“show"、"slideDown"、"fadeIn“,或者为"", 表示没有弹出日期选择窗口的方式。
showWeek 设置一个布尔值,如果为true,则可以显示每天对应的星期,默认值为false
yearRange 设置年份的范围,如{yearRange:'2000:2010'},表示年份下拉列表框的最小值为2000年,最大值为2010年,默认值为c-10;c+10,当前年份的前后10年。
datepicker是一个配置灵活的插件,我们可以自己定义其展开方式,包括日期格式、语言、限制日期选择范围、添加相关按钮以及其他导航等。具体步骤:1
var d = $("#input1").val().replace(/-/g,"/");
var d1 = new Date(d);
d1.setMonth(d1.getMonth()+3);
var text = formateDate(d1);
$("#input2").val(text);
function formateDate(date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
month = month10?"0"+month:month;
day = day10?"0"+day:day;
return year + "-" + month +"-"+day;
}
jqueryui默认显示的是英文的日期格式,可以通过插件设置为显示中文的方式,如下是设置显示中文的代码:
$((function($){
$.datepicker.regional['zh-CN'] = {
clearText: '清除',
clearStatus: '清除已选日期',
closeText: '关闭',
closeStatus: '不改变当前选择',
prevText: '上月',
prevStatus: '显示上月',
prevBigText: '',
prevBigStatus: '显示上一年',
nextText: '下月',
nextStatus: '显示下月',
nextBigText: '',
nextBigStatus: '显示下一年',
currentText: '今天',
currentStatus: '显示本月',
monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'],