How to conceal the day picker in jQuery UI datepicker

I am facing a problem that has been addressed before. As someone with only basic knowledge of CSS, I am a bit confused here. I have two datepickers in my code.

<style>
.ui-datepicker-calendar {
    display: none;
    }
</style>

Unfortunately, both datepickers lose the option to pick the day. However, I would like to retain this option for the second one (

name="datepicker1" id = "datepicker1"
).

I attempted the following:

<style>  
    #datepicker.ui-datepicker-calendar {
        display: none;
    }
</style>

but it did not yield any results. The datepicker I want to remove is:

<div id="datepicker" name="datepicker"></div>

Edit: I want to keep the option to select the month and year while removing the day-picking option from the first datepicker. I found a solution for showing only the month and year in a datepicker here, but I am struggling to find a way to hide the day-picking option for just one of the datepickers.

Answer №1

For optimal selection, consider adding a space between #datepicker and .ui-datepicker-calendar. This will ensure that both the id and class are selected, not just items that have both attributes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The AJAX call is successfully returning the expected response, however, the HTML content is not being

https://i.sstatic.net/8Loq1.pngI've been working on a project where I need to position some HTML elements based on the response I get. However, I've encountered an issue where even though the response is returned, nothing is changing on the page. ...

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please. Here is the input that I have: <input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-contro ...

What is the best way to increase the height of a div up to a specific point before allowing it to scroll?

Is there a way to make a div expand to fit its contents up to 250px and then scroll if necessary? I attempted using the following CSS: text-overflow: ellipsis; max-height: 250px; overflow-y: scroll; However, this solution doesn't achieve the desired ...

Get your hands on large files with ease by utilizing jQuery or exploring alternative methods

Within my User Interface, there exists an Advanced Search section where the user can select from 7 different options as depicted in the diagram. Based on these selections, a web service is triggered. This web service returns search results in JSON format, ...

Following an update, Storybook is failing to apply JSX styles

After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...

Redirection with Mod_Rewrite

I'm currently facing an issue with mod_rewrite on my hosting platform. Everything was working smoothly until I decided to reorganize my directories. As a result, all the pages that were previously indexed by Google now have an incorrect extension. I o ...

The div is not showing the image as expected

Having some trouble creating a slideshow within my angular application. Struggling to get the images to display in the html code. To tackle this, I decided to create a separate component specifically for the slideshow (carousel.component). In the main app ...

Creating visually appealing websites is made easy with Bootstrap 5's innovative image and

I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image. Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the imag ...

Spin an object on a stationary axis

https://i.sstatic.net/8dT9W.gif Is there a method to create a similar effect using CSS, JS, or GSAP? ...

Navigate to a section that has been dynamically loaded through ajax

My page displays a list of products in alphabetical order, with the products dynamically loaded via ajax as the user scrolls. At the top of my page, I have an alphabet list (A-Z) that allows users to click on any letter to jump to the list of products st ...

Struggling to keep up with responsive behavior on a page featuring vertically and horizontally centered content that spans the full height

I'm working on a full-height website and the first section needs to have both vertical and horizontal centered content. The issue I'm facing is that there's an image included, which doesn't scale responsively when the screen size change ...

Struggling to close (or conceal) a modal following an ajax request

I have a JavaScript function that sends data to a PHP script. The goal is to hide a div with the class "reveal-modal-refer" and then load a short script from '../message_alerts/refer_message_box.php' into another div with the class 'reveal-m ...

Deactivate the form element when a user selects another button

I am facing an issue with two buttons that are linked to the same modal form. Here is the code snippet for the form: <form name="addUser" ng-submit="(addUser.$valid) ? add() : '';"> <div class="form-group has-feedback" ng-class="ad ...

Show button once modal has been closed

I have a 'start' button that triggers a modal window with an embedded video. Once the user closes the modal, I want to show a 'redeem' button after a delay of 6 seconds. HTML: <a id="video-start" onclick="openVideoModal()"><i ...

I'm having trouble understanding how to use JQuery's .live and .remove methods together

Check out this working jsfiddle, except for the function I'm troubleshooting. I am working on code that appends a table to a form when the value changes in the quantity field. I have two goals: Allow only one extra line at a time. Remove the extra ...

Step-by-step guide on achieving 100% height for a child element within a parent using Flexbox

Currently facing an issue where trying to make a child element take up 100% of the remaining height of its parent container causes the child's height to go beyond the boundaries of the parent. HTML .container { height: 340px; /* background-i ...

Submission handling with JQuery forms is not functioning

Currently troubleshooting my jQuery contact form submission handler. For some reason, the code isn't working as expected and I'm not sure where the issue lies. Upon form submission, there should be a success or error alert displayed, but nothing ...

Overflow of text arranged horizontally within a span element situated inside a div container

I am currently working on developing a ticketing system that involves using nested div elements to organize content. Each ticket is represented by a main div containing various other nested divs and media such as images. While the functionality of the sys ...

What is the best way to set the width of a nextjs Image using CSS styles

Do you think it's more beneficial to use 'next/image' rather than the traditional img tag? If so, why? I am trying to display an image by specifying width and height in styles using a class called 'img', like this... <img class ...

Implementing a delete functionality within a loop on a JavaScript object array

I have a JavaScript object with the following structure: var partner = { p_name: { value: partner_name, label: "Name" }, p_id: { value: partner_ID, label: "ID" }, p_status: { value: partner_status, label: "Status" }, p_email: { value: partner_emai ...