Stylish date picker in CSS

Here is a design mockup along with my current solution. The issue arises when two numbers are adjacent to each other (either horizontally or vertically) as they should merge, illustrated in the mockup below.

For example, when selecting numbers 48-49-50, they should appear like this:

Similarly, numbers 38-39-40-41 from the next screenshot should look like this:

To achieve this effect, I utilize AddClass("active") with the following properties for each clicked number:

  a.active {
    background-color: #3E9EA5;
    border-radius: 9px 9px 9px 9px;
    color: white;
  }
jquerycss

Answer №1

To achieve the merge effect with CSS selectors and javascript, you can utilize jQuery for simplified coding.

The solution involves examining the clicked element along with its surrounding siblings (both above and below) to determine the merging behavior. Comments have been included within the code for clarity. Feel free to reach out if you have any questions or require further assistance.

$(document).ready(function(){
  var awesomeDates = $(".awesome-date");
  
  awesomeDates.on("click", function(){
    //Variables to store neighboring elements
    var prevElement, nextElement, topElement, bottomElement;
    //Toggle class functionality
    if($(this).hasClass("active")){
      $(this).removeClass("active");
      prevElement = $(this).prev();
      if(prevElement.hasClass("merge-right")){
        prevElement.removeClass("merge-right");
      }
      topElement = $(this).prevAll().eq(9);
      if(topElement.hasClass("active")){
        $(this).removeClass("merge-top");
        topElement.removeClass("merge-bottom");
      }
      bottomElement = $(this).nextAll().eq(9);
      if(bottomElement.hasClass("active")){
        $(this).removeClass("merge-bottom");
        bottomElement.removeClass("merge-top");
      }
    }else{
      $(this).addClass("active");
      prevElement = $(this).prev();
      nextElement = $(this).next();
      if(prevElement.hasClass("active")){
        prevElement.addClass("merge-right");
      }
      if(nextElement.hasClass("active")){
        $(this).addClass("merge-right");
      }
      topElement = $(this).prevAll().eq(9);
      if(topElement.hasClass("active")){
        $(this).addClass("merge-top");
        topElement.addClass("merge-bottom");
      }
      bottomElement = $(this).nextAll().eq(9);
      if(bottomElement.hasClass("active")){
        $(this).addClass("merge-bottom");
        bottomElement.addClass("merge-top");
      }
    }
  });
});
.dater {
  display: block;
  width: 330px;
  height: 250px;
  background-color: #f7f7f7;
}

/* CSS styles for dater list */
.dater-list {
  margin: 0;
  padding: 2px;
  height: auto;
}

.dater-list .awesome-date {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  padding: 5px;
  border-radius: 50%;
  text-align: center;
  background-color: #fff;
  margin: 1px 1px 0 1px;
  transition: all 1s ease;
}

.dater-list .awesome-date.active{
  background-color: #1abc9c;
  color: #fff;
}
/* Styling for merged date elements */
.dater-list li.awesome-date.active + li.awesome-date.active:not(:nth-child(10n+1)){
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  margin-left: 0;
  padding-left: 6px;
}

.dater-list li.awesome-date.active.merge-right:not(:nth-child(10n)){
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  margin-right: 0;
  padding-right: 6px;
}

.dater-list li.awesome-date.active.merge-top:not(:nth-child(-n+10)){
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  padding-top: 6px;
}

