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?

score 27 · Answer 1 · answered Nov 01 '18 at 11:27

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

score 14 · Accepted Answer · answered Jan 09 '17 at 10:30

14

autoUpdateInput: false

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

answered Jan 09 '17 at 10:30

gotounix

463
6
12

9

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. – aliqandil May 10 '17 at 13:25
2

For those seeking to a generic solution you can also use this: $(this.element[0]).val(chosen_date.format('YYYY-MM-DD')); – MichaelD Feb 25 '18 at 15:50
12

If i set `autoUpdateInput: false` , then when i select the date it does not fill the input box again. – user7747472 Sep 08 '18 at 14:46
3

sorry, this works i had issue with the call back function. – user7747472 Sep 08 '18 at 14:54
Not understand, can post full lines ? – Mark Khor Sep 12 '19 at 21:25
2

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. – Delphine Mar 04 '21 at 18:16
1

yes there is problem you can't select the current date...can anyone tells me how to resolve it...? – Neeraj Tangariya Sep 18 '21 at 05:36

score 13 · Answer 3 · answered Sep 18 '21 at 06:02

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

This answer is concise, easy to understand, and most effective. Thanks! — tranthaihoang, Mar 29 '22 at 07:29

score 5 · Answer 4 · edited Nov 17 '22 at 12:13

5

To set default value of date range picker to null,

Inside your function set autoUpdateInput to false

autoUpdateInput: false,

edited Nov 17 '22 at 12:13

TarangP

2,711
5
20
41

answered Dec 20 '21 at 05:42

Sumanth Hegde

51
1
1

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](/help/how-to-answer). – Community Dec 20 '21 at 07:06
I tried this and now it no longer updates the input value when you pick a date. You need the `.on('apply.daterangepicker', ...` as shown in the answer by @Neeraj – user9645 Jul 26 '23 at 12:16

tuanngocptn · Answer 5 · 2019-09-25T03:50:52.687

2

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.

edited Sep 25 '19 at 03:50

answered Sep 24 '19 at 11:10

tuanngocptn

1,241
13
21

Setting date range picker start date to blank

5 Answers5

Linked