Open Closed

Q : single type in date-range-picker #2772

peterlee created


<input date-range-picker type="text" options="vm.dateRangeOptions" min="vm.dateRangeOptions.min" max="vm.dateRangeOptions.max" class="form-control date-picker".....

I want to use it as a single type rather than a multi type.


$('input[name="articleDateStart"]').daterangepicker({ singleDatePicker: true, showDropdowns: false, locale: { format: 'YYYY-MM-DD' }


I wrote the above code, so I got the following problem.

Overlapping labels when selecting dates

5 Answer(s)
  • 0
    bilalhaidar created

    Hi, That's how I used the calendar for single selection.

    <input ng-model="vm.poc.dateofBirth" name="DateOfBirth" date-range-picker type="text" options="vm.dateOptions" min="vm.dateOptions.min" max="vm.dateOptions.max" class="form-control date-picker" />
    vm.dateOptions = angular.extend(
                    app.createDateRangePickerOptions(), {
                        singleDatePicker: true,
                        showDropdowns: true

    And I found out that you need to set initial date otherwise I see some errors on Google Chrome console.

    vm.poc = {
                    dateofBirth: moment(new Date('1900-01-01T00:00:00')),

    This should make it work.

  • 0
    peterlee created

    date-range-picker options="{singleDatePicker: true,locale : {format: 'YYYY-MM-DD'}}"

    The above code solved the single type.


    Overlapping labels when selecting dates :(

  • 0
    peterlee created

    I used placeholder instead of label. Please let me know if you have a solution later.

    Best Regard.

  • 0
    bilalhaidar created

    This is a bug and should be fixed using something similar to this:


    In your case, you might use Id of the model or so.

    Regards Bilal

  • 0
    ismcagdas created
    Support Team

    Hi @drcgreece,

    Actually this is not a bug, but material inputs works this way :). You are right "edited" class must be set on input if it has value.