js简单日期选择插件

js简单日期选择插件
价格 免费
插件介绍
一款开发人员友好的js简单日期选择插件,可以自定义很容易二次开发。JavaScript原生代码开发的日期选择插件。
  1. const input = document.getElementById('example');
  2. const datepicker = new TheDatepicker.Datepicker(input);
  3. datepicker.render();
  1. // set initial date
  2. datepicker.options.setInitialDate();
  3.  
  4. // set initial month
  5. datepicker.options.setInitialMonth();
  6.  
  7. // hide on blur
  8. datepicker.options.setHideOnBlur();
  9.  
  10. // hide on select
  11. datepicker.options.setHideOnSelect();
  12.  
  13. // set date format, e.g. j. n. Y
  14. datepicker.options.setInputFormat();
  15.  
  16. // set the first day of week
  17. datepicker.options.setFirstDayOfWeek();
  18.  
  19. // set min/max dates
  20. datepicker.options.setMinDate();
  21. datepicker.options.setMaxDate();
  22.  
  23. // limits the year selection
  24. datepicker.options.setDropdownItemsLimit(1900, 2100);
  25.  
  26. // show/hide days when out of month
  27. datepicker.options.setDaysOutOfMonthVisible();
  28.  
  29. // fixed rows count
  30. datepicker.options.setFixedRowsCount();
  31.  
  32. // toggle selection
  33. datepicker.options.setToggleSelection();
  34.  
  35. // show Deselect button
  36. datepicker.options.setShowDeselectButton();
  37.  
  38. // show Close button
  39. datepicker.options.setShowCloseButton();
  40.  
  41. // show Reset button
  42. datepicker.options.setShowResetButton();
  43.  
  44. // allow empty
  45. datepicker.options.setAllowEmpty();
  46.  
  47. // set title
  48. datepicker.options.setTitle();
  49.  
  50. // show month picker as a dropdown
  51. datepicker.options.setMonthAsDropdown();
  52.  
  53. // show year picker as a dropdown
  54. datepicker.options.setYearAsDropdown();
  55.  
  56. datepicker.options.setMonthAndYearSeparated();
  57. datepicker.options.setPositionFixing();
  58.  
  59. datepicker.options.setDateAvailabilityResolver((date) => {
  60. // return true;
  61. });
  62.  
  63. datepicker.options.setCellContentResolver((day) => {
  64. // return day.dayNumber;
  65. });
  66.  
  67. datepicker.options.addCellClassesResolver((day) => {
  68. // if (day.dayNumber === 20) return ['red'];
  69. // if (day.dayNumber === 10) return ['green'];
  70. return [];
  71. });
  72.  
  73. datepicker.options.addDayModifier((day) => {
  74. // day.isSunday = day.dayOfWeek === TheDatepicker.DayOfWeek.Sunday;
  75. });
  76.  
  77. datepicker.options.setCellClassesResolver((day) => {
  78. // return [];
  79. });
  80.  
  81. datepicker.options.onBeforeSelect((event, day, previousDay) => {
  82. // callback
  83. });
  84.  
  85. datepicker.options.onSelect((event, day, previousDay) => {
  86. // callback
  87. });
  88.  
  89. datepicker.options.onBeforeSwitch((event, isOpening) => {
  90. // callback
  91. });
  92.  
  93. datepicker.options.onSwitch((event, isOpening) => {
  94. // callback
  95. });
  96.  
  97. datepicker.options.onBeforeGo((event, month, previousMonth) => {
  98. // callback
  99. });
  100.  
  101. datepicker.options.onGo((event, month, previousMonth) => {
  102. // callback
  103. });
  104.  
  105. // set prefix
  106. datepicker.options.setClassesPrefix();
  107.  
  108. // set go back HTML
  109. datepicker.options.setGoBackHtml();
  110.  
  111. // set go forward HTML
  112. datepicker.options.setGoForwardHtml();
  113.  
  114. // set close HTML
  115. datepicker.options.setCloseHtml();
  116.  
  117. // set reset HTML
  118. datepicker.options.setResetHtml();
  119.  
  120. // set deselect HTML
  121. datepicker.options.setDeselectHtml();
  • 最新评论
  • 总共 0 条评论