Open In App

jQuery UI Datepicker buttonImageOnly Option

Last Updated : 19 Mar, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker buttonImageOnly option is used to check whether the button image should be rendered by itself instead of inside a button element.

Syntax:

$( ".selector" ).datepicker({
  buttonImageOnly: true/false
});

CDN Link: First, add jQuery UI scripts needed for your project.

<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css”>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>

Example:

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="utf-8" />
    <link href=
        rel="stylesheet" />
    </script>
    </script>
  
    <!-- Javascript -->
    <script>
        $(function () {
            $("#gfg").datepicker({
                showOn: "both",
                buttonImage: 
                buttonImageOnly: true,
                //buttonText: "Select date"
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>jQuery UI datepicker buttonImageOnly Option</h3>
  
    <div>Enter Date: <input type="text" id="gfg" /></div>
</body>
  
</html>


Output:

Reference: https://api.jqueryui.com/datepicker/#option-buttonImageOnly



Previous Article
Next Article

Similar Reads

React Suite DatePicker DatePicker Props
React suite is a library of React components, sensible UI design, and a friendly development experience. It is supported in all major browsers. It provides pre-built components of React which can be used easily in any web application. In this article, we’ll learn about React suite DatePicker Prop. The DatePicker Component is used to choose a time o
5 min read
jQuery UI Datepicker dayNamesShort Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. The jQuery UI Datepicker dayNamesShort option is used to set the short form of the day name and can display it. The day of the week starts with Sunday. Syntax: $( ".selector" ).datepi
1 min read
jQuery UI Datepicker beforeShowDay Option
The jQuery UI beforeShowDay is an option in Datepicker. By using this option we can call any function by using each day. This is executed before showing the calendar. We don’t want some days to be selected by users (say all tickets for that day is sold-out) then we can apply this option and disable the days for selection by the user. The beforeShow
4 min read
jQuery UI datepicker option() Method
jQuery UI datepicker option(optionName, value) method is used to set the value of the button option associated with the specified optionName. Syntax: $( ".selector" ).datepicker( "option", "disabled", true )Parameters: optionName: Option to be checked.value: Value to be checkedReturn values: This method returns an object value. Approach: First, add
1 min read
jQuery UI Datepicker altFormat Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI Datepickers widget allow users to enter dates easily and visually. In this article, we will see how to use the altFormat option in jQuery UI Datepicker. The altFormat option
1 min read
jQuery UI Datepicker altField Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI datepickers widget allow users to enter dates easily and visually. In this article, we will see how to use altField option in jQuery UI Datepicker. The altField option is us
1 min read
jQuery UI Datepicker buttonText Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use buttonText option in jQuery UI Datepicker. The buttonTex
1 min read
jQuery UI Datepicker appendText Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use appendText option in jQuery UI Datepicker. The appendTex
1 min read
jQuery UI Datepicker autoSize Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQueryUI Datepickers widget in jQueryUI allow users to enter dates easily and visually. In this article we will see how to use autoSize option in jQuery UI Datepicker. The autoSize op
2 min read
jQuery UI Datepicker showButtonPanel Option
jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI Datepickers widget allows users to enter dates easily and visually. In this article, we will see how to use the showButtonPanel option in jQuery UI Datepicker. The showButto
1 min read