Choose a specific date on a Materialize datepicker and set it as the selected date

Question

Choose a specific date on a Materialize datepicker and set it as the selected date

I am currently developing an application using Materialize that includes two datepickers:

$(document).ready(function(){
    $('#outDate').datepicker({
        format: 'dd-mm-yyyy'
    });
});


$(document).ready(function(){
    $('#returnDate').datepicker({
        format: 'dd-mm-yyyy',
    });
});

My current challenge is passing the selected date from datepicker 1 ('#outDate') to datepicker 2 ('#returnDate'). I have consulted the Materialize documentation, but so far I have not been successful in achieving this. Can anyone provide assistance?

In addition, I am utilizing both Javascript and AngularJS.

Thank you in advance for any help!

javascript angularjs materialize

Answer 1

Answer №1

Here's an example of how you can achieve this:


    $(document).ready(function(){
        $('#outDate').datepicker({
            format: 'dd-mm-yyyy',
            onSelect: function(date) {
                var selectedDate = $("#outDate").datepicker('getDate').getDate(); // get selected date of #outDate
                $('#returnDate').datepicker('defaultDate', new Date(selectedDate)); // set #outDate date to #returnDate
            }
          });
       });

       $(document).ready(function(){
           $('#returnDate').datepicker({
               format: 'dd-mm-yyyy',
           });
         });

You can view a working fiddle here

Answer 2

Here's an example of how you can achieve this:


    $(document).ready(function(){
        $('#outDate').datepicker({
            format: 'dd-mm-yyyy',
            onSelect: function(date) {
                var selectedDate = $("#outDate").datepicker('getDate').getDate(); // get selected date of #outDate
                $('#returnDate').datepicker('defaultDate', new Date(selectedDate)); // set #outDate date to #returnDate
            }
          });
       });

       $(document).ready(function(){
           $('#returnDate').datepicker({
               format: 'dd-mm-yyyy',
           });
         });

You can view a working fiddle here

Choose a specific date on a Materialize datepicker and set it as the selected date

Answer №1

Similar questions

producing a NaN result when calling a reducer with an integer value

An AngularJS error has been caught: [$injector:modulerr]

Tips for ensuring that your modal functions properly with an image tag within a figure tag

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

Having trouble changing the query string in the URL with Angular 4?

Disappearance of icon upon hovering in CSS

Incorporate a generic type into a React Functional Component

Is there a way to bind data exclusively upon form submission in Angular2?

Issue: Actions should be in the form of plain objects. However, the given type is 'Promise'. To resolve this, consider incorporating middleware into your React Native store

Module.exports causing keyword errors in eslint

Ways to fetch additional Product Cards using JSON and a nextPage parameter

Running multiple instances of setTimeout() in JQuery

CORS blocked the JavaScript Image's request

Looking for some advice on tackling this JavaScript challenge - how can I effectively split an array?

generating a dynamic string array containing particular elements

Working with both Javascript and jQuery code within a single HTML file

Having trouble getting CSS3 Keyframes to function properly?

Hiding a parent DIV in JS based on specific content: Here's how

Vue component fails to trigger upon receiving the 'mouseleave' event

ajax request sends data to php file, which then processes the data and sends it back using $_POST