Open Material Datepicker on page load

Question

I want to open the bootstrap material datetimepicker on page load, how I can do that. I have tried many options like triggering the button page onload. It does open if I manually click on the button. Here is the code I have written:

<input type="button" id="date" class="form-control floating-label" placeholder="Date">

<script type="text/javascript";>
    var minDate = new Date();
    var numberOfMinDaysToAdd = 1;
    var maxDate = new Date();
    var numberOfMaxDaysToAdd = 15;
    maxDate.setDate(maxDate.getDate() + numberOfMaxDaysToAdd);  
    $( document ).ready(function(){ 
        $('#date').bootstrapMaterialDatePicker({
        format: 'dddd DD MMMM YYYY - HH:mm',
        minDate : minDate,
        maxDate : maxDate,
    });
        $.material.init();
        $('#date').trigger("click");
    });
</script>

I have gone through the documentation part, but nothing helps. The Datepicker URL is here

remove the comma after `maxDate : maxDate` to properly close the object. Did you not get any error in your console? — yezzz, Dec 28 '16 at 19:53
I don't know which plugin exactly you're using, but look at their docs. Plugins often have methods to do this programmatically. — Serg Chernata, Dec 28 '16 at 20:23

score 3 · Answer 1 · edited Sep 01 '20 at 23:25

3

The default trigger event seems to be focus. So use :

$('#date').focus()

If it didn't work, also try:

$('#date').focus().focus()

edited Sep 01 '20 at 23:25

yaya

7,675
1
39
38

answered Jan 10 '17 at 14:57

T J

42,762
13
83
138

`$('#date').focus()` worked for me. codepen : https://codepen.io/ya3ya6/pen/PoNJqvd?editors=1010 – yaya Sep 01 '20 at 23:25

Open Material Datepicker on page load

1 Answers1