Share an article jQuery plug-in-date linkage
/*
* jquery Date Selector Plugin
* 日期联动选择插件
*
* Demo:
$("#calendar").DateSelector({
ctlYearId: <年控件id>,
ctlMonthId: <月控件id>,
ctlDayId: <日控件id>,
defYear: <默认年>,
defMonth: <默认月>,
defDay: <默认日>,
minYear: <最小年|默认为1882年>,
maxYear: <最大年|默认为本年>
});
HTML:<p id="calendar"><SELECT id=idYear></SELECT>年 <SELECT id=idMonth></SELECT>月 <SELECT id=idDay></SELECT>日</p>
*/(function ($) { //SELECT控件设置函数
function setSelectControl(oSelect, iStart, iLength, iIndex) { oSelect.empty(); for (var i = 0; i < iLength; i++) { if ((parseInt(iStart) + i) == iIndex) oSelect.append("<option selected='selected' value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>"); else
oSelect.append("<option value='" + (parseInt(iStart) + i) + "'>" + (parseInt(iStart) + i) + "</option>");
}
} $.fn.DateSelector = function (options) { options = options || {}; //初始化
this._options = { ctlYearId: null, ctlMonthId: null, ctlDayId: null, defYear: 0, defMonth: 0, defDay: 0, minYear: 1882, maxYear: new Date().getFullYear()
} for (var property in options) { this._options[property] = options[property];
} this.yearValueId = $("#" + this._options.ctlYearId); this.monthValueId = $("#" + this._options.ctlMonthId); this.dayValueId = $("#" + this._options.ctlDayId); var dt = new Date(), iMonth = parseInt(this.monthValueId.attr("data") || this._options.defMonth), iDay = parseInt(this.dayValueId.attr("data") || this._options.defDay), iMinYear = parseInt(this._options.minYear), iMaxYear = parseInt(this._options.maxYear); this.Year = parseInt(this.yearValueId.attr("data") || this._options.defYear) || dt.getFullYear(); this.Month = 1 <= iMonth && iMonth <= 12 ? iMonth : dt.getMonth() + 1; this.Day = iDay > 0 ? iDay : dt.getDate(); this.minYear = iMinYear && iMinYear < this.Year ? iMinYear : this.Year; this.maxYear = iMaxYear && iMaxYear > this.Year ? iMaxYear : this.Year; //初始化控件
//设置年
setSelectControl(this.yearValueId, this.minYear, this.maxYear - this.minYear + 1, this.Year); //设置月
setSelectControl(this.monthValueId, 1, 12, this.Month); //设置日
var daysInMonth = new Date(this.Year, this.Month, 0).getDate(); //获取指定年月的当月天数[new Date(year, month, 0).getDate()]
if (this.Day > daysInMonth) { this.Day = daysInMonth; }; setSelectControl(this.dayValueId, 1, daysInMonth, this.Day); var oThis = this; //绑定控件事件
this.yearValueId.change(function () { oThis.Year = $(this).val(); setSelectControl(oThis.monthValueId, 1, 12, oThis.Month); oThis.monthValueId.change();
}); this.monthValueId.change(function () { oThis.Month = $(this).val(); var daysInMonth = new Date(oThis.Year, oThis.Month, 0).getDate(); if (oThis.Day > daysInMonth) { oThis.Day = daysInMonth; }; setSelectControl(oThis.dayValueId, 1, daysInMonth, oThis.Day);
}); this.dayValueId.change(function () { oThis.Day = $(this).val();
});
}
})(jQuery);<!DOCTYPE HTML><html><head><meta charset="utf-8"><title></title><style>body{padding:20px;background:#ddd;font:14px/1.7 Arial,"/5b8b/4f53";}
h1,h2,h3{font:bold 36px/1 "/5fae/8f6f/96c5/9ed1";}
h2{font-size:20px;}
h3{font-size:16px;}
fieldset{margin:1em 0;}
fieldset legend{font:bold 14px/2 "/5fae/8f6f/96c5/9ed1";}
a{color:#06f;text-decoration:none;}
a:hover{color:#00f;}
.wrap{width:600px;margin:0 auto;padding:20px 40px;border:2px solid #999;border-radius:8px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.5);}</style></head><body><p class="wrap">
<h1>jQuery 多级联动下拉菜单</h1>
<h2>示例</h2>
<p id="dateSelector">
<select id="idYear" name="idYear" data=""></select>年 <select id="idMonth" name="idMonth" data="12"></select>月 <select id="idDay" name="idDay" data="1"></select>日 </p>
</p>
<script src="js/jquery-1.4.4.min.js"></script><script src="js/jquery.calendar.js"></script><script>$(document).ready(function () {
var myDate = new Date();
$("#dateSelector").DateSelector({
ctlYearId: 'idYear',
ctlMonthId: 'idMonth',
ctlDayId: 'idDay',
defYear: myDate.getFullYear(),
defMonth: (myDate.getMonth()+1),
defDay: myDate.getDate(),
minYear: 1800,
maxYear: (myDate.getFullYear()+1)
});
});</script></body></html>The above is the detailed content of Share an article jQuery plug-in-date linkage. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to search previous Weibo by date on Weibo_How to search previous Weibo by date on Weibo
Mar 30, 2024 pm 07:26 PM
1. First open the mobile web browser, search for the Weibo web version, and click the avatar button in the upper left corner after entering. 2. Then click Settings in the upper right corner. 3. Click the version switching option in settings. 4. Then select the color version option in the version switch. 5. Click Search to enter the search page. 6. After entering the keywords, click Find People. 7. When the search completion interface appears, click Filter. 8. Finally, enter the specific date in the release time column and click Filter.
How to share Quark Netdisk to Baidu Netdisk?
Mar 14, 2024 pm 04:40 PM
Quark Netdisk and Baidu Netdisk are very convenient storage tools. Many users are asking whether these two softwares are interoperable? How to share Quark Netdisk to Baidu Netdisk? Let this site introduce to users in detail how to save Quark network disk files to Baidu network disk. How to save files from Quark Network Disk to Baidu Network Disk Method 1. If you want to know how to transfer files from Quark Network Disk to Baidu Network Disk, first download the files that need to be saved on Quark Network Disk, and then open the Baidu Network Disk client. , select the folder where the compressed file is to be saved, and double-click to open the folder. 2. After opening the folder, click "Upload" in the upper left corner of the window. 3. Find the compressed file that needs to be uploaded on your computer and click to select it.
How to remove the date that appears automatically when printing from PPT handouts
Mar 26, 2024 pm 08:16 PM
1. Let me first talk about the method I used at the beginning, maybe everyone is using it too. First, open [View]——]Remarks Template[. 2. A place where you can actually see the date after opening it. 3. Select it first and delete it. 4. After deleting, click [Close Master View]. 5. Open the print preview again and find that the date is still there. 6. In fact, this date was not deleted here. It should be in the [Handout Master]. Look at the picture below. 7. Delete the date after you find it. 8. Now when you open the preview and take a look, the date is no longer there. Note: In fact, this method is also very easy to remember, because the printed handouts are handouts, so you should look for the [Handout Master].
How to share NetEase Cloud Music to WeChat Moments_Tutorial on sharing NetEase Cloud Music to WeChat Moments
Mar 25, 2024 am 11:41 AM
1. First, we enter NetEase Cloud Music, and then click on the software homepage interface to enter the song playback interface. 2. Then in the song playback interface, find the sharing function button in the upper right corner, as shown in the red box in the figure below, click to select the sharing channel; in the sharing channel, click the "Share to" option at the bottom, and then select the first "WeChat Moments" allows you to share content to WeChat Moments.
Share three solutions to why Edge browser does not support this plug-in
Mar 13, 2024 pm 04:34 PM
When users use the Edge browser, they may add some plug-ins to meet more of their needs. But when adding a plug-in, it shows that this plug-in is not supported. How to solve this problem? Today, the editor will share with you three solutions. Come and try it. Method 1: Try using another browser. Method 2: The Flash Player on the browser may be out of date or missing, causing the plug-in to be unsupported. You can download the latest version from the official website. Method 3: Press the "Ctrl+Shift+Delete" keys at the same time. Click "Clear Data" and reopen the browser.
What is the Chrome plug-in extension installation directory?
Mar 08, 2024 am 08:55 AM
What is the Chrome plug-in extension installation directory? Under normal circumstances, the default installation directory of Chrome plug-in extensions is as follows: 1. The default installation directory location of chrome plug-ins in windowsxp: C:\DocumentsandSettings\username\LocalSettings\ApplicationData\Google\Chrome\UserData\Default\Extensions2. chrome in windows7 The default installation directory location of the plug-in: C:\Users\username\AppData\Local\Google\Chrome\User
How to share files with friends on Baidu Netdisk
Mar 25, 2024 pm 06:52 PM
Recently, Baidu Netdisk Android client has ushered in a new version 8.0.0. This version not only brings many changes, but also adds many practical functions. Among them, the most eye-catching is the enhancement of the folder sharing function. Now, users can easily invite friends to join and share important files in work and life, achieving more convenient collaboration and sharing. So how do you share the files you need to share with your friends? Below, the editor of this site will give you a detailed introduction. I hope it can help you! 1) Open Baidu Cloud APP, first click to select the relevant folder on the homepage, and then click the [...] icon in the upper right corner of the interface; (as shown below) 2) Then click [+] in the "Shared Members" column 】, and finally check all
How to change the date into a pound sign in Excel
Mar 20, 2024 am 11:46 AM
Excel software has very powerful data processing functions. We often use excel software to process various data. Sometimes when we enter a date in an excel cell, the date in excel changes to a pound sign. How can we display the data normally? Let’s take a look at the solution below. 1. First, we put the mouse on the column width line between columns AB, double-click and adjust the column width, as shown in the figure below. 2. After the column is widened, we find that numbers are displayed in the cells instead of dates. This is definitely incorrect. Then we should check the format of the cells, as shown in the figure below. 3. Click the "Number" option in the "Home" tab, and click "Other Number Format" in the drop-down menu, as shown in the figure below.
