Setting date range picker start date to blank

Question

I have a daterange picker based on http://www.daterangepicker.com 's daterange picker and I want to set the start date to empty. This will work for what I want to do.

I'm using an text input field to get the dates

</span><input type="text" class="form-control" id="reservation" />

On the site there is an example of setting "Input Initially Empty" but I couldn't get it to work. Basically I don't know where to set it as it seems.

My daterange picker is inside a partial view and it called by another view. Page scripts are set in the view which calls the partial one. On the daterangepicker.js script I found these lines;

//default settings for options
        this.parentEl = 'body';
        this.element = $(element);
        this.startDate = moment().startOf('day');
        this.endDate = moment().endOf('day');
        this.minDate = false;
        this.maxDate = false;
        this.dateLimit = false;
        this.autoApply = false;
        this.singleDatePicker = false;
        this.showDropdowns = false;
        this.showWeekNumbers = false;
        this.timePicker = false;
        this.timePicker24Hour = false;
        this.timePickerIncrement = 1;
        this.timePickerSeconds = false;
        this.linkedCalendars = true;
        this.autoUpdateInput = true;
        this.ranges = {};

As far as I can tell they are based on moment.js. I tried manipulating this.startDate but couldn't manage to set it to a blank value. using this.startdate = null made the whole date range picker stop working so I guess I need something like empty date equivalent of moment.js. Or something entirely different.

Can anyone show me how to do it?

Solution 1

autoUpdateInput: false

function (chosen_date) {
    $('.form-datetime').val(chosen_date.format('YYYY-MM-DD'));
}

Solution 2

Input Initially Empty

<input type="text" name="datefilter" value="" />

<script type="text/javascript">
$(function() {

  $('input[name="datefilter"]').daterangepicker({
      autoUpdateInput: false,
      locale: {
          cancelLabel: 'Clear'
      }
  });

  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
      $(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
  });

  $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
  });

});
</script>

or

//daterangepickers
            //moment.locale('tr');
            moment.locale("@SessionHelper.CurrentLanguageTwoChar");

            $(".date-control").daterangepicker({
                singleDatePicker: true,
                showDropdowns: true,                
                //timePicker: true,
                //timePicker24Hour: true,
                //timePickerSeconds: true,
                minYear: parseInt(moment().subtract(10, 'years').format('YYYY'),10),
                maxYear: parseInt(moment().add(10, 'years').format('YYYY'), 10),
                autoUpdateInput: false,                
                singleClasses: "",
                locale: {
                    //format: 'DD.MM.YYYY HH:mm:ss'
                    //format: 'DD.MM.YYYY'
                }
            });

            $('.date-control').on('apply.daterangepicker', function (ev, picker) {
                $(this).val(picker.startDate.format('L'));
            });

            $('.date-control').on('cancel.daterangepicker', function (ev, picker) {
                $(this).val('');
            });

http://www.daterangepicker.com/#example5

https://github.com/dangrossman/daterangepicker/issues/815

Solution 3

I solved this issue using this....I hope this issue could help you. Input Tag

    <div class="form-group">
        <label>Due date:</label>
        <div class="input-group">
            <input type="text" 
                class="form-control float-right" 
                id="duetime"
                name="due_time" 
                autocomplete="off" 
             />
        </div>
    </div>

script

<script>
 $(function(){

    $("#duetime").daterangepicker({
        autoUpdateInput: false,
        minYear: 1901,
        showDropdowns: true,
        singleDatePicker: true,
        timePicker: true,
        timePicker24Hour: false,
        timePickerIncrement: 05,
        drops: "up",
        locale: {
            format: 'MM/DD/YYYY hh:mm A'
        }
    }).on("apply.daterangepicker", function (e, picker) {
        picker.element.val(picker.startDate.format(picker.locale.format));
    });

 });
</script>

Note: I found this from this source https://github.com/dangrossman/daterangepicker/issues/815#issuecomment-493323964

Solution 4

To set default value of date range picker to null,

Inside your function set autoUpdateInput to false

autoUpdateInput: false,

Solution 5

for the daterangepicker include from date and to date please flowing this code set start date to blank

$('.form-datetime').daterangepicker({autoUpdateInput: false}, (from_date, to_date) => {
  console.log(from_date.toDate(), to_date.toDate());
  $('.form-datetime').val(from_date.format('DD/MM/YYYY') + ' - ' + to_date.format('DD/MM/YYYY'));
});

Thanks.

View more solutions

Comments

[aliqandil]

Your answer helped me out, thanks. But I think it's kinda vague as what should be done. I was able to use it because I had some experience with how datapicker works. Maybe adding more details will be a good idea.

[MichaelD]

For those seeking to a generic solution you can also use this: $(this.element[0]).val(chosen_date.format('YYYY-MM-DD'));

[user7747472]

If i set autoUpdateInput: false , then when i select the date it does not fill the input box again.

[user7747472]

sorry, this works i had issue with the call back function.

[Mark Khor]

Not understand, can post full lines ?

[Delphine]

It does not work well. If you do that, you can't select the current / today date at first because Daterangepicker compares "startDate" with selected date and as they are the same, does not invoke user callback AND does not update field as well due to autoUpdateField = false.

[Neeraj Tangariya]

yes there is problem you can't select the current date...can anyone tells me how to resolve it...?

[Admin]

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

[tranthaihoang]

This answer is concise, easy to understand, and most effective. Thanks!