CODEWITHSUNDEEP
javascriptjquerydatepicker
Some User
Some User

Reputation: 5827

Clear Bootstrap DatePicker Value

I am using the Bootstrap DatePicker control in my app. I am trying to figure out how to clear the value of the field. I feel kind of dumb asking about this. To be honest, it seems like it should be straightforward. But, I've been unsuccessful. I have tried the approaches recommend in this SO post without luck.

Currently, I have this JSFiddle. My code in question looks like the following:

$(function() {
  $('#birthday').datetimepicker({ showTodayButton: true });
  $('#getDateButton').on('click', function() {
    var selectedDate = $('#birthday').data('date');
    if (selectedDate) {
      selectedDate = selectedDate.format('MM-DD-YYYY');
    }
    $('#formattedDate').html(selectedDate);
  });

  $('#clearButton').on('click', function() {
    alert('Clear the value in the "birthday" field...');
    $('#birthday').data('clear');
    // what now?
  });
});

It's like the functions in the control don't work. Or, the documentation is incorrect. As the fiddle shows, my "Get Date" function is not working either. That's why I feel like something is really wrong. Am I missing something or misunderstanding something?

Upvotes: 6

Views: 13386

Answers (4)

Alexander
Alexander

Reputation: 1263

Step 1: add the required reference to import:

import { bla-bla-bla, NgbInputDatepicker } from '@ng-bootstrap/ng-bootstrap';

Step 2: reference it as ViewChild:

@ViewChild('lastStartMinDatepicker') lastStartMinDatepicker: NgbInputDatepicker;

considering you have something like this in the markup:

<input
   #lastStartMinDatepicker="ngbDatepicker"
   #thisElement="ngModel"
   ngbDatepicker
   (click)="lastStartMinDatepicker.toggle()"
   class="form-control"
   [class.is-invalid]="thisElement.invalid && thisElement.touched"
   [(ngModel)]="lastStartMinPicker"
   [ngModelOptions]="{ standalone: true }"
   placeholder="Date From"
   readonly
/>

Step 3: remove value from it:

this.lastStartMinDatepicker.writeValue(null);

Step 4: enjoy :)

Upvotes: 0

Chintan
Chintan

Reputation: 773

If #birthday contains the datepicker, do this and it will work:

$('#clearButton').on('click', function() {
    alert('Clear the value in the "birthday" field...');
    $('#birthday').data("DateTimePicker").clear();
  });

You need to call clear on the $('#birthday').data("DateTimePicker") object. Function calls are illustrated here.

To get the date, do this:

$('#getDateButton').on('click', function() {
    var selectedDate = $('#birthday').data('DateTimePicker').date();

    if (selectedDate) {
      selectedDate = selectedDate.format('MM-DD-YYYY');
      console.log("selected date "+ selectedDate);
    }
    $('#formattedDate').html(selectedDate);
  });

Upvotes: 6

seay
seay

Reputation: 639

this is ok $('#birthday').data("DateTimePicker").clear();

you can see this http://eonasdan.github.io/bootstrap-datetimepicker/Functions/ http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#clear

Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()

Upvotes: 0

Ciprianis
Ciprianis

Reputation: 255

Seems to work with this code:

$('#clearButton').on('click', function() {
    alert('Clear the value in the "birthday" field...');
    $('#birthdayDate').val('');
    // what now?
})

Upvotes: 0

Related Questions