Home > Developer > Web Develop
The original link; http://www.ido321.com/375.html
The jquery UI is a very rich jquery plugin, and the various parts of the UI plug-in can be used alone, which is not the advantage of many other jquery plugins. Recently, I learned a bit about the DatePicker plugin in the UI, and this date selection/calendar display plugin is very useful. Don't say much nonsense, first take a picture, see the effect:
very simple to use, on the code:
1: <! Doctype>
2:3:4: <title> Calendar Controls </title>5: <script type="Text/javascript" src="Js/jquery-1.10.2.min.js"></script >6: <script src="Js/calendar.js"></script>7: <link rel="stylesheet" href="css/calendar.css" />8: <meta charset="Utf-8"/>9:Ten: <body>One : <div id="DatePicker">12:13:: <script type="Text/javascript">: "#datepicker" ). DatePicker ();: </script>: </body>:You can also display the text box when it gets focus, and modify it slightly:1: <!--text box get focus display calendar needs to import JS file--Modify the div section as follows:2: <script src="Js/custom.min.js"></script>other unchanged, refresh the browser, effect1: date selection: <input type=' text ' id=' datepicker '/>This is obviously not quite in line with our habits, we need to modify JS to make it conform to our usage habits1: <script type="Text/javascript">2: "#datepicker" ). DatePicker3: {4: showmonthafteryear:true//year in front, month in the rear5: yearsuffix:"Year", //Add suffix year6: prevtext:"Last month", //mouse placed on the button to display the text7: nexttext:"next month",8: monthnames:["January","February","March","April","May","June" "," July "," August "," September "," October "," November"," December ",], //Display month in Chinese9: //Show weekly in Chinese (must be in this order, otherwise the date is wrong)Ten: daynamesmin:["Day","One", "two","three","Four","five" ,"Six"11:dateformat:"Yy-mm-dd",: });the modified effectfor text boxes, the default is to show the date when the focus is taken, or you can add a button later: </script>1: showon:"button", //Add Selection button after text boxYou can add a picture to the button or modify the text to beautify the button
1: buttontext:"Date", //Set the selection button to the text2: buttonimage:"Css/images/animated-overlay.gif", //Set Picture for buttonIf you want to display only pictures, you can add the following code
1://Boolean, whether to display the picture as a button, false to show the form of the button, true to display the picture individually, false by default2: buttonimageonly:trueYou can also freely select the month and year
1: changeyear:true, //Boolean value, whether the year can be selected2: changemonth:true,//Boolean, whether the month can be selectedEffect
Don't like English? OK, let's replace the numbers.
1:The abbreviation of the month when//changemonth is true2: monthnamesshort:["to","to","to","to","to", "a","" ","",""," "Ten", "one","12" ],Look at the effect
You can also set the selected year range
1://When Changeyear is true, sets the year range, C represents the current year, plus minus 10 indicates that the current year is pushed back by 10 and 10 years before the push2:"c-10:c+10"Of course, you can also add panels
1: showbuttonpanel:true, //Whether the panel is displayedFor children who do not like English, you can change to Chinese
1://The text of the current day is returned on the settings panel, only showbuttonpanel:true will be displayed2: currenttext:"Today",3: //Set the text on the panel to be closed, only showbuttonpanel:true will show4: "Off",These are also what we often use, if you need any function, you can modify JS. I have packaged the above code with the DatePicker from the UI and can apply it directly to your project. If you need it, you can download it from the link given below:
Fork Git: Https://github.com/dwqs/datepicker
CSDN: http://download.csdn.net/detail/u011043843/7809973
Baidu Cloud: Http://pan.baidu.com/disk/home#path=%252Fthemes
How to use the DatePicker plugin for Jquery UI
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
