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,
});
Related
i am trying to set a min time and max time for https://getdatepicker.com/4/
$mydatepicker.datetimepicker({
minDate: moment("12/01/2015 8:50 AM"),
maxDate: moment("12/30/2015 9:50 AM"),
viewMode: 'days',
format: 'DD MMMM YYYY hh:mm A',
});
It is not restricting to the given time if we change AM to PM its changing and the date is removed if we try to increment the minutes. Any one have idea of how to use this plugin for setting minimum date and also time?
I think that moment.js is deprecated. You could set like this with jQuery:
$('#datepicker1').datepicker({
dateFormat: "yy-mm-dd",
maxDate: new Date('2018-3-26')
});
// Number
$('#datepicker2').datepicker({
dateFormat: "yy-mm-dd",
maxDate: 2
});
// String
$('#datepicker3').datepicker({
dateFormat: "yy-mm-dd",
maxDate: "+1m"
});
Same implies to minDate.
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
}
});
I have two text boxes with a datepicker hooked up to them. The text boxes are for start date and end date. The first datepicker is setup so that the user cannot choose a date before today, but can choose any date in the future.
How can I setup the second datepicker so that it cannot choose a date before the date chosen in the first date picker? For example: If today is 12/11/10 and I choose 12/15/10 in the first datepicker, then the second date picker shouldn't be able to choose anything before 12/15/10.
Heres what I have so far:
$("#txtStartDate").datepicker({ minDate: 0 });
$("#txtEndDate").datepicker({});
For example, in this sample code, startDatePicker is selected as 2010-12-12, change event of startDatePicker sets the minDate of endDatePicker 2010-12-13. It locks the cells before this date. This is a sample for what #Victor mentioned..I hope it helps...Regards...Ozlem.
$("#startDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
minDate: new Date(),
maxDate: '+2y',
onSelect: function(date){
var selectedDate = new Date(date);
var msecsInADay = 86400000;
var endDate = new Date(selectedDate.getTime() + msecsInADay);
//Set Minimum Date of EndDatePicker After Selected Date of StartDatePicker
$("#endDatePicker").datepicker( "option", "minDate", endDate );
$("#endDatePicker").datepicker( "option", "maxDate", '+2y' );
}
});
$("#endDatePicker").datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true
});
Update:
The approach above set the minDate only on creation time.
I used the onSelect event to change the minDate option of the second datepicker like this:
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
the Tin Man's solution worked for me after adding $("#txtEndDate").datepicker() at the bottom
$("#txtStartDate").datepicker({
showOn: "both",
onSelect: function(dateText, inst){
$("#txtEndDate").datepicker("option","minDate",
$("#txtStartDate").datepicker("getDate"));
}
});
$("#txtEndDate").datepicker(); //it is not working with out this line
try this man:
$("#dateTo").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
minDate: new Date()
}).datepicker("setDate", new Date());
$("#dateFrom").datepicker({
dateFormat: 'dd/mm/yy',
changeMonth: true,
changeYear: true,
onSelect: function(){
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
}
}).datepicker("setDate", new Date());
$('#start_date').datepicker({
endDate: new Date(),
autoclose: true,
}).on("changeDate", function (e) {
$('#end_date').datepicker('setStartDate', e.date);
});
$('#end_date').datepicker({
autoclose: true,
});
From a pure UI standpoint, you shouldn't. If the user picks the wrong month on both datepickers, and tries to select the correct month, he has a 50% change of being hindered by the UI. Ideally, you would allow the incorrect selection and display a helpful error message saying the end date should be after the end date.
If you wish to implement your idea : give each datepicker a "change" event that changes the options on the other datepicker appropriately.
Use the "getDate" method of the first datepicker UI and pass it into minDate option of the second datepicker:
$("#txtEndDate").datepicker({
showOn: "both",
minDate: $("#txtStartDate").datepicker("getDate")
});
Use This Code:
<script type="text/javascript">
$(function () {
$("#txtStartDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: 'dateToday'
});
$("#txtEndDate").datepicker({
dateFormat: 'dd/mm/yy',
inline: true,
minDate: $("#txtStartDate").datepicker("getDate") });
});
</script>
Hi everyone going to show what works with me in this case:
2 Datepickers ( DateFrom and DateTo)
HTML:
<!-- Datapicker dateFrom -->
<label for="dateFrom"> Date from: </label>
<div>
<input type="text" id="dateFrom" class="form-control" autocomplete="off"
th:placeholder="Enter a date From.."/>
</div>
<!-- Datapicker dateTo-->
<label for="dateTo"> Date to: </label>
<div>
<input type="text" id="dateTo" class="form-control" autocomplete="off"
th:placeholder="Enter a date to..."/>
</div>
Next you build your datapickers in JavaScript:
Datapicker activation (With YOUR datapicker build requirements)
$("#dateFrom").datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
$('#dateTo').datepicker({
dateFormat: 'yy-mm-dd',
showButtonPanel: true
});
-And finally on the OnChange Event, for every time a Date is picked in any of the datepickers the selectable range avaliable in the other Datapicker changes.
$("body").on("change", "#dateFrom", function() {
$('#dateTo').datepicker('option', 'minDate', $("#dateFrom").datepicker("getDate"));
});
$("body").on("change", "#dateTo", function() {
$('#dateFrom').datepicker('option', 'maxDate', $("#dateTo").datepicker("getDate"));
});
This make the DateTo DataPicker limit on change the date of the DateFrom Datapicker and viceversa.
$startDateCtrl.change(function () {
setMinEndDateValue($startDateCtrl, $endDateCtrl);
});
$endDateCtrl.datepicker();
I have two Date picker start and end.
End Date min and max date we are setting based on the selection from start.
Min start date for End date picker is start date from start picker selection.
Max end date for end date picker is selected start date from start date picker + 7 days.
function setMinEndDateValue($startDateCtrl, $endDateCtrl) {
var $maxSchedulingDate = new Date(#MaxDate.Year, #MaxDate.Month -1, #MaxDate.Day );
var $startDate = $startDateCtrl.val();
var $selectedStartDate = new Date($startDate);
$selectedStartDate.setDate($selectedStartDate.getDate() + 7); // increasing the start date by 7 days (End Date max)
var $maxEndDate = new Date();
if ($selectedStartDate > $maxSchedulingDate) {
$maxEndDate = $maxSchedulingDate;
}
else {
$maxEndDate = $selectedStartDate;
}
$endDateCtrl.datepicker("option", "minDate", $startDate);
$endDateCtrl.datepicker("option", "maxDate", $maxEndDate);
}
Building on the previous answers in this thread, I felt a solution that worked with defaults and reapplied both min and max dates would be useful:
// Defaults
var defaultFromDate = new Date();
var defaultToDate = new Date();
defaultToDate.setMonth(defaultToDate.getMonth() + 1);
// To
$("#datepickerTo").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
});
$("#datepickerTo").datepicker("setDate", defaultToDate);
function limitToDateSpan(currentFromDate) {
$("#datepickerTo").datepicker("option", "minDate", currentFromDate);
var maxDate = new Date(currentFromDate.getTime());
maxDate.setFullYear(maxDate.getFullYear() + 1);
$("#datepickerTo").datepicker("option", "maxDate", maxDate);
}
limitToDateSpan(defaultFromDate);
// From
$("#datepickerFrom").datepicker({
dateFormat: "yy-mm-dd",
changeMonth: true,
changeYear: true,
minDate: "2013-01-01",
maxDate: "+1Y",
onSelect: function (dateText) {
limitToDateSpan(new Date(dateText));
}
});
$("#datepickerFrom").datepicker("setDate", defaultFromDate);
$("#<%=txtFromDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#<%=txtToDate.ClientID%>").datepicker("option", "minDate", dt);
}
});
$("#<%=txtToDate.ClientID%>").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd-M-yy',
showOn: "button",
buttonImage: "../Images/Calendar.png",
buttonImageOnly: true,
yearRange: '-20:+20',
buttonText: "Date with abbreviated month name",
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#<%=txtFromDate.ClientID%>").datepicker("option", "maxDate", dt);
}
});
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'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