I have this monthpicker based on datepicker plugin: http://jsfiddle .net/ um65otbn/
On the original datepicker, when a day is clicked, the picker closes and date is pasted on the input.
On this monthpicker, with the calendar grid hidden, when month is selected the picker doesn't close. User must still click Done.
Where is the event that closes the picker and pastes on the input, and how to hook it into the month and year selects?
To implement the functionality you described use the onChangeMonthYear event.
onChangeMonthYear: function(year, month, opts){
$(".monthpicker").datepicker( "setDate", new Date(year, month - 1, 1) );
$(".monthpicker").datepicker("hide");
},
I've updated your fiddle - http://jsfiddle.net/6zckwsn5/
Related
I am trying to integrate the Bootstrap 3 Date/Time Picker v4.17.42 into a webpage. I have a text field that is pre-populated with a date prior to calling the datepicker.
The field is as follows;
<input value="19/02/1986" class="form-control datepicker" type="text" name="patient[date_of_birth]" id="patient_date_of_birth">
and I call the datepicker like so;
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
useCurrent: false,
maxDate: new Date(),
minDate: now.setFullYear(now.getFullYear() - 110)
});
When I click in the text field the datepicker appears, but it shows the current month rather than February 1986. If I click out of the field and then back in, the datepicker disappears then reappears set correctly to February 1986.
What do I have to do to so the correct month appears the first time the datepicker is opened?
You can force a refresh programatically after the initialize:
$('.datepicker').datetimepicker('setDate', new Date(1986, 02, 19));
$('.datepicker').datetimepicker('update');
You can also add a property to the object when initalizing:
setDate: new Date(1986, 02, 19)
To use default data just try this
$("#datepicker").datepicker("setDate", new Date());
In this script new Date() returns the current value that will be assigned to setDate attribute.
Like you said, this is a bug in the latest versions, tracked here: github.com/Eonasdan/bootstrap-datetimepicker/issues/1831
However, I found a work around that might be helpful in the meantime (if you don't want to use version 4.17.37):
var selectedDate = moment($('#patient_date_of_birth').val(), 'DD/MM/YYYY');
$('#patient_date_of_birth').data('DateTimePicker').viewDate(selectedDate);
Do this after your datepicker initialization.
This is the syntax needed hard refresh the view for this particular datepicker. You access the picker via data('DateTimePicker'), and the viewDate() method updates the date displayed by the picker.
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.
I'm trying to find a date of birth date picker similar to the one next to the bottom on this page: http://www.pradosoft.com/demos/quickstart/?page=Controls.Samples.TDatePicker.Home
Have you seen such date picker in jQuery ?.
I actually use a combination of the day selector with dropdowns from the jQuery UI datepicker for birthday selection like so:
$('.datepicker').datepicker({
changeYear:true,
changeMonth:true,
showMonthAfterYear:true,
yearRange:'1920:' + $.datepicker.formatDate('yy', new Date())
});
I have a jQuery datepicker and I cannot figure out how to programmatically change the month back to the current month. After making a POST request to save the user's dates I need to return the calendar back to the current month. The calendar may be on a different month from the user playing around with different dates. I have tried setting the mindate again but that did not work.
This is not a popup calendar.
Setting the datepicker back to today
$('#myDatePicker').datepicker('setDate', new Date());
setting just the month back
var date = $('#myDatePicker').datepicker('getDate');
date.setMonth( (new Date()).getMonth() );
$('#myDatePicker').datepicker('setDate', date);
FIDDLE
You can also use .val() to set the date
$("#datepicker").val(date);
I am using jqueryUI datepicker for a date range as in this demo. This is failing to validate To as future date to From in the following case:
In FROM date choose 11/19/2011. Now go to Nov month of the 2011 in the TO datepicker, you can't pick the date before "11/19/2011". This is fine and expected behaviour
Now place your cursor in FROM date picker textbox using the mouse. Select the picked date i.e 11/19/2011 and delete i.e make the textbox empty. At this point of time 2 textboxes are empty.
Now go to 'TO' datepicker Check for NOV 2011. All the dates before 11/19/2011 are still disabled which is not required behaviour.
To solve this I made textboxes readonly but i want a better solution for this issue so that user can enter the date with keyboard as well as pick with mouse.
This is because the logic for setting minDate and maxDate is located in the select event listener (which does not get fired off when you completely remove a date from a datepicker field). You could bind to the change event instead:
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
}).bind("change", function() {
var option = this.id == "from" ? "minDate" : "maxDate",
selectedDate = this.value,
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat ||
$.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
});
Example: http://jsfiddle.net/TMnRX/