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?
You just need to set property valueDefault={null} and the DatePicker will be blank.
Setting a start and end datevar start_date = new Date(). increment('week', 1); var end_date = new Date(). increment('week', 5); This will allow the picking of dates between one week and five weeks in the future.
daterangepicker({ autoUpdateInput: false, locale: { cancelLabel: 'Clear', format: 'DD-MM-YY' } });
Press Ctrl+1 to open the Format Cells dialog. On the Number tab, select Custom from the Category list and type the date format you want in the Type box. Click OK to save the changes.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With