I am working on a project, Actually there are two datepickers in my page. One is bootstrap datepicker and another is jQuery datepicker. There are three date fields, one is for start event date and another is for end event. Third datepicker is used to select multiple dates. Now I want that first selected date should work as min date for third datepicker and second datepicker date should work as max date limit for third datepicker. I am not able to pass that values. May be problem arise because of two different datepicker i.e. one is jQuery datepicker and another is bootstrap datetimepicker. Please give me a solution if you have any idea.
// code of first datepicker
$('.form_start_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
startDate: new Date(),
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
// code of second datepicker
$('.form_end_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
startDate: minDate,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1
});
// code of multiple date select
jQuery(function () {
// var startTime = $('#start_date_time').val();
// var splitTime = startTime.split(" ");
if(jQuery("#multi-datepicker").length){
jQuery("#multi-datepicker").datepicker({
format :'yyyy-mm-dd',
minDate: new Date(2018, 1 - 1, 1),
onSelect: function (dateText, inst) {
addOrRemoveDate(dateText);
$(this).data('datepicker').inline = true;
$('#multi-datepicker').val(dates);
//console.log(splitTime[0]);
},
onClose: function() {
$(this).data('datepicker').inline = false;
},
beforeShowDay: function (date) {
var year = date.getFullYear();
// months and days are inserted into the array in the form, e.g "01/01/2009", but here the format is "1/1/2009"
var month = padNumber(date.getMonth() + 1);
var day = padNumber(date.getDate());
// This depends on the datepicker's date format
var dateString = month + "/" + day + "/" + year;
var gotDate = jQuery.inArray(dateString, dates);
if (gotDate >= 0) {
// Enable date so it can be deselected. Set style to be highlighted
return [true, "ui-state-highlight"];
}
// Dates not in the array are left enabled, but with no extra style
return [true, ""];
}
});
Thanks you in advance
In order to achieve the wanted result, you can set the minDate and maxDate of a datepicker inside the onSelect of another datepicker.
Exaple:
$('.form_start_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
startDate: new Date(),
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
onSelect: function() {
var minDate = $(this).datepicker('getDate'); //get the selected date
$("#multi-datepicker").datepicker( "option", "minDate", minDate); //sets min date for datepicker
}
});
$('.form_end_datetime').datetimepicker({
//language: 'fr',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
startDate: new Date(),
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
onSelect: function() {
var maxDate= $(this).datepicker('getDate'); //get the selected date
$("#multi-datepicker").datepicker( "option", "maxDate", maxDate); //sets max date for datepicker
}
});
Related
I am working on bootstrap datepicker.
function initializeDatePicker() {
$('#milestone_start_date').datepicker({
weekStart: 1,
startDate: '-1m',
endDate: '+13m',
autoclose: true,
format: 'yyyy-mm-dd'
}).on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('#milestone_end_date').datepicker('setStartDate', minDate);
});
$('#milestone_end_date').datepicker({
weekStart: 1,
format: 'yyyy-mm-dd',
autoclose: true
}).on('changeDate', function (selected) {
var maxDate = new Date(selected.date.valueOf());
$('#milestone_start_date').datepicker('setEndDate', maxDate);
});
}
I called this function for multiple times to update input startDate, EndDate fields.
$('#milestone_end_date').datepicker('destroy');
$('#milestone_start_date').datepicker('destroy');
$('#milestone_start_date').val(data.start_date);
$('#milestone_end_date').val(data.end_date);
initializeDatePicker();
After AJAX call, correct values are displayed in start, EndDate popups. But if I clicked startDate field. And focusOut from the field. Value in startDate changes to today.
I am not sure what is wrong here.
Please help me. Thanks in advance.
I have two calendars and only want to limit one week, when I chose the first calendar date 1 then output to the two will come out 7th.
I am using ui datepicker
function initWidget() {
$("#datepicker").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", new Date());
$("#datepicker2").datepicker({
numberOfMonths: 1,
showButtonPanel: true,
dateFormat: 'dd-mm-yy'
}).datepicker("setDate", new Date());
}
You can use the onSelect callback like:
onSelect: function(date){
var selectedDate = new Date(date);
var targetDay = selectedDate.getDay() + 7;
var targetDate = new Date().setDate(targetDay);
$("#datepicker2").datepicker("setDate", targetDate);
}
I use a jQuery DateTime picker and i want to set the time when the DateTime picker open to the current date +5 minutes.
Example: If I open the DateTime picker at 12:00 , the time bar should let me pick max 12:05. Is this possible?
$( ".DateTimePickerTodayAudit" ).datetimepicker({
numberOfMonths: 1,
showCurrentAtPos: 0,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate: 0,
showOtherMonths: true,
selectOtherMonths: true
});
There are various possibilities depending on your case scenario but. One way this could be handled is by providing an array of time.
examples retrieved from datetimepicker docs
allowTimes options TimePicker Example #
javaScript
jQuery('#datetimepicker5').datetimepicker({
datepicker:false,
allowTimes:[
'12:00', '13:00', '15:00',
'17:00', '17:05', '17:20', '19:00', '20:00'
]
});
there is also a min and max possibility. Altough the below example is with minTime.
Set options runtime DateTimePicker #
If select day is Saturday, the minimum set 11:00, otherwise 8:00
javaScript
var logic = function( currentDateTime ){
// 'this' is jquery object datetimepicker
if( currentDateTime.getDay()==6 ){
this.setOptions({
minTime:'11:00'
});
}else
this.setOptions({
minTime:'8:00'
});
};
jQuery('#datetimepicker_rantime').datetimepicker({
onChangeDateTime:logic,
onShow:logic
});
I found an alternative solution to this: I've created a javaScript function that returns the current date +5 minutes and assigned the maxDate property of the DateTimePicker with the functions returned value.
function currDate()
{
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth() ;
var da = d.getDate();
var h = d.getHours();
var mi = d.getMinutes()+5;
var se = d.getSeconds();
var mDate = new Date(y, m, da, h, mi,se);
return mDate;
};
$( ".DateTimePickerTodayAudit" ).datetimepicker({
numberOfMonths: 1,
showCurrentAtPos: 0,
changeMonth: true,
changeYear: true,
dateFormat: "yy-mm-dd",
maxDate:currDate(),
showOtherMonths: true,
selectOtherMonths: true,
});
I am using this datepicker .
My issue is when I click on textbox on which datepicker is attached, it opens the calendar with today's date selected.
What I want is when a calendar opens first time it should not have any date selected until a user select a date.
Example:(Today's Date is 08/06/2014)
As in the second picture the calendar opens with today's date selected.
Below is my code for assigning datepicker to textbox
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
});
use set date function to set null date. try this its simple.
$("input[id*=txt_DateFrom]").datepicker("setDate" , null);
I found the solution
$("input[id*=txt_DateFrom]").datepicker({
beforeShowDay: function(date) {
if (pnlValue == 'none') {
return date.valueOf() >= now.valueOf();
}
},
daysOfWeekDisabled: [0, 6],
autoclose: true,
todayHighlight: false,
todayBtn: true
}).datepicker("setDate",null);
I Hope it might help someone..
The problem in selecting current date when using minDate : moment().
Solution: try using like below:
$('#datetimepicker6').datetimepicker({
format: 'DD/MM/YYYY',
minDate: moment().millisecond(0).second(0).minute(0).hour(0),
clear : false
});
I'm currently using this awesome bootstrap-datetimepicker from (http://www.malot.fr/bootstrap-datetimepicker/). How to disable date on form2 based on form1 selected date??
here is my current javascript for the datetimepicker
$('.bookingfrom').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate: '+0d',
forceParse: 0
});
$('.bookinguntil').datetimepicker({
language: 'en',
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
minView: 2,
startDate: '+0d',
forceParse: 0
});
I found 1 function on the documentation that I think can do the work. I just dont know how.
$('#date-end')
.datetimepicker()
.on('changeDate', function(ev){
if (ev.date.valueOf() < date-start-display.valueOf()){
....
}
});
i've used it like this
//Set the date picker on the text boxes for Check Out Date
$(".checkOutDate").datetimepicker({
format: "dd M yyyy",
autoclose: true,
showMeridian: true,
startDate: minDateForCheckIn
}).on('changeDate', function (ev) {
//Parse the selected date string to date object.
var dateSelected = new Date(Date.parse(ev.date));
//Subtract 5 hours and 35 minutes (extra 5 minutes to prevent selection of same time in check in field) to adjust GMT timings.
dateSelected.setHours(dateSelected.getHours() +24, 0, 0, 0);
$(".checkInDate").datetimepicker('setEndDate', dateSelected);
});
//Set the date picker on the text boxes for Check In Date. [Once the check in date is selected, set the selected date as min date for check out]
$(".checkInDate").datetimepicker({
format: "dd M yyyy",
autoclose: true,
showMeridian: true,
startDate: minDateForCheckIn
}).on('changeDate', function (ev) {
//Parse the selected date string to date object.
var dateSelected = new Date(Date.parse(ev.date));
//Subtract 5 hours and 25 minutes (less 5 minutes to prevent selection of same time in check out field) to adjust GMT timings.
dateSelected.setHours(dateSelected.getHours() + 24, 0, 0, 0);
$(".checkOutDate").datetimepicker('setStartDate', dateSelected);
});
I am a bit late to the party, but this is definitely possible. I see you are also trying to disable dates before the current day. I've come up with the following solution that does exactly as asked:
First you need to initialise the minDate parameter to midnight of the current day. Then, you bind an event listener to the dp.change event and reject any times that are earlier than the current time.
When rejecting such a time, you notify the user and reset the DateTimePicker time to the current time. I've created a function to do this:
// Argument obj is the used DateTimePicker object
// Argument f is the selected datetime by the user
// Argument n is the current datetime
var checkDate = function (obj, f, n) {
if (f.getTime() < n.getTime()+60*1000 && !open) {
open = true;
$('#message').dialog({
modal: true,
position: ['center', 'center'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I understand. Let me try again": function () {
$(this).dialog("close");
obj.data('DateTimePicker').setDate(n);
open = false;
}
}
});
}
}
Likewise, you still want to update the minDate and maxDate parameters upon dp.change too. Therefore, combining both checking the time and updating the properties, you would get:
jQuery("#startDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery("#endDate").on("dp.change", function (e) {
var f = new Date(e.date); var n = new Date();
checkDate(jQuery('#startDate'), f, n);
jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
});
This will yield exactly what you are after:
You can find the full code in this jsFiddle:
GO TO THE DEMO