[Jquery logging] Easy-to-use date function datepicker

ArticleDirectory

• Related Topics

I have been learning JavaScript recently. Of course, the first step isJquery
I was too lazy to make a date form, because the date form requires three columns: year, month, and day. It is quite troublesome and has been there
Circle is not a solution, although it is a solution, and then I usedXT: CommerceThis opensource code retrieves the date form:[HTML] Time calendars for JavascriptBut I think this method is too troublesome, because
Jquery can solve the problem in one line. What should I do with that method?

How to Use the date function?
Step 1: add the jquery kit to the head and/head

<Script Type = "Text/JavaScript" SRC = "Jquery. js" > </SCRIPT>
<! --
Or
-->
<Script SRC = Http://code.jquery.com/jquery-latest.js" > </SCRIPT>

Step 2: Add ui.datepicker.css and UI. datepicker. js jqueryUi Date Picker CSSAndThe jquery UI Date Picker Javascript

<Style Type = "Text/CSS" > @ Import
Url(ui.datepicker.css ); </Style>
<Script Type = "Text/JavaScript" SRC = "UI. datepicker. js" > </SCRIPT>

Step 3: teach you to use four basic methods:

1. Basic syntax (mm/DD/YYYY ).

Jquery ( Function ( $ ){
$ ( '# Example1' ) . Datepicker () ;
}) ;

2. You can also perform operations by adding the icon next to it.

$ ( '# Example2' ) . Datepicker ({ Showon: 'Both' , Showothermonths: True ,

Showweeks: True ,
Firstday: 1 , Changefirstday: False ,

Buttonimageonly: True , Buttonimage: 'Calendar.gif' }) ;

3. Change the time format

$ ( '# Example4' ) . Datepicker ({ Dateformat: 'Yy-mm-dd' , Showon: 'Both' ,
Buttonimageonly:
True , Buttonimage:
'Calendar.gif' }) ;

4. Select a date range

$ ( '# Examplerange' ) . Datepicker ({ Rangeselect: True , Firstday: 1 , Showon:
'Both' ,

Buttonimageonly: True , Buttonimage: 'Calendar.gif' }) ;

5. Initial Talk time, plus 7 days

#
# Increase by 7 days

#
$ ( 'Input selector' ) . Datepicker ({ Defaultdate: + 7 }) ;

Program Execution screen:

Demo Introduction

Download demo files:Datepickerdemo Coreuidatepicker
Reference website:
Http://docs.jquery.com/UI/Datepicker
Http://marcgrabanski.com/code/ui-datepicker/
Http://kelvinluck.com/assets/jquery/datePicker/v2/demo/

Related Topics

• [jquery] Ajax learning notes (1) how to use JSON to verify user forms (0)
• [jquery Notes] Out-of-date Timer: timepicker | jquery plugins
  (0)
• [tutorial] Web simplified and traditional Conversion Program (Google Ajax language API) (0)
• [Ajax] Google map application ~ (0)
• [jquery] [Video] a 12-year-old child told Google about jquery (0)
• [Album]
  Coppermine photo gallery album expander (0)
• [www]
  greasemonkey (0) of Firefox and IE
• [HTML] Time calendars for JavaScript use (1)