I have a materialize date picker which allows me to select between 10 days in current date.
But i want to select between 16/05/2016, 19/05/2016 dates and other dates will be disabled on the date picker (user cannot select other dates).
My Materialize Date Picker Code :
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 10, // Creates a dropdown of 10 years to control year
format: 'dd/mm/yyyy',
min: -10,
max: true,
closeOnSelect: true,
closeOnClear: true,
});
Did you try this:
$('.datepicker').pickadate({
min: new Date(2015,3,20),
max: new Date(2015,7,14)
})
or this:
$('.datepicker').pickadate({
min: [2015,3,20],
max: [2015,7,14]
})
Otherwise selectmonths & selectyears may cause problem. If you select only 10 days range, you do not need selecting years or month. Try like this:
$('.datepicker').pickadate({
format: 'dd/mm/yyyy',
min: -10,
max: true,
closeOnSelect: true,
closeOnClear: true,
});
http://amsul.ca/pickadate.js/date/
Related
I realize a site in symfony and I use the flatpickr library for the selection of dates. that's what it's like now:
datepicker
So I have 2 datepicker who uses flatpickr which allows me to select a departure date with the time and a date back with the time too. My problem, when I select the first date, flatpickr shows me well the time selection but when I go on the second datepicker I can not select the time.
datepicker 1
datepicker 2
I wish I could select in the 2 inputs the date and the time.
Here is my JS code of my 2 inputs:
var departure = $('#quick_booking_departure');
var arrival = $('#quick_booking_arrival');
departure.flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
position: "above",
disableMobile: true,
locale: "fr",
minDate: "today",
onChange: function (selectedDates, dateStr, instance) {
arrival.flatpickr({
minDate: dateStr
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
arrival.flatpickr({
enableTime: true,
dateFormat: "Y-m-d H:i",
position: "above",
disableMobile: true,
locale: "fr",
minDate: "today",
onChange: function (selectedDates, dateStr, instance) {
departure.flatpickr({
minDate: 'today'
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
});
Thank you for your help.
It looks like your onChange function is the culprit adding enableTime: true allows time pick:
onChange: function(selectedDates, dateStr, instance) {
arrival.flatpickr({
enableTime: true,
minDate: dateStr
});
departure.removeAttr('readonly');
arrival.removeAttr('readonly');
}
But look closer, when one of your pickers change you are completely re-initializing the other. So all the options you originally defined are getting reverted back to default except for what you are re-defining minDate
I am working in my Ionic 4 project and I have used the native date picker plugin. It is working fine but I am not able to set the min and max date in it for the Android.
This is my tab2.page.html:
<ion-input formControlName="startchallenge" placeholder="Select Date" (click)="datePickershow()" [readonly]=true></ion-input>
This is my tab2.page.ts:
datePickershow(){
this.datePicker.show({
date: new Date(),
mode: 'date',
androidTheme: this.datePicker.ANDROID_THEMES.THEME_HOLO_DARK,
minDate: new Date().toISOString(),
maxDate: new Date(new Date().setDate(new Date().getDate() + 10)).toISOString(),
}).then(
date => console.log('Got date: ', date)},
err => {
console.log('Error occurred while getting date: ', err)}
);
}
I have used min and max date in Android after that the user is able to select the back date from today because I have used the min date as a today date but the problem is that user is able to select the previous date in Android.
Any help is much appreciated.
Try This:
minDate: new Date().valueOf(),
maxDate: new Date(new Date().setDate(new Date().getDate() + 10)).valueOf(),
This will solve your problem.
I think you should use ion-datetime, which provide easiest way to getting date or time from user.
There are lots of methods to formate date and time input.
I'm working with datepicker from materializecss and I need to disabled all days unless the Monday, at other plugins I used 'daysOfWeekDisabled'
parameter but in this case I must to use disableDayFn: function(){} and when I insert a parameter all calendar is disabled. Here is an example
$('#initCourse').datepicker({
firstDay: 1,
minDate: new Date(),
format: "dd.mm.yyyy",
disableDayFn: function(){
return disabled = '0, 2, 3, 4, 5, 6'
}
});
Any idea? Thanks in advance
It worked fine, but I use another way in case you need to disable one or more dates
disableDayFn:function (date) {
let disableListDate = [new Date('2018,12,5').toDateString(),new Date('2018,12,6').toDateString()];
if(disableListDate.includes(date.toDateString())) {
return true
}else{
return false
}
}
Here's a working example.
disableDayFn has a parameter date which you can use to find every occurrency of a specific date.
disableDayFn: function(date) {
if(date.getDay() == 1) // getDay() returns a value from 0 to 6, 1 represents Monday
return false;
else
return true;
}
We are using Bootstrap Datepicker (https://github.com/uxsolutions/bootstrap-datepicker) to set a checkin and checkout date.
We need to be able to set a 'minimum range' on the date picker for properties that have a minimum night stay.
Missing Requirements:
Do not allow # of nights to be less than property nightly minimum.
Do not allow checkout date to be before checkin date.
So, if a visitor selects the checkin date of 12/01/2017, and the property has a minimum night stay of 3 nights, the visitor should not be allowed to select 12/02/2017, 12/03/2017. The next available night for them to checkout on should be 12/04/2017.
I'm not seeing that this is a simple option with this date picker. I do see that it has been added as a feature request by quite a few though.
https://github.com/uxsolutions/bootstrap-datepicker/issues/970
I've built the start of what might be able to work by using the disabledDates and setDatesDisabled dates. Yet, I can't seem to figure out why these disabledDates are not working or firing when selecting a new start date. I think that I should be able to combine the newly set disabled dates with those already posted.
$(function($) {
var today = new Date();
$('.input-daterange').datepicker({
daysOfWeekHighlighted: "0,6",
autoclose: true,
todayHighlight: true,
startDate: today,
datesDisabled: ['10/1/2017','10/2/2017','10/3/2017','10/4/2017','10/5/2017','10/6/2017','10/7/2017','10/8/2017','10/9/2017','10/10/2017','10/11/2017','10/12/2017','10/13/2017','10/14/2017','10/15/2017','10/16/2017','10/17/2017','10/18/2017','10/19/2017','10/20/2017','10/21/2017','10/22/2017','10/23/2017','10/24/2017','10/25/2017','10/26/2017','10/27/2017','10/28/2017','10/29/2017','10/30/2017','10/31/2017'],
});
});
// Set end date to minimum nights.
$('#start').on('change', function() {
// Set minNights.
minNights = 3;
start = $('#start').datepicker('getDate');
end = moment(start).add(minNights, 'day').toDate();
$('#end').datepicker('update', end);
$('.input-daterange').datepicker('setDatesDisabled', [ $('.input-daterange').datepicker('setDatesDisabled', ['12/02/2017', '12/03/2017']);]);
});
Is there another date picker that has this built in already? Or, is there a simple and clean way to add the missing requirements above to the bootstrap datepicker?
Simple JSFiddle
https://jsfiddle.net/riverecho/omd5uw21/
Give this a try
$(function () {
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true,
changeMonth: true,
changeYear: true,
yearRange: '1999:2012',
showOn: "button",
buttonImage: "images/calendar.gif",
buttonImageOnly: true,
minDate: new Date(1999, 10 - 1, 25),
maxDate: '+30Y',
inline: true
});
});
Requirements - End date must be equal and greater then start selected start date in boostrap datepicker and before selected start date disable.
Problem - its possible in jquery date but I want to know how to make in boostrap date.
my boostrap code is
$('#start_date').datepicker({autoclose: true,startDate: new Date()});
$('#end_date').datepicker({autoclose: true,startDate: new Date()});
for reference check jquery code
Fiddle
Note - I want exact implemention of this picker in bootstrap
Can anyone help me?
Please check out this JSFiddle demo. I have placed the code below that uses bootstrap datepicker.
$(".from_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var startDate = new Date(selected.date.valueOf());
$('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
$('.to_date').datepicker('setStartDate', null);
});
$(".to_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var endDate = new Date(selected.date.valueOf());
$('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
$('.from_date').datepicker('setEndDate', null);
});