Topic: Set Date Picker Value Programmatically

Michael Baertschi pro asked 5 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

jittu92 free answered 5 years ago


yes that worked. Thank you for the code sample.

Kamil Paciepnik free answered 5 years ago


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

jittu92 free answered 5 years ago


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

Michael Baertschi pro answered 5 years ago


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

jittu92 free answered 5 years ago


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

Kamil Paciepnik free answered 5 years ago


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

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Specification of the issue

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