Is there a way to have one element automatically expand when another is selected?

I'm currently utilizing the date and time picker from . However, I need some assistance with the current setup. Currently, the date and time pickers are in separate input fields. In order to select a date, I have to click on the Date input field, and for choosing a time, I need to click on the time input field.

What I really want is to have a single input field for both date and time selection. When I click on this one input field, it should automatically load the date picker by default. After selecting a date, it should seamlessly transition to the time picker for selecting the time as well. The output displayed in the input field should look like this: "29 Apr, 2019 at 14:00"

Is there anyone who can assist me in achieving this?

// Initialize DatePicker
$('.datepicker').pickadate({
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',
});

// Initialize TimePicker
$('.timepicker').pickatime({
  clear: '',
  format: 'HH:i'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input type="text" class="datepicker">
<input type="text" class="timepicker">

javascriptjqueryhtmlcss

Answer №1

If you're looking to achieve this functionality, follow these steps:

  • Start by hiding the timepicker using the visibility property
  • When a date is selected with the datepicker, an onSet event will be triggered
  • In the callback handler for the onClose event, trigger a click on the hidden timepicker using jquery's click() method
  • Similar to the datepicker, the timepicker will also dispatch an onSet event. Utilize this event to combine the values of both pickers into one

// DatePicker
$('.datepicker').pickadate({
  onSet: function() {
    $('.timepicker').click();
  },
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',

});

// TimePicker
$('.timepicker').pickatime({
  onSet: function() {
    var tempString = $('.datepicker').val() + " at " + $('.timepicker').val();
    $('.datepicker').val(tempString);
  },
  clear: '',
  format: 'HH:i'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>

<input type="text" class="datepicker">
<input type="text" class="timepicker" style="visibility: hidden;">

If you want individual pickers after setting the date and time, refer to this code snippet:

// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";

$('.datepicker').pickadate({
  onSet: function() {
    if (!initialDateSet) {
      $('.timepicker').click();
    } else {
      var tempString = dPicker.get();
      var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
      $('.datepicker').val(tempString + " " + tempString2);
      backup = $('.datepicker').val();
    }

  },
  onOpen: function() {
    dPicker = this;
    if (initialDateSet) {
      var index = $('.datepicker').val().indexOf("at");
      if ($('.datepicker')[0].selectionStart > index) {
        dPicker.close(true);
        $('.timepicker').click();
      }

    }
  },
  format: 'dd mmm, yyyy',
  today: '',
  clear: '',
  close: '',
});

// TimePicker
$('.timepicker').pickatime({
  onSet: function() {
    var tempString;
    if (!initialDateSet) {
      tempString = $('.datepicker').val() + " at " + $('.timepicker').val();
      $('.datepicker').val(tempString);
      backup = tempString;
      initialDateSet = true;
    } else {
      tempString = backup.substr(0, backup.indexOf("at"));
      $('.datepicker').val(tempString + "at " + $('.timepicker').val());
      backup = $('.datepicker').val();
    }
  },
  clear: '',
  format: 'HH:i'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.jsquot;></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js&qout;></script>

<input type="text" class="datepicker">
<input type="text" class="timepicker" style="visibility: hidden;">

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

Problem with the getJSON function

Here is a question that has been bothering me: I am currently working on a barcode scanner script which retrieves data from a JSON file. The script itself functions properly, except for one issue. After the while loop, I want to display an error alert m ...

javascriptjqueryjsonajaxgetjson

What potential issue could this code be causing with repeated form submissions?

Trying to implement AJAX form submission using PHP code: <!doctype html> <html> <head> <meta charset='utf-8'> <script type='text/javascript' src="./js/jquery.min.js"></script> ...

phpjqueryajax

Troubleshooting: Issues with $oclazyload in AngularJS 1.5

I am currently encountering an issue with the implementation of $oclazyload to defer loading of my components. The code snippet below illustrates the setup: import angular from 'angular'; import uiRouter from 'angular-ui-router'; impor ...

javascriptangularjsoclazyloadlazy-loading

Stop the Bootstrap row from automatically adjusting to the height of the tallest child column element, and instead utilize the extra space below the smaller element

My current framework is Bootstrap 5.2. I am aiming to create two columns, each with a col-md-6 class inside a row. You can visualize the layout through this image: . The challenge I'm facing is the inability to add another row with col-md-6 element ...

htmlcssbootstrap-5

Tips for personalizing Ion text area in Ionic?

Seeking assistance on how to effectively utilize ion-textarea. As a novice in the realm of Ionic, I am encountering various challenges while working with this feature. The issue lies in the fact that instead of displaying a scrollbar on the right side, the ...

cssangularionic-frameworktextarea

Can the styling and variables of Bootstrap4 be altered dynamically?

I have recently started working on a project that utilizes Bootstrap4 for design and layout. However, there is now a need for the ability to change certain core styles (such as font-face, primary color, and background color) dynamically at runtime. Curren ...

csssassbootstrap-4themesmeteor-blaze

Incorporate React JS seamlessly into your current webpage

As I delve into learning React and considering migrating existing applications to React, my goal is to incorporate a React component within an established page that already contains its own HTML and JavaScript - similar to how KnockoutJS's `applyBindi ...

javascriptreactjs

Creating a timer that counts down and executing a SQL query with PHP upon completion

I've implemented a jQuery script that counts down the time until the variable $end, displaying "completed" when it reaches zero. However, I've noticed that changing the time on your computer also affects the countdown. I want my countdown to be ...

phpjquerymysql

Problem with JSON parsing in jQuery on Internet Explorer 8

I am struggling to pinpoint where my mistake is in this code snippet: Javascript: $(document).ready(function(){ $.getJSON('ajax/data.json', function(data) { $.each(data.results, function(i,item){ alert ...

jqueryajaxjson

I am curious to see the number of people who have made their selection

I am currently using JavaScript to alter the text value from "select" to "selected". My next step is to include the selected text in a cart. Can you please provide some guidance? Thank you in advance. PHP CODE : <a class='btn slct' href=&ap ...

javascriptphpjqueryhtml

What is the most reliable method for displaying an SVG shape in any color across various web browsers?

Is there a way to render a 2D SVG shape, which is flat and 100% black, in any color across various browsers? ...

csssvg

What is limiting me from utilizing the entire Google Calendar feed?

I currently have a public Google Calendar set up. My goal is to retrieve appointment data in JSON format from this calendar. When I utilize the following URL https://www.google.com/calendar/feeds/{calendar_id}%40group.calendar.google.com/public/basic?alt ...

javascriptjsongoogle-apigoogle-calendar-api

Tips for utilizing process.stdin in Node.js with Javascript?

Currently, I'm developing a Javascript-based poker game that is designed to process standard input in the following manner: https://i.stack.imgur.com/D1u15.png The initial line of input will consist of an integer indicating the total number of playe ...

javascriptnode.jsprocessstdin

Searching for a single row in JQuery using XML

Currently, I am facing a challenge with the usage of .find() and .attr() functions when attempting to loop through an XML file. The goal is to find and return children elements where the parent's attribute value matches the input provided in the funct ...

xmljquery

Quick fix for obtaining only one response

I'm facing a dilemma where I need to redirect the user to the dashboard page after they log in, but also send their JSON details to my client-side JavaScript. While I know that there can only be one res.send/end/json in a response and dynamic data can ...

javascriptnode.jsexpresshttppassport.js

Changing the time zone of a browser using JavaScript or jQuery

After researching numerous discussions on the topic, it appears that changing the browser's timezone programmatically is not possible. Although the moment-timezone.js library allows us to set timezone for its objects, it does not affect the browser&ap ...

javascriptjqueryangularjstimezonemomentjs

Tips for clearing form validation errors on dynamically populated fields using data stored in localStorage

Currently, I have a form that requires validation. The desired behavior is for the form to display an error message ("this is required") and disable the submit button if any of the input fields are left empty. The validation works correctly as intended, bu ...

javascriptphpjqueryangularjslocal-storage

Exploring the Latest Features: Using Angular 7 with Bootstrap Collapse for Dynamic Aria-Controls

I am currently working on creating my own component to use within an *ngFor loop. I am facing an issue where I need a unique value for my Collapse feature. Right now, when I click on the second main row in the table, the collapse feature only shows the inn ...

htmlangularbootstrap-4

Guide to utilizing variables with Pattern.compile in Java for selenium RC

I am facing a challenge where I need to check if the date in a field corresponds to the current day. In Selenium IDE, this is easily achieved: <tr> <td>storeExpression</td> <td>javascript{var date = new Date ...

javahtmlseleniumselenium-webdriver

Efficient State Management with React-Redux for Streamlined HTTP Requests

In the process of developing a React-Redux application, I have encountered a situation where I need to display a cancel button while a specific HTTP request is ongoing. Upon successful execution of the request, the UI should display the results. If the use ...

javascriptreactjsreduxes6-promise