jquery Date control use, start/start time

Source: Internet
Author: User
Tags dateformat

1, download the jquery core file, DatePicker is a lightweight plug-in, just the min version of jquery on the line, and then to the official website http://jqueryui.com/ Download Download Jquery-ui Compression package (you can choose to like the theme), which contains the support of DatePicker, of course, you can also site http://marcgrabanski.com/pages/code/ Jquery-ui-datepicker downloads DatePicker, including Ui.core.js and Ui.datepicker.js.

2, in the HTML reference download the JS file:

<!--introduced jQuery-->
<script type= ' text/javascript ' src= ' <%=path%>/firecity/js/jquery-1.7.1.min.js ' ></script>
<script src= ' <%=path%>/firecity/js/devidepage.js ' type= ' Text/javascript ' > </script>
<!--add DatePicker support--> 
<script src= "<%=path%>/firecity/js/ Jquery.ui.datepicker.js "type=" Text/javascript "></script>
<script src=" <%=path%>/firecity/ Js/jquery.ui.core.js "type=" Text/javascript ></script>
<!--add Chinese support-->
<script src= "< %=path%>/firecity/js/jquery.ui.datepicker-zh-cn.js "type=" Text/javascript "></script>

3. Introduce the default style sheet file in HTML, which is in the UI compression package. If you download the website, the homepage has this CSS file download, you can also choose other skin CSS.

<link rel= "stylesheet" href= "<%=path%>/firecity/css/jqueryui/jquery-ui.css" type= "Text/css" >
< Link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel= "stylesheet" type= " Text/css "/>

4. Insert text fields in HTML, preferably set to read-only, do not accept user's manual input, prevent format confusion, with ID tag good.
Date:   <input  type= "text" size= "maxlength=" class= "FromDate"  id= "FromDate" readonly= "readonly"/ >  to <input type= "text" size= "ten" maxlength= "class=" "EndDate" id= "EndDate"  readonly= "readonly"/>

