SlideShare a Scribd company logo
1 of 20
Jason
Keyboard interaction
   PAGE UP: Move to the previous month.
   PAGE DOWN: Move to the next month.
   CTRL+PAGE UP: Move to the previous year.
   CTRL+PAGE DOWN: Move to the next year.
   CTRL+HOME: Move to the current month. Open the
    datepicker if closed.
   CTRL+LEFT: Move to the previous day.
   CTRL+RIGHT: Move to the next day.
   CTRL+UP: Move to the previous week.
   CTRL+DOWN: Move the next week.
   ENTER: Select the focused date.
   CTRL+END: Close the datepicker and erase the date.
   ESCAPE: Close the datepicker without selection.
Localization
    default (English)


    You can restore the default localizations with:

      $.datepicker.setDefaults( $.datepicker.regional[ "" ] );

    And can then override an individual datepicker for a specific locale:

      $( selector ).datepicker( $.datepicker.regional[ "fr" ] );
altField
 Type: Selector or jQuery or Element
 Default: “”
 $( ".selector" ).datepicker(

     { altField:"#actualDate“ });
altFormat
 Type: String
 Default: "“
 $( ".selector" ).datepicker(

     { altFormat: "yy-mm-dd" });
appendText
 Type: String
 Default: "“
 $( ".selector" ).datepicker(

     { appendText: "(yyyy-mm-dd)" });
changeMonth, changeYear
 Type: Boolean
 Default: false
 $( ".selector" ).datepicker(

           { changeYear: true });
constrainInput
 Type: Boolean
 Default: true
 $( ".selector" ).datepicker(

           { constrainInput: false });
currentText
 Type: Boolean
 Default: true
 $( ".selector" ).datepicker(

     { currentText: "Now“,
         showButtonPanel: true });
minDate, maxDate
   Type: Date or Number or String
   Default: null

   Date: A date object containing the minimum date.
   Number: For example
                 2 represents two days from today
                 -1 represents yesterday.
   String: For example, "+1m +7d" represents one month and seven
    days from today.

   $( ".selector" ).datepicker({ minDate: “+1m +7d”});
hideIfNoPrevNext
 Type: Boolean
 Default: false
 $( ".selector" ).datepicker(

  {
     hideIfNoPrevNext: true,
          minDate: “+1m +7d”
    });
isRTL
 Type: Boolean
 Default: false


   Whether the current language is drawn from
    right to left.

   $( ".selector" ).datepicker({ isRTL: true });
numberOfMonths
   Type: Number or Array
   Default: 1
   The number of months to show at once.

   Number: The number of months to display in a single row.
   Array: An array defining the number of rows and columns
    to display.

   $( ".selector" ).datepicker(
        { numberOfMonths: [ 2, 3 ] });
showCurrentAtPos
 Type: Number
 Default: 0
 The showCurrentAtPos option defines
  which position to display the current
  month in.
 $( ".selector" ).datepicker(
     { showCurrentAtPos: 3,
           numberOfMonths: [ 2, 3 ]
     });
selectOtherMonths
 Type: Boolean
 Default: false
 $( ".selector" ).datepicker(

     {
         selectOtherMonths: true ,
         showOtherMonths: true
     });
stepMonths
 Type: Number
 Default: 1
 Set how many months to move when clicking
  the previous/next links.

   $( ".selector" ).datepicker({ stepMonths: 3 });
showWeek
 Type: Boolean
 Default: false
 When true, a column is added to show
  the week of the year.

   $( ".selector" ).datepicker(
             { showWeek: true });
weekHeader
 Type: String
 Default: "Wk“
 The text to display for the week of the
  year column heading

   $( ".selector" ).datepicker(
       { weekHeader: "W"
         showWeek:true});
showMonthAfterYear
 Type: Boolean
 Default: false
 Whether to show the month after the
  year in the header.

   $( ".selector" ).datepicker(
       { showMonthAfterYear: true });
showButtonPanel
 Type: Boolean
 Default: false
 Whether to show the button panel.
 $( ".selector" ).datepicker(

     { showButtonPanel: true });

More Related Content

Viewers also liked (12)

20120601_jquery tree traversal_drake
20120601_jquery tree traversal_drake20120601_jquery tree traversal_drake
20120601_jquery tree traversal_drake
 
React.js 20150828
React.js 20150828React.js 20150828
React.js 20150828
 
TypeScript by Howard
TypeScript by HowardTypeScript by Howard
TypeScript by Howard
 
flexbox report
flexbox reportflexbox report
flexbox report
 
Power shell object
Power shell objectPower shell object
Power shell object
 
Bootstrap–component
Bootstrap–componentBootstrap–component
Bootstrap–component
 
Vic weekly learning_20151120
Vic weekly learning_20151120Vic weekly learning_20151120
Vic weekly learning_20151120
 
What is new in visual studio 2015
What is new in visual studio 2015What is new in visual studio 2015
What is new in visual studio 2015
 
Ian 20150116 java script oop
Ian 20150116 java script oopIan 20150116 java script oop
Ian 20150116 java script oop
 
Expression tree
Expression treeExpression tree
Expression tree
 
PostCss
PostCssPostCss
PostCss
 
ReactJs
ReactJsReactJs
ReactJs
 

More from LearningTech (20)

vim
vimvim
vim
 
Docker
DockerDocker
Docker
 
Semantic ui
Semantic uiSemantic ui
Semantic ui
 
node.js errors
node.js errorsnode.js errors
node.js errors
 
Process control nodejs
Process control nodejsProcess control nodejs
Process control nodejs
 
Expression tree
Expression treeExpression tree
Expression tree
 
SQL 效能調校
SQL 效能調校SQL 效能調校
SQL 效能調校
 
Vic weekly learning_20160504
Vic weekly learning_20160504Vic weekly learning_20160504
Vic weekly learning_20160504
 
Reflection & activator
Reflection & activatorReflection & activator
Reflection & activator
 
Node child process
Node child processNode child process
Node child process
 
20160415ken.lee
20160415ken.lee20160415ken.lee
20160415ken.lee
 
Peggy elasticsearch應用
Peggy elasticsearch應用Peggy elasticsearch應用
Peggy elasticsearch應用
 
Vic weekly learning_20160325
Vic weekly learning_20160325Vic weekly learning_20160325
Vic weekly learning_20160325
 
D3js learning tips
D3js learning tipsD3js learning tips
D3js learning tips
 
git command
git commandgit command
git command
 
Asp.net MVC DI
Asp.net MVC DIAsp.net MVC DI
Asp.net MVC DI
 
Vic weekly learning_20151127
Vic weekly learning_20151127Vic weekly learning_20151127
Vic weekly learning_20151127
 
Mocha.js
Mocha.jsMocha.js
Mocha.js
 
R language
R languageR language
R language
 
20151120 ian cocos2d js
20151120 ian cocos2d js20151120 ian cocos2d js
20151120 ian cocos2d js
 

20121228 jQueryui - datepicker - By Jason

  • 2. Keyboard interaction  PAGE UP: Move to the previous month.  PAGE DOWN: Move to the next month.  CTRL+PAGE UP: Move to the previous year.  CTRL+PAGE DOWN: Move to the next year.  CTRL+HOME: Move to the current month. Open the datepicker if closed.  CTRL+LEFT: Move to the previous day.  CTRL+RIGHT: Move to the next day.  CTRL+UP: Move to the previous week.  CTRL+DOWN: Move the next week.  ENTER: Select the focused date.  CTRL+END: Close the datepicker and erase the date.  ESCAPE: Close the datepicker without selection.
  • 3. Localization  default (English) You can restore the default localizations with: $.datepicker.setDefaults( $.datepicker.regional[ "" ] ); And can then override an individual datepicker for a specific locale: $( selector ).datepicker( $.datepicker.regional[ "fr" ] );
  • 4. altField  Type: Selector or jQuery or Element  Default: “”  $( ".selector" ).datepicker( { altField:"#actualDate“ });
  • 5. altFormat  Type: String  Default: "“  $( ".selector" ).datepicker( { altFormat: "yy-mm-dd" });
  • 6. appendText  Type: String  Default: "“  $( ".selector" ).datepicker( { appendText: "(yyyy-mm-dd)" });
  • 7. changeMonth, changeYear  Type: Boolean  Default: false  $( ".selector" ).datepicker( { changeYear: true });
  • 8. constrainInput  Type: Boolean  Default: true  $( ".selector" ).datepicker( { constrainInput: false });
  • 9. currentText  Type: Boolean  Default: true  $( ".selector" ).datepicker( { currentText: "Now“, showButtonPanel: true });
  • 10. minDate, maxDate  Type: Date or Number or String  Default: null  Date: A date object containing the minimum date.  Number: For example 2 represents two days from today -1 represents yesterday.  String: For example, "+1m +7d" represents one month and seven days from today.  $( ".selector" ).datepicker({ minDate: “+1m +7d”});
  • 11. hideIfNoPrevNext  Type: Boolean  Default: false  $( ".selector" ).datepicker( { hideIfNoPrevNext: true, minDate: “+1m +7d” });
  • 12. isRTL  Type: Boolean  Default: false  Whether the current language is drawn from right to left.  $( ".selector" ).datepicker({ isRTL: true });
  • 13. numberOfMonths  Type: Number or Array  Default: 1  The number of months to show at once.  Number: The number of months to display in a single row.  Array: An array defining the number of rows and columns to display.  $( ".selector" ).datepicker( { numberOfMonths: [ 2, 3 ] });
  • 14. showCurrentAtPos  Type: Number  Default: 0  The showCurrentAtPos option defines which position to display the current month in.  $( ".selector" ).datepicker( { showCurrentAtPos: 3, numberOfMonths: [ 2, 3 ] });
  • 15. selectOtherMonths  Type: Boolean  Default: false  $( ".selector" ).datepicker( { selectOtherMonths: true , showOtherMonths: true });
  • 16. stepMonths  Type: Number  Default: 1  Set how many months to move when clicking the previous/next links.  $( ".selector" ).datepicker({ stepMonths: 3 });
  • 17. showWeek  Type: Boolean  Default: false  When true, a column is added to show the week of the year.  $( ".selector" ).datepicker( { showWeek: true });
  • 18. weekHeader  Type: String  Default: "Wk“  The text to display for the week of the year column heading  $( ".selector" ).datepicker( { weekHeader: "W" showWeek:true});
  • 19. showMonthAfterYear  Type: Boolean  Default: false  Whether to show the month after the year in the header.  $( ".selector" ).datepicker( { showMonthAfterYear: true });
  • 20. showButtonPanel  Type: Boolean  Default: false  Whether to show the button panel.  $( ".selector" ).datepicker( { showButtonPanel: true });