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

Issue with directive in AngularJS: When trying to access scope.data, it appears

Despite containing elements, Array.length incorrectly reports as 0 in React, JavaScript, and TypeScript

Unable to figure out why information is not being transferred to an array through Mongoose

The debounced function in a React component not triggering as expected

Organizing objects into arrays in Node.js

Detecting Android devices

Locate relevant information within the arrays through the process of filtering

The issue of actions failing to flow from sagas to reducers in React.js

Guide on Retrieving the Current URL in NodeJS

Refresh database records

What are the best practices for securely storing a distinctive client identifier for websockets?

An ELIFECYCLE error was encountered during the production deployment process, resulting in error number

Animating ng-switch transitions within a div element

The functionality of string replacement is ineffective in the Safari browser

My AngularJS controller is failing to display database data in the routed view

Is it possible to use jQuery to load content and notify the calling window?

The issue with the Z-index being ineffective is causing the button to appear behind a container in the HTML-CSS

Illuminate a corresponding regular expression within a text input

Break up a list into separate paragraphs and style each word using individual CSS

Do iframes not utilize parental jquery?