Set Date Picker Value Programmatically

Topic: Set Date Picker Value Programmatically

Michael Baertschi pro asked 7 years ago

Hi there Is there a possibility to set the date picker's selected date programmatically (maybe with jQuery or does the picker even have an API)? Thanks for your help and. Michael

Add comment

jittu92 free answered 7 years ago

0 0 Best answer

yes that worked. Thank you for the code sample.

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

jittu92,

below I share you, my working file that works with version MDB Pro 4.3.

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>
    
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    
    <link href="css/bootstrap.min.css" rel="stylesheet">
    
    <link href="css/mdb.min.css" rel="stylesheet">
    
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
   
    
    <div class="container">
        
        <div class="row">
            
            <div class="col pt-4">
                
                <div class="md-form">
                    <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
                    <label for="date-picker-example">Try me...</label>
                </div>
                
            </div>
            
        </div>
        
    </div>
    
    
    
    
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    
    <script type="text/javascript" src="js/tether.min.js"></script>
    
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    
    <script type="text/javascript" src="js/mdb.min.js"></script>
    
    <script>
        // Or, pass the months and weekdays as an array for each invocation.
        $('.datepicker').pickadate({
          format: 'yyyy/mm/dd',
          formatSubmit: 'yyyy/mm/dd'
        })
    </script>
</body>

</html>
</code></pre>

Regards

Please insert min. 20 characters.

jittu92, below I share you, my working file that works with version MDB Pro 4.3.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Material Design Bootstrap</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- Material Design Bootstrap -->
    <link href="css/mdb.min.css" rel="stylesheet">
    <!-- Your custom styles (optional) -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body>
   
    <!-- Start your project here-->
    <div class="container">
        
        <div class="row">
            
            <div class="col pt-4">
                
                <div class="md-form">
                    <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker">
                    <label for="date-picker-example">Try me...</label>
                </div>
                
            </div>
            
        </div>
        
    </div>
    <!-- /Start your project here-->
    
    <!-- SCRIPTS -->
    <!-- JQuery -->
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="js/tether.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="js/mdb.min.js"></script>
    
    <script>
        // Or, pass the months and weekdays as an array for each invocation.
        $('.datepicker').pickadate({
          format: 'yyyy/mm/dd',
          formatSubmit: 'yyyy/mm/dd'
        })
    </script>
</body>

</html>

Regards

Add comment

jittu92 free answered 7 years ago

0 0 Best answer

sorry its a bit difficult to understand, can you give an example? like in codepen or jsfiddle . or send me some code sample of html file where the date picker will submit in yyyy/mm/dd format

Add comment

Michael Baertschi pro answered 7 years ago

0 0 Best answer

Please insert min. 20 characters.

Ok found the solution. MDB uses pickadate.js internally (no idea why this is not mentioned here?!!??111). Thus one can simple use pickadate.js api which can be found here: http://amsul.ca/pickadate.js/api/. And here is what I did: Create the picker and store a reference.


  const self = this;

  const $input = $(<code>#${datePickerId}</code>).pickadate({
    firstDay: 1,
    weekdaysShort: ["So", "Mo", "Di", "Mi", "Do", "Fri", "Sa"],
    monthsFull: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
    today: "Heute",
    clear: "Löschen",
    close: "Zurück",
    onSet: function(context) {
      self.selectDate(Moment(context.select), true);
    }
  });

  self.picker = $input.pickadate("picker");

And then you can set the new date with:


this.picker.set("select", selectedDate.valueOf());

Hope this helps. Best, Michael

Add comment

jittu92 free answered 7 years ago

0 0 Best answer

This code is not working. When i'm trying to send the form data into next page, it sending in "31 January, 2017" format

Add comment

Kamil Paciepnik free answered 7 years ago

0 0 Best answer

Hi Michael Baertschi, You can try this code: HTML:

<div class="md-form">
    <input placeholder="Selected date" type="text" id="date-picker-example" class="form-control datepicker" data-value="2015/01/20">
    <label for="date-picker-example">Try me...</label>
</div>

JS:

$('.datepicker').pickadate({
  formatSubmit: 'yyyy/mm/dd'
})

Regards

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Michael Baertschi

Pro User 10Support score
1Questions 1Answers 0Snippets