Home Web Front-end JS Tutorial JQuery datepicker usage_jquery

JQuery datepicker usage_jquery

May 16, 2016 pm 06:06 PM
jquery

Official address: http://docs.jquery.com/UI/Datepicker, official example: http://jqueryui.com/demos/datepicker/ .

A good address for DIY jQuery UI interface effect sitehttp://jqueryui.com/themeroller/

Basic usage of DatePicker:

Copy code The code is as follows:








<script> <br>$(document).ready(function() { <br>$("#datepicker").datepicker(); <br>}); <br>< /script> <br></head> <br><body style="font-size:62.5%;"> <br><br><div type="text" id="datepicker"&gt ;</div> <br><br></body> <br></html> <br> </div> <br>DatePicker supports mouse click to select dates, and the selection can also be controlled through the keyboard: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="9949" class="copybut" id="copybut9949" onclick="doCopy('code9949')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code9949"> <br>page up/down - previous month, next month<br>ctrl page up/down - previous year, next year<br>ctrl home - current month or last opened date<br>ctrl left/right - previous day, next day<br>ctrl up/down - Previous week, next week <br>enter - confirm the selected date <br>ctrl end - close and clear the selected date <br>escape - close and cancel the selection <br> </div> <br>Useful functions: <br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="87923" class="copybut" id="copybut87923" onclick="doCopy('code87923')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code87923"> <br>$.datepicker.setDefaults(settings) - Global settings for the date picker plug-in Parameters. <br>$.datepicker.formatDate( format, date, settings) - Format the date string for display <br>$.datepicker.iso8601Week( date ) - Give a date, and it is indeed the first day of the year Weeks<br>$.datepicker.parseDate(format, value, settings) - Get the date string according to the specified format<br> </div> <br>Date format: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="27444" class="copybut" id="copybut27444" onclick="doCopy('code27444')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code27444"> <br>d - the day of the month (without leading zeros) <br>dd - the day of the month ( two digits) <br>o - day of the year (no leading zero) <br>oo - day of the year (three digits) <br>D - day name short <br>DD - day name long <br>m - month (without leading zero) <br>mm - month (two digits) <br>M - month name short <br>MM - month name long <br>y - year (two digits) digits) <br>yy - year (four digits) <br>@ - Unix timestamp (from 01/01/1970) <br>'...' - text <br>'' - single quote<br> (Other) - text <br> </div> <br><br>Other standard date formats: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="8881" class="copybut" id="copybut8881" onclick="doCopy('code8881')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code8881"> <br>ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601) <br>COOKIE - 'D, dd M yy' <br>ISO_8601 - 'yy- mm-dd' <br>RFC_822 - 'D, d M y' <br>RFC_850 - 'DD, dd-M-y' <br>RFC_1036 - 'D, d M y <br>RFC_1123 - 'D, d M yy ' <br>RFC_2822 - 'D, d M yy' <br>RSS - 'D, d M y' <br>TIMESTAMP - '@' <br>W3C - 'yy-mm-dd' <br> </div> <br><br>Parameter (Parameter name: Parameter type: Default value) <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="91127" class="copybut" id="copybut91127" onclick="doCopy('code91127')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code91127"> <br>altField : String : '' <br>Synchronize the selected date to another field, and use altFormat to display date strings in different formats. <br>Initial: $('.selector').datepicker({ altField: '#actualDate' }); <br>Get: var altField = $('.selector').datepicker('option', 'altField' ); <br>Settings: $('.selector').datepicker('option', 'altField', '#actualDate'); <br><br>altFormat : String : '' <br>When altField is set In case of displaying date format in another field. <br>Initial: $('.selector').datepicker({ altFormat: 'yy-mm-dd' }); <br>Get: var altFormat = $('.selector').datepicker('option', 'altFormat'); <br>Settings: $('.selector').datepicker('option', 'altFormat', 'yy-mm-dd'); <br><br>appendText : String : '' <br>Add the specified string after the domain of the date plug-in. <br>Initial: $('.selector').datepicker({ appendText: '(yyyy-mm-dd)' }); <br>Get: var appendText = $('.selector').datepicker('option ', 'appendText'); <br>Settings: $('.selector').datepicker('option', 'appendText', '(yyyy-mm-dd)'); <br><br>buttonImage : String : '' <br>Set the picture of the pop-up button. If it is not empty, the text of the button will become the alt attribute and will not be displayed directly. <br>Initial: $('.selector').datepicker({ buttonImage: '/images/datepicker.gif' }); <br>Get: var buttonImage = $('.selector').datepicker('option' , 'buttonImage'); <br>Settings: $('.selector').datepicker('option', 'buttonImage', '/images/datepicker.gif'); <br><br>buttonImageOnly : Boolean : false <br>Set to true to place an image after the field to use as the trigger without it appearing on a button. <br>Initial: $('.selector').datepicker({ buttonImageOnly: true }); <br> Get: var buttonImageOnly = $('.selector').datepicker('option', 'buttonImageOnly'); <br>Setting: $('.selector').datepicker('option', 'buttonImageOnly', true); <br><br>buttonText : String : '...' <br>Set the text content of the trigger button. <br>Initial: $('.selector').datepicker({ buttonText: 'Choose' }); <br>Get: var buttonText = $('.selector').datepicker('option', 'buttonText') ; <br>Settings: $('.selector').datepicker('option', 'buttonText', 'Choose'); <br><br>changeMonth : Boolean : false <br>Settings allow selection through the drop-down list month. <br>Initial: $('.selector').datepicker({ changeMonth: true }); <br>Get: var changeMonth = $('.selector').datepicker('option', 'changeMonth'); <br>Settings: $('.selector').datepicker('option', 'changeMonth', true); <br><br>changeYear : Boolean : false <br>Settings allow year selection through the drop-down list. <br>Initial: $('.selector').datepicker({ changeYear: true }); <br>Get: var changeYear = $('.selector').datepicker('option', 'changeYear'); <br>Settings: $('.selector').datepicker('option', 'changeYear', true); <br><br>closeTextType: StringDefault: 'Done' <br>Set the text content of the close button, this button It needs to be displayed through the setting of showButtonPanel parameters. <br>Initial: $('.selector').datepicker({ closeText: 'X' }); <br>Get: var closeText = $('.selector').datepicker('option', 'closeText') ; <br>Settings: $('.selector').datepicker('option', 'closeText', 'X'); <br><br>constrainInput : Boolean : true <br>If set to true, the constraint The current input date format. <br>Initial: $('.selector').datepicker({ constrainInput: false }); <br>Get: var constrainInput = $('.selector').datepicker('option', 'constrainInput'); <br>Settings: $('.selector').datepicker('option', 'constrainInput', false); <br><br>currentText : String : 'Today' <br>Set the text content of today's button, this button It needs to be displayed through the setting of showButtonPanel parameters. <br>Initial: $('.selector').datepicker({ currentText: 'Now' }); <br>Get: var currentText = $('.selector').datepicker('option', 'currentText') ; <br>Settings: $('.selector').datepicker('option', 'currentText', 'Now'); <br><br>dateFormat : String : 'mm/dd/yy' <br>Settings The display format of date strings. <br>Initial: $('.selector').datepicker({ dateFormat: 'yy-mm-dd' }); <br>Get: var dateFormat = $('.selector').datepicker('option', 'dateFormat'); <br>Settings: $('.selector').datepicker('option', 'dateFormat', 'yy-mm-dd'); <br><br>dayNames : Array : ['Sunday ', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] <br>Set the name of each day of the week, starting from Sunday. This content is displayed when the dateFormat is used, and when the mouse is moved to the head of the row in the calendar. <br>Initial: $('.selector').datepicker({ dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'] }); <br>Get: var dayNames = $('.selector').datepicker('option', 'dayNames'); <br>Set: $('.selector').datepicker('option', 'dayNames', ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']); <br><br>dayNamesMin : Array : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] <br>Set the abbreviation for each day of the week, starting from Sunday. This content is displayed when used in dateFormat. The row header in the previous calendar is displayed. .<br>Initial: $('.selector').datepicker({ dayNamesMin: ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'] }); <br>Get: var dayNamesMin = $('.selector').datepicker('option', 'dayNamesMin'); <br>Set: $('.selector').datepicker('option', 'dayNamesMin', ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa']); <br><br>dayNamesShort : Array : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] <br>Set the abbreviation for each day of the week, starting from Sunday. This content is displayed when used in dateFormat. It is displayed in the row header in the previous calendar. . <br>Initial: $('.selector').datepicker({ dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'] }); <br>Get: var dayNamesShort = $('.selector').datepicker('option', 'dayNamesShort'); <br>Set: $('.selector').datepicker('option', 'dayNamesShort', ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam']); <br><br>defaultDate : Date, Number, String : null <br>Settings The date selected when it is first displayed after loading by default. It can be a Date object, a number (counting from today, for example 7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example: '1m 7d'). <br>Initial: $('.selector').datepicker({ defaultDate: 7 }); <br>Get: var defaultDate = $('.selector').datepicker('option', 'defaultDate'); <br>Settings: $('.selector').datepicker('option', 'defaultDate', 7); <br><br>duration : String, Number : 'normal' <br>Set the display of the date control expansion animation Time, the optional options are "slow", "normal", and "fast", '' represents immediately, and the number represents the number of milliseconds. <br>Initial: $('.selector').datepicker({ duration: 'slow' }); <br>Get: var duration = $('.selector').datepicker('option', 'duration') ; <br>Settings: $('.selector').datepicker('option', 'duration', 'slow'); <br><br>firstDay : Number : 0 <br>Set the first day of the week . Sunday is 0, Monday is 1, and so on. <br>Initial: $('.selector').datepicker({ firstDay: 1 }); <br>Get: var firstDay = $('.selector').datepicker('option', 'firstDay'); <br>Settings: $('.selector').datepicker('option', 'firstDay', 1); <br><br>gotoCurrent : Boolean : false <br>If set to true, when the day button is clicked, Will move to the currently selected date, not today. <br>Initial: $('.selector').datepicker({ gotoCurrent: true }); <br>Get: var gotoCurrent = $('.selector').datepicker('option', 'gotoCurrent'); <br>Settings: $('.selector').datepicker('option', 'gotoCurrent', true); <br><br>hideIfNoPrevNext : Boolean : false <br>Set when there is no previous/next selectable In this case, hide the corresponding button. (Default is not available) <br>Initial: $('.selector').datepicker({ hideIfNoPrevNext: true }); <br>Get: var hideIfNoPrevNext = $('.selector').datepicker('option', 'hideIfNoPrevNext'); <br>Settings: $('.selector').datepicker('option', 'hideIfNoPrevNext', true); <br><br>isRTL : Boolean : false <br>If set to true, Then all text is from right to left. <br>Initial: $('.selector').datepicker({ isRTL: true }); <br>Get: var isRTL = $('.selector').datepicker('option', 'isRTL'); <br>Settings: $('.selector').datepicker('option', 'isRTL', true); <br><br>maxDate : Date, Number, String : null <br>Set a maximum selectable date . It can be a Date object, a number (counting from today, for example 7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example: '1m 7d'). <br>Initial: $('.selector').datepicker({ maxDate: ' 1m 1w' }); <br>Get: var maxDate = $('.selector').datepicker('option', 'maxDate' ); <br>Settings: $('.selector').datepicker('option', 'maxDate', ' 1m 1w'); <br>$('.selector').datepicker('option', 'maxDate ', '12/25/2012'); <br><br>minDate : Date, Number, String : null <br>Set a minimum optional date. It can be a Date object, a number (counting from today, for example 7), or a valid string ('y' represents year, 'm' represents month, 'w' represents week, 'd' represents day, for example: '1m 7d'). <br>Initial: $('.selector').datepicker({ minDate: new Date(2007, 1 - 1, 1) }); <br>Get: var minDate = $('.selector').datepicker( 'option', 'minDate'); <br>Settings: $('.selector').datepicker('option', 'minDate', new Date(2007, 1 - 1, 1)); <br>$( '.selector').datepicker('option', 'minDate', '12/25/2012'); <br><br>monthNames : Array : ['January', 'February', 'March', 'April ', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] <br>Set the names of all months. <br>Initial: $('.selector').datepicker({monthNames:['Januar','Februar','Marts','April','Maj','Juni','Juli','August' ,'September','Oktober','November','December']}); <br>Get: var monthNames = $('.selector').datepicker('option', 'monthNames'); <br> Settings: $('.selector').datepicker('option', 'monthNames', ['Januar','Februar','Marts','April','Maj','Juni','Juli',' August','September','Oktober','November','December']); <br><br>monthNamesShort : Array : ['Jan', 'Feb', 'Mar', 'Apr', 'May ', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] <br>Set the abbreviation for all months.<br>Initial: $('.selector').datepicker({monthNamesShort:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug' ,'Sep','Okt','Nov','Dec']}); <br>Get: var monthNamesShort = $('.selector').datepicker('option', 'monthNamesShort'); <br> Settings: $('.selector').datepicker('option', 'monthNamesShort', ['Jan','Feb','Mar','Apr','Maj','Jun','Jul',' Aug','Sep','Okt','Nov','Dec']); <br><br>navigationAsDateFormat : Boolean : false <br>If set to true, the formatDate function will be applied to prevText, nextText and Displayed in the value of currentText, for example, displayed as the name of the month. <br>Initial: $('.selector').datepicker({ navigationAsDateFormat: true }); <br>Get: var navigationAsDateFormat = $('.selector').datepicker('option', 'navigationAsDateFormat'); <br>Settings: $('.selector').datepicker('option', 'navigationAsDateFormat', true); <br><br>nextText : String : 'Next' <br>Set the display of the "next month" link Word. <br>Initial: $('.selector').datepicker({ nextText: 'Later' }); <br>Get: var nextText = $('.selector').datepicker('option', 'nextText') ; <br>Settings: $('.selector').datepicker('option', 'nextText', 'Later'); <br><br>numberOfMonths : Number, Array : 1 <br>Set how many to display at a time months. If it is an integer, it is the number of months displayed. If it is an array, it is the number of rows and columns displayed. <br>Initial: $('.selector').datepicker({ numberOfMonths: [2, 3] }); <br>Get: var numberOfMonths = $('.selector').datepicker('option', 'numberOfMonths '); <br>Settings: $('.selector').datepicker('option', 'numberOfMonths', [2, 3]); <br><br>prevText : String : 'Prev' <br>Settings Display text for the "Last Month" link. <br>Initial: $('.selector').datepicker({ prevText: 'Earlier' }); <br>Get: var prevText = $('.selector').datepicker('option', 'prevText') ; <br>Settings: $('.selector').datepicker('option', 'prevText', 'Earlier'); <br><br>shortYearCutoff : String, Number : ' 10' <br>Set the cutoff year value. If it is a number (0-99), it will be counted from the current year. If it is a string, it will be converted into a number and then added to the current year. When the cutoff year is exceeded, it is considered to be the previous century. <br>Initial: $('.selector').datepicker({ shortYearCutoff: 50 }); <br>Get: var shortYearCutoff = $('.selector').datepicker('option', 'shortYearCutoff'); <br>Settings: $('.selector').datepicker('option', 'shortYearCutoff', 50); <br><br>showAnim : String : 'show' <br>Set the animation of showing and hiding the date plug-in name. <br>Initial: $('.selector').datepicker({ showAnim: 'fold' }); <br>Get: var showAnim = $('.selector').datepicker('option', 'showAnim') ; <br>Settings: $('.selector').datepicker('option', 'showAnim', 'fold'); <br><br>showButtonPanel : Boolean : false <br>Settings related to whether to display on the panel button. <br>Initial: $('.selector').datepicker({ showButtonPanel: true }); <br>Get: var showButtonPanel = $('.selector').datepicker('option', 'showButtonPanel'); <br>Settings: $('.selector').datepicker('option', 'showButtonPanel', true); <br><br>showCurrentAtPos : Number : 0 <br>Set the current month when multiple months are displayed Displayed location. Starting at the xth position from the top/left. <br>Initial: $('.selector').datepicker({ showCurrentAtPos: 3 }); <br>Get: var showCurrentAtPos = $('.selector').datepicker('option', 'showCurrentAtPos'); <br>Settings: $('.selector').datepicker('option', 'showCurrentAtPos', 3); <br><br>showMonthAfterYear : Boolean : false <br>Whether to display the month after the year in the header of the panel. <br>Initial: $('.selector').datepicker({ showMonthAfterYear: true }); <br>Get: var showMonthAfterYear = $('.selector').datepicker('option', 'showMonthAfterYear'); <br>Settings: $('.selector').datepicker('option', 'showMonthAfterYear', true); <br><br>showOn : String : 'focus' <br>Set what event triggers the display date plug-in panel , optional values: focus, button, both <br>Initial: $('.selector').datepicker({ showOn: 'both' }); <br>Get: var showOn = $('.selector'). datepicker('option', 'showOn'); <br>Settings: $('.selector').datepicker('option', 'showOn', 'both'); <br><br>showOptions : Options : { } <br>If you use showAnim to display animation effects, you can use this parameter to add some additional parameter settings. <br>Initial: $('.selector').datepicker({ showOptions: {direction: 'up' }); <br>Get: var showOptions = $('.selector').datepicker('option', ' showOptions'); <br>Settings: $('.selector').datepicker('option', 'showOptions', {direction: 'up'); <br><br>showOtherMonths : Boolean : false <br>Yes Display some date numbers for the previous and next two months in the current panel (not selectable). <br>Initial: $('.selector').datepicker({ showOtherMonths: true }); <br>Get: var showOtherMonths = $('.selector').datepicker('option', 'showOtherMonths'); <br>Settings: $('.selector').datepicker('option', 'showOtherMonths', true); <br><br>stepMonths : Number : 1 <br>When clicking on the previous/next month, it will scroll once months.<br>Initial: $('.selector').datepicker({ stepMonths: 3 }); <br>Get: var stepMonths = $('.selector').datepicker('option', 'stepMonths'); <br>Settings: $('.selector').datepicker('option', 'stepMonths', 3); <br><br>yearRange : String : '-10: 10' <br>Control the year in the drop-down list The number of years displayed can be relative to the current year (-nn: nn) or absolute (-nnnn: nnnn) <br>Initial: $('.selector').datepicker({ yearRange: '2000:2010 ' }); <br>Get: var yearRange = $('.selector').datepicker('option', 'yearRange'); <br>Set: $('.selector').datepicker('option', 'yearRange', '2000:2010'); <br> </div> <br>Event<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="17830" class="copybut" id="copybut17830" onclick="doCopy('code17830')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code17830"> <br>beforeShow : function(input) <br>Trigger this event before the date control displays the panel, and return the instance object of the control that currently triggers the event. <br>Initial: $('.selector').datepicker({ beforeShow: function(input) { ... } }); <br><br>beforeShowDay : function(date) <br>Display panel in date control Previously, this event was triggered when the date on each panel was bound, and the parameter was the date that triggered the event. After calling the function, an array must be returned: [0] Whether this date is optional (true/false), [1] The CSS style name of this date ("" means default), [2] When the mouse is moved above, a prompt will appear content. <br>Initial: $('.selector').datepicker({ beforeShowDay: function(date) { ... } }); <br><br>onChangeMonthYear : function(year, month, inst) <br>The current year This event is triggered when the month or month changes, and the parameters are the changed year and month and the instance of the current date plug-in. <br>Initial: $('.selector').datepicker({ onChangeMonthYear: function(year, month, inst) { ... } }); <br><br>onClose : function(dateText, inst) <br>This event is triggered when the date panel is closed (regardless of whether a date is selected), and the parameters are the selected date and the instance of the current date plug-in. <br>Initial: $('.selector').datepicker({ onClose: function(dateText, inst) { ... } }); <br><br>onSelect : function(dateText, inst) <br>When This event is triggered after a date is selected in the date panel. The parameters are the selected date and the instance of the current date plug-in. <br>$('.selector').datepicker({ onSelect: function(dateText, inst) { ... } }); <br> </div> <br>Method: <br><div class="codetitle"> <span> <a style="CURSOR: pointer" data="37720" class="copybut" id="copybut37720" onclick="doCopy('code37720')"><u>Copy code</u></a></span> The code is as follows: </div> <div class="codebody" id="code37720"> <br>destroy <br>Remove drag functionality from the element. <br>Usage: .datepicker( 'destroy' ) <br><br>disable <br>Disable the dragging function of the element. <br>Usage: .datepicker( 'disable' ) <br><br>enable <br>Enable the dragging function of the element. <br>Usage: .datepicker( 'enable' ) <br><br>option <br>Gets or sets the parameters of the element. <br>Usage: .datepicker( 'option' , optionName , [value] ) <br><br>dialog <br>Open a date plug-in in the dialog plug-in. <br>Usage: .datepicker( 'dialog' , dateText , [onSelect] , [settings] , [pos] ) <br><br>isDisabled <br>Confirm whether the date plugin has been disabled. <br>Usage: .datepicker( 'isDisabled' ) <br><br>hide <br>Hide (close) the previously opened date panel. <br>Usage: .datepicker( 'hide' , [speed] ) <br><br>show <br>.datepicker( 'show' ) <br>Show date plugin. <br>Usage: .datepicker( 'show' ) <br><br>getDate <br>Returns the date selected by the current date plugin. <br>Usage: .datepicker( 'getDate' ) <br><br>setDate <br>Set the current date of the date plug-in. The date parameter can be a number (counting from today, e.g. 7), or a valid string ('y' for year, 'm' for month, 'w' for week, 'd' for day, for example: ' 1m 7d '), null means the current day. <br>Usage: .datepicker( 'setDate' , date ) <br> </div> <br><br><br><strong>Usage explanation of jquery-ui-datepicker<br></strong>1: First When importing relevant js into the page, please note that the order of introduction cannot be wrong <br><br>jquery-1.4.2.min.js <br>jquery-ui.min.js <br>jquery.ui.datepicker.min.js <br>jquery.ui.datepicker-zh-CN.min.js <br>jquery.ui.datepicker-fr.min.js <br>....etc. language packs (add which ones you use) <br>Note :The last sentence of the language pack sets the default Localization of the datepicker <br>Similar to this sentence: setDefaults(....regional[...]) <br>So if the datepicker of the page is no longer set by itself, By default, the Localization of the last introduced language package will prevail. <br><br>2: Page example <br><br>The comments are very clear. The official document of datepicker requires init to set the option first. datepicker, then setter or getter <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="4608" class="copybut" id="copybut4608" onclick="doCopy('code4608')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code4608"> <br><html> <br><head> <br><script type="text/javascript"> <br>$(function() { <br>//$("# datepicker").datepicker(...);//Represents the direct execution of creating datepicker() with the... attribute <br>//You must first init datepicker before setting the datepicker option <br>//$("# datepicker").datepicker('option',...,...); //Represents setting the attribute value of datepicker..., but does not create datepicker(); <br>//$ .datepicker.setDefaults($.datepicker.regional['zh-CN']); <br>$.datepicker.setDefaults($.datepicker.regional['']);//First clean up the regional of the language pack <br>$("#datepicker").datepicker(); <br>$("#datepicker").datepicker('option', $.datepicker.regional['zh-CN']); <br>//$ ("#datepicker").datepicker($.datepicker.regional['zh-CN']);//The execution of this sentence fails because there is $("#datepicker").datepicker(); before <br>$ ("#datepicker").datepicker('option', 'dateFormat','yy-mm-dd');//set dateFormat <br>//var dateFormat = $( "#datepicker" ).datepicker( "option ", "dateFormat" );//get dateFormat <br>//$("#datepicker").datepicker('option', {dateFormat: 'yy-mm-dd'});//set dateFormat <br> }); <br></script>






Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Detailed explanation of jQuery reference methods: Quick start guide Detailed explanation of jQuery reference methods: Quick start guide Feb 27, 2024 pm 06:45 PM

Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded

How to remove the height attribute of an element with jQuery? How to remove the height attribute of an element with jQuery? Feb 28, 2024 am 08:39 AM

How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element

How to use PUT request method in jQuery? How to use PUT request method in jQuery? Feb 28, 2024 pm 03:12 PM

How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u

In-depth analysis: jQuery's advantages and disadvantages In-depth analysis: jQuery's advantages and disadvantages Feb 27, 2024 pm 05:18 PM

jQuery is a fast, small, feature-rich JavaScript library widely used in front-end development. Since its release in 2006, jQuery has become one of the tools of choice for many developers, but in practical applications, it also has some advantages and disadvantages. This article will deeply analyze the advantages and disadvantages of jQuery and illustrate it with specific code examples. Advantages: 1. Concise syntax jQuery's syntax design is concise and clear, which can greatly improve the readability and writing efficiency of the code. for example,

jQuery Tips: Quickly modify the text of all a tags on the page jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on ​​the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

How to tell if a jQuery element has a specific attribute? How to tell if a jQuery element has a specific attribute? Feb 29, 2024 am 09:03 AM

How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute

Understand the role and application scenarios of eq in jQuery Understand the role and application scenarios of eq in jQuery Feb 28, 2024 pm 01:15 PM

jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s

See all articles