.dater-list li.awesome-date.active.merge-bottom{
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dater">
  <ul class="dater-list">
  <!-- Placeholder HTML content to be dynamically populated -->
  </ul>
</div>

If you need assistance with integrating this code into your project or have any queries, don't hesitate to ask. Also, remember to include the initial HTML and CSS next time for a smoother development process.

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

Verify if the text field is currently blank or has content before applying attributes

How can I disable one text box if another specific text box is filled within a div containing multiple text boxes? For example: When I enter text in textbox(4), I want to automatically disable textbox(1). And if I remove the text from textbox(4), I want t ...

javascriptjquery

Fetching information through AJAX in NodeJS and saving it in a database

I am facing an issue with retrieving data from the client side in my NodeJS application. I have prepared JSON data on the client side, which can be viewed in this codepen link. On the server side, I am attempting to receive this data from the client: var ...

jquerymysqlajaxnode.jsbody-parser

Using AJAX to load dynamically generated DIV IDs

On my website, I have a "command center" bar featuring a log in / log out button, a my account button, and a messages button. When the user is not logged in, only the login button is displayed. However, once the user logs in, the command center shows the l ...

jqueryajax

Make sure the header spans the full width of the body

I am trying to create a header that spans the entire width of the body, but I am encountering some issues with white space on both sides. I initially attempted to set the width to 100% on the header div, but this did not eliminate the white space. I then e ...

jqueryhtmlcss

Troubleshooting HTML/CSS problem related to background size adjustment

Struggling with setting a background image on my HTML code. The issue is when I resize the browser, the image either zooms in too much or cuts off part of the website. Is there a way to resize the background image based on the browser window size? Appreci ...

htmlcssimageresize

What is the hexadecimal color code for a specific element's background?

How can I retrieve the background color code of a specified element? var backgroundColor = $(".element").css("background-color"); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="elemen ...

javascriptjquerycsshexbackground-color

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

htmlcss

Tabindex issue arises due to a conflict between Alertify and Bootstrap 4 modal

When trying to call an Alertify Confirmation dialog within a running Bootstrap 4 Modal, I encountered an issue with the tab focus. It seems to be stuck in the last element and not working as expected. I suspect that this might have something to do with th ...

javascripthtmljquerybootstrap-4alertify

What is the best way to navigate back on a button click in jquery AJAX without causing a page refresh?

Is there a way to navigate back without refreshing the page? I am fetching data dynamically using AJAX, but when I try to go back using the browser button, it takes me all the way back to the starting point. Let's look at the situation: 3 Different ...

javascriptphpjqueryhtmlajax

Is there a way to use JavaScript to import several custom fonts at once?

Is there a way to import a long list of custom fonts as icons using Javascript? I have been obtaining the font list from an API, but importing them one by one with pure CSS using @font-face is time-consuming and difficult to maintain. @font-face { fon ...

javascriptcssreactjsfontsfont-face

What is the process for importing jQuery UI with ES6/ES7 syntax?

Struggling to integrate jQuery UI functionality into my reactJS/Redux application. I have installed both jQuery and jQuery UI using: npm install jquery jquery-ui Then, attempted the following imports: import $ from 'jquery'; import jQuery from ...

jqueryjquery-uireactjsnpmredux

Switching the checkbox value upon clicking a div element

One challenge I am facing is with a checkbox that saves its value and title in the local storage when clicked. This checkbox is located within a div, and I want the checkbox value to change whenever any part of the div is clicked. Despite my efforts, I hav ...

javascripthtmlcssangularjscordova

AJAX request lacks the 'access-control-allow-origin' header

I'm currently integrating a weather API into my app to display real-time weather information. Although I've used this API before, I am now attempting to fetch the data asynchronously using AJAX to avoid full page reloads. Below is the JavaScrip ...

javascriptjqueryajax

Executing a JQuery function from varying environments

While this question may seem basic, I am having trouble understanding the behavior described. I have written some JavaScript code and I am puzzled why the second call to foo does not work. You can find the code in this JSFiddle link. $.fn.foo = function( ...

javascriptjquery

Access a designated tab within a CSS-designed tab system

Can anyone offer some assistance? I currently have a tab structure created using CSS. The first tab is set as the default when the page loads. I am looking to create a link from another page that will take users directly to the page with the tabs and ope ...

javascriptphpcsstabs

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascripthtmlcssangularjs

Ensuring the clickable area of the button aligns perfectly with the button itself and adjusting the arrow position to be

Check out the sandbox here: https://codesandbox.io/s/vigilant-currying-h7c3r?file=/styles.css If you are looking for the classes .line and .arrow, they are what you need. When you create an event, notice how the arrows appear too low, with the clickable a ...

css

Click a button to show or hide text

I am attempting to create a button that will toggle text visibility from hidden using 'none' to visible using 'block'. I have tried the following code but unfortunately, it did not yield the desired outcome. <p id='demo' s ...

javascriptcsshtmldom-events

Event handler assigned to a group of constantly changing elements

Here is my JavaScript code: $(document).ready(function(){ $('#data1').change(function(){ title = $('#title1').val(); url = $('#url1').val(); $.post('library/edit.php',{title:title, url:ur ...

javascriptajaxjquery

Tips for customizing text color in a disabled MUI TextField?

In the disabled TextField, I want the text color to be black instead of the default gray. I attempted the following after finding inspiration from this source: <TextField id="outlined-basic" value={'https://git.responsive.software/my-app ...

cssmaterial-uitextfield