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?
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('');
});