[jQuery] How to use Datepicker

개발 창고/Web

[jQuery] How to use Datepicker

로이제로 2024. 3. 23. 23:37

TOC is not supported in this version (ex.Mobile)

Implementing a calendar for date selection on a web screen is very cumbersome. Because of this, I often use APIs, but jQuery UI usually provides these functions as a standard If you import jquery in the script, you can easily use it by just specifying the target of the date picker.

Basic Usage

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Date: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

By default, $("Destination").datepicker(); will prompt a Calendar that allows you to select the date immediately below when you click on the destination element. If you want to customize this calendar, you can add options, such as datepicker ({Option name 1: Option value 1, Option name 2: Option value2}). You can find out more about these options at the site below.

https://api.jqueryui.com/datepicker/

Datepicker Widget | jQuery UI API Documentation

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily. By defaul

api.jqueryui.com

Select a three-month calendar

I'm going to share the forms I've recently written in combination.

$("#datepicker").datepicker({
  numberOfMonths: 3
  , showWeek: true
  , firstDay: 0
  , dateFormat:"yymmdd"
  , prevText: 'Prev Month'
  , nextText: 'Next Month'
  , monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  , monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  , dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  , dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  , dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
  , showMonthAfterYear: true
  , yearSuffix: ' / '
});

numbernumberOfMonths: 3 // Showing three months at a time

showWeek: true // Show Week (1-52)

dateFormat:"yymmdd" // Enter target in 20240323 format (yy-mm-dd: 2023-03-23, yy/mm/dd: 2024/03/23)
monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] // Mark the month name in English
monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] // The day of the week in English
dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']