I've got datepicker with option multidate and I want to define maximum days which user can select, for example 5 days, other days should be disabled. It should happen dynamically - user can select arbitrary 5 days and then other days should be blocked. How can I do that ?
Based on the documentation for the bootstrap-datepicker plugin you are using, it looks like if you just do multidate: 5 "the picker will limit how many dates can be selected to that number, dropping the oldest dates from the list when the number is exceeded."
$('#datepicker').datepicker({
multidate: 5
});
As for disabling the days once 5 are selected, rather than dropping the oldest...I am not sure if that is possible. You might be able to do something like this (but not sure, as you would have to pass in a big array of dates):
$('#datepicker').datepicker({
multidate: 5
}).on('changeDate', function(e){
//some function here to disable dates once 5 are selected
});
Hope this helps.
Related
I have an input with a datepicker. It works properly, but when I insert a date before 01/01/100 it shows me 19xx.
For example, if I insert 01/01/0001 the calendar shows me 01/01/1901
I have read that I have to use yearRange in my script, but it doesn't work for me :(
<script type="text/javascript">
$( document ).ready(function() {
$("#fromDatePickerEnabled_input").datepicker({
yearRange: '1:9999'
});
});
</script>
How can I make that it shows me the year right?
It's already reported / discussed bug in the jQuery forums, since 2016, and unfortunately there aren't any fixes yet ...
In short: Looks like jQuery Datepicker doesn't work correctly with dates which years are less than 1000.
I tried passing different options to Datepicker (as changeYear, shortYearCutoff, yearRange), but no one fixes the problem. Even enabling changeYear: true and manually selecting the year, doesn't result in a correct Date.
It's an option to switch to bootstrap-datepicker, which doesn't have such problems with lower years.
Here you can play with it: bootstrap-datepicker playground
Ok, I'm lost. I've tried to work this out myself but it's beyond me.
I have a sign-up form where you will need to select a date from the bootstrap datepicker and then you will be presented with a list of time slots in a select menu. The times will be based on availability, and change in real time as different dates are chosen. So I'll have to query the mysql database to see what times are still available and the list them in the select menu. There are only 5 potential time slots per day, 5 days a week. Ideally I would then use the datepicker to disable those dates with no time slots left, but that may be outside the scope of this question. I'm sorry if this is vague, I'm really at my wit's end.
So here's what I have for the datepicker
<script>
$(document).ready(function(){
var date_input=$('input[name="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'yyyy-mm-dd',
container: container,
todayHighlight: false,
autoclose: true,
};
date_input.datepicker(options).on('changeDate', function(e)
{
var seldate=(e.format(0,"yyyy-mm-dd"));
});
});
</script>
And a very basic select list with all of the potential time slots.
<select name="timeslot">
<option value="9:30">9:30</option>
<option value="9:30">10:30</option>
<option value="9:30">11:30</option>
<option value="9:30">2:00</option>
<option value="9:30">3:00</option>
</select>
The DB will have one entry per date, with the time slots as bool (taken or not). I've never really worked with jquery or Ajax much, but I assume that's where I need to go. I'm totally open to links that at least point me in the right direction.
Sorry if this is an off-the-rails question.
I'm loading a selection of dates into bootstrap datepicker for the user to view. Currently they can click on a highlighted date but it clears all the dates that are preloaded.
I don't want them to be able to click on any dates, just view the different month pages of dates. How can I do this?
this is how I setup datepicker and load the dates;
$('.datepickera').datepicker({
format: 'yyyy/mm/dd',
multidate: false
});
$.extend($.datepicker,{_checkOffset:function(inst,offset,isFixed){return offset}});
$(".datepickera").data("datepicker").setDates($('#mydates').data('dates'));
If I understand you correctly you can make the datepicker unselectable by using the daysOfWeekDisable property like this:
$('.datepicker').datepicker({
daysOfWeekDisabled: [0,1,2,3,4,5,6]
});
0 is Sunday and 6 is Saturday. This way a user cannot select any day but can view the entire calendar. You can read more about it here. Hope that helps.
Working on date picker using jquery I have two query with the date picker. With my current code I am getting the yearrange from 1900 to 2100 and I can able to disabled the feature date means from (1900 - 2015 sep) it was disabled till this month end but I was not able to see calendar till 2100.My second query was though user can see year till 2100 the field should accept only 10 years from today.
Here is the jquery code
$("#txt_dob").datepicker({
dateFormat:"mm-dd-yy",
changeMonth: true,
changeYear: true,
yearRange:'1900:2100',
//maxDate:'date',
}).on('change', function() {
if($('#txt_dob').valid()){
$('#txt_dob').removeClass('errRed');
}
// triggers the validation test on change
});
Any suggestion please help me
Updated JSBIN Link
Here is the HTML CODE
<input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_dob" name="txt_dob" />
I need to customize each month in ui datepicker. This means that for each month will show a different background image. I think to do the next:
<div class="calendar-container CURRENT-MONTS-CLASS"><div id="datepicker"></div></div>
How can I get current month name and add it as a class to datepicker's container?
Greatly appreciate any help!
You can use the month number, e.g. .month1 - .month12 or .monthJanuary - .monthDecember (or some other format) for this...personally I'd stick with numbers for other cultures, but you can adapt this answer for both ways. Use the onChangeMonthYear event of the datepicker like this:
$('#datepicker').datepicker({
onChangeMonthYear: function(year, month, inst) {
//Month number (1-12) is month
//Month name you can get by $("#datepicker .ui-datepicker-month").text()
$(this).closest("div.calendar-container")
.removeClass().addClass("calendar-container month" + month);
}
});
And set it initially when the page loads (after creating the datepicker), since I'm using the month number in the above, it would look like this:
$("div.calendar-container").addClass("month" + ($('#datepicker').datepicker("getDate").getMonth()+1));
If you were using names instead, use:
$("div.calendar-container").addClass("month" + $("#datepicker .ui-datepicker-month").text());
Whichever option you go with, just create the 12 classes with the background images/styling you want. You can test it out here. If you wanted the background to actually be on the datepicker itself, not that .calendar-container <div> you'd just add that to the CSS selector to make it more specific, for example:
.month1 .ui-datepicker-inline { background: url(January.jpg); }
You can test out that version here.