5, write JS code to achieve the final effect
$ (document). Ready (function () {     
      $ (' #fromdate '). DatePicker ();   
     $ (' #enddate '). DatePicker ();  
  
Here just do a basic date control, we also need to display in Chinese, limit the range of date selection and other requirements, slightly modify the JS code:

This basically meets the needs of our use. The DatePicker control is in English by default, and you can specify the Chinese display value for the month and day by the MonthNames, DayNames properties when constructing DatePicker, but it's too much trouble to configure these properties every time you use it. Can add a JS file to the Chinese configuration are placed inside, each use of direct reference can be placed here in the Jquery.ui.datepicker-zh-cn.js, the contents are as follows:

    JQuery (function ($) {  
        $.datepicker.regional[' zh-cn '] = {  
        	cleartext: ' Clear ', Clearstatus: ' Purge selected date ',
            Closetext: ' Close ',  
            prevtext: ' < last month ',  
            nexttext: ' Next month > ',  
            currenttext: ' Today ',  
            monthnames: [' January ', ' February ', ' March ', ' April ', ' May ', ' June ',  
            ' July ', ' August ', ' September ', ' October ', ' November ', ' December ',  
            monthnamesshort: [' One ', ' two ', ' three ', ' four ', ' five ', ' six '  
            , ' Seven ', ' eight ', ' nine ', ' ten ', ' 11 ', ' 12 ',  
            daynames: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],  
            daynamesshort: [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday '],  
            daynamesmin: [' Day ', ' one ', ' two ', ' three ', ' four ', ' five ', ' six '],  
            weekheader: ' Zhou ',  
            DateFormat: ' Yy-mm-dd ',  
            firstday:1,  
            isrtl:false,  
            showmonthafteryear:true,  
            yearsuffix: ' Year '};  
        $.datepicker.setdefaults ($.datepicker.regional[' zh-cn ');  
    });  

The complete page code is as follows:
    <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" > <HTML> <HEAD> <meta htt p-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <TITLE> Date Controls datepicker</title> <!--into JQuery--> ; script type= ' text/javascript ' src= ' <%=path%>/firecity/js/jquery-1.7.1.min.js ' ></script> < Script src= "<%=path%>/firecity/js/devidepage.js" type= "Text/javascript" ></script> <!-- Add DatePicker support--> <script src= "<%=path%>/firecity/js/jquery.ui.datepicker.js" type= "Text/javascript" ></script> <script src= "<%=path%>/firecity/js/jquery.ui.core.js" type= "Text/javascript" >< /script> <!--add Chinese support--> <script src= "<%=path%>/firecity/js/jquery.ui.datepicker-zh-cn.js" type= " Text/javascript "></script> <!--Introducing Styles css--> <link rel=" stylesheet "href= "<%=path%&GT;/firecity/css/jqueryui/jquery-ui.css "type=" Text/css "> <link href=" http://ajax.googleapis.com/ajax/libs/ Jqueryui/1.8/themes/base/jquery-ui.css "rel=" stylesheet "type=" Text/css "/> <script type= ' text/  
            JavaScript ' ><!--/wait for the DOM element to load complete. $ (document). Ready (function () {$ (". Fromdata"). DatePicker ({///Add Date selection feature numberofmonths:1,//display for several months sh owbuttonpanel:true,//whether to display the button panel showclearbutton:true, Changemonth:false, defaultdate:+1,//Showweek: True, Howon: "button",//borth can both trigger a button and trigger a text box pop-up calendar If the button only triggers the button event Buttonimageonly:true,//Set this button only shows picture effects don't have button style Showanim: "Toggle",//Popup Calendar effect buttontext: ' Choose ', hideifnoprevnext:true, D Ateformat: ' Yy-mm-dd ',//date format cleartext: "Clear",//Purge Date button name Closetext: "Close",//Close the Selection box button name Yearsuffix: ' Year ',//year  
			The suffix showmonthafteryear:true,//whether to put the month behind the year Defaultdate: ' 2013-03-10 ',//default date	MinDate: ' 2014-03-05 ',//Minimum date maxdate: ' 2024-03-20 ',//maximum date onselect:function (selectedDate) {$ (" 
			   . Enddata "). DatePicker (" option "," MinDate ", New Date (Selecteddate.replace (/-/g, ', '));//end time optional minimum is checked value}});  
						$ (". Enddata"). DatePicker ({//Add Date selection feature numberofmonths:1,//display a few months showbuttonpanel:true,//whether the button panel is displayed  Showclearbutton:true, Changemonth:false, defaultdate:+1,//Showweek:true, Howon: "button",  
						Borth can trigger a button and can trigger a text box pop-up calendar If the button only triggers the button event Buttonimageonly:true,//Set it to show only picture effects don't have button style Showanim: "Toggle",//Popup Calendar effect buttontext: ' Choose ', Hideifnoprevnext:true, DateFormat: ' yy  
						-mm-dd ',//date format cleartext: "Clear",//Purge Date button name Closetext: "Close",//Close the Selection box button name Yearsuffix: ' Year ',//year suffix  
						showmonthafteryear:true,//whether to put the month behind the year Defaultdate: ' 2013-03-10 ',//default date mindate: ' 2014-03-05 ',//Minimum date MaxDate: ' 2024-03-20 ',//maximum date onselect:function (selectedDate) {$ (". Fromdata"). DatePicker ("option", "MaxDate", New Dat
		E (Selecteddate.replace (/-/g, ', '));//start time optional maximum is checked value}}); 
          
    }); --></script> </HEAD> <BODY> Date: <input type= "text" size= "ten" Maxlengt H= "class=" "FromDate" id= "FromDate" readonly= "readonly"/> to <input type= "text" size= "" maxlength= "" class= "  EndDate "id=" EndDate "readonly=" readonly "/> </BODY> </HTML>

Note: If you do not add

The icon that causes the selection of the next month in the date control does not display correctly because there are no available picture resources to reference locally

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.