bootstrapmaterialdatepicker get selected value on changes

How to Get Selected Value on Changes in bootstrapmaterialdatepicker

Bootstrap Material DatePicker is a plugin for Bootstrap that adds a date picker to a form field. It is based on the Material Design concept and can be customized to fit any style. If you are using this plugin and want to get the selected value when it is changed, there are a few ways to do it.

Method 1: Using onChange Event

The first method is to use the onChange event of the input field. You can add an event listener to the input field and get the value when it is changed.

      $(document).ready(function() {
        $('#datepicker').bootstrapMaterialDatePicker().on('change', function(e, date) {
          console.log(date);
        });
      });
    

In this code, we are first initializing the date picker by calling the bootstrapMaterialDatePicker method on the input field with id "datepicker". Then, we are attaching an event listener to the date picker that listens for changes. When a change event is triggered, the callback function is executed, which logs the selected date to the console.

Method 2: Using onSelect Event

The second method is to use the onSelect event of the date picker. This event is triggered when a date is selected from the date picker calendar.

      $(document).ready(function() {
        $('#datepicker').bootstrapMaterialDatePicker({
          weekStart: 0,
          time: false,
          format: 'YYYY-MM-DD',
          onSelect: function(date) {
            console.log(date);
          }
        });
      });
    

In this code, we are initializing the date picker with some options such as weekStart, time, and format. We are also attaching an onSelect event listener to the date picker that listens for when a date is selected. When a date is selected, the callback function is executed, which logs the selected date to the console.

Method 3: Using getValue Method

The third method is to use the getValue method of the date picker. This method returns the currently selected date in the format specified in the options.

      $(document).ready(function() {
        var picker = $('#datepicker').bootstrapMaterialDatePicker({
          weekStart: 0,
          time: false,
          format: 'YYYY-MM-DD'
        });

        $('#datepicker').on('change', function() {
          console.log(picker.getValue());
        });
      });
    

In this code, we are first initializing the date picker with some options such as weekStart, time, and format. Then, we are storing a reference to the date picker in a variable called picker. We are also attaching an onChange event listener to the input field that listens for changes. When a change event is triggered, the callback function is executed, which uses the getValue method of the date picker to get the selected date and logs it to the console.

These are three methods you can use to get the selected value when using Bootstrap Material DatePicker. Choose the one that works best for your specific use case.