CODEWITHSUNDEEP
javascriptjquerymomentjsbootstrap-daterangepicker
Ege Bayrak
Ege Bayrak

Reputation: 1199

Setting date range picker start date to blank

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?

Upvotes: 18

Views: 82893

Answers (5)

Sumanth Hegde
Sumanth Hegde

Reputation: 69

To set default value of date range picker to null,

Inside your function set autoUpdateInput to false

autoUpdateInput: false,

Upvotes: 6

Neeraj Tangariya
Neeraj Tangariya

Reputation: 1407

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

Upvotes: 14

tuanngocptn
tuanngocptn

Reputation: 1471

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.

Upvotes: 2

ishakkulekci
ishakkulekci

Reputation: 871

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

Upvotes: 31

gotounix
gotounix

Reputation: 522

autoUpdateInput: false

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

Upvotes: 17

Related Questions