When I select jquery ui datepicker. It does not show the datepicker. It shows like November/Wednesday/YYYY h:11 A. but I want ex : 11/17/2016 5:51 PM. please help me with it.
$('#start-date').datetimepicker({
addSliderAccess: true,
sliderAccessArgs: {touchonly: false},
timeFormat: "h:mm TT",
minDate: 0,
dateFormat: 'MM/DD/YYYY h:mm A',
onSelect: function(date) {
console.log('date :' + date);
console.log('id :' + this.id);
if (this.id == "start-date") {
var endDate_picker = $("#end-date");
var minDate = moment(date,"MM/DD/YYYY h:mm A");
var endDate = moment(moment(minDate).toDate()).add('hours', 2);
if ((endDate_picker.val() == "")||
(moment(endDate_picker.val(),"MM/DD/YYYY h:mm A").toDate()) < minDate.toDate()) {
$(endDate_picker).datetimepicker("setDate", endDate.toDate());
console.log('set date :' + endDate.toDate());
}
$(endDate_picker).datetimepicker("option", "minDate", minDate.toDate());
}
}
});
You just need to change the dateFormat: 'MM/DD/YYYY h:mm A', with your desired format.
Please, check this link to see which options you can set for the DATE, and this one for the TIME (Formatting tab)
To get 11/17/2016 5:51 PM, if you're using bootstrap datetimepicker, you should use something like this:
format: 'm/d/Y h:i A',
If you tell us which library are you using for the datetimepicker we can help you better.
EDIT: Please check this JSFiddle I did for you. (Using Bootstrap DateTimePicker)
Related
I have two daterangepicker, I want to set plus two year as the maxdate for the second daterangepicker based on the value from first daterangepicker. For example if I set the value to "2019-10-10" on the first daterangepicker then the maxdate should be set to the second datepicker as "2021-10-10".
This is what I have tried but not seems to be working
$('.date-select').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
}).on("input change", function (e) {
$("#end_date").daterangepicker({ singleDatePicker: true, minDate: -0,dateFormat: 'YYYY-MM-DD', maxDate: "+0D+0M+2Y" });
});
$('#end_date').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
});
}
});
It shows invalid date. Help is much appreciated. Thanks.
I don't see you referencing the first date input at all. Try fetching it's value, convert it to a Date object, add two years and set it as the new maxDate of the #end_date input like so:
$('#start_date').daterangepicker({
singleDatePicker: true,
locale: {
format: 'YYYY-MM-DD'
},
}).on("input change", function (e) {
let d = new Date( $('#start_date').val() );
d.setFullYear(d.getFullYear() + 2);
$('#end_date').daterangepicker({
singleDatePicker: true, locale: {format: 'YYYY-MM-DD'}, maxDate: d
});
});
$('#end_date').daterangepicker({
singleDatePicker: true, locale: {format: 'YYYY-MM-DD'},
});
See this JS Bin for a demo.
By the way: you might have your reasons to choose otherwise, but it would be much easier if you don't use two seperate inputs and define maxSpan option. That way, you don't have to deal with events at all and the library does the work for you.
You can also use 'OnSelect' event of Datepicker for the same...
$("#From_Date").datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function(dateStr) {
var d = $.datepicker.parseDate('dd/mm/yy', dateStr);
var years = parseInt(2);
d.setFullYear(d.getFullYear() + years);
$('#To_Date').datepicker('setDate', d);
}
});
$("#To_Date").datepicker({
dateFormat: 'dd/mm/yy'
});
this is html for it.
<input id="From_Date" />
<input id="To_Date" />
All other attributes like format ,autoclose etc are working, but maxDate/minDate is not working.
Any help would be appreciated.
I am using bootstrap-datetimepicker
$(function() {
$("#fdate").datetimepicker({
format: 'yyyy-mm-dd',
pickTime: false,
startView: 'month',
minView: 'month',
autoclose: true,
maxDate: '0'
});
});
Isn't it suppose to be a date value. And also it seems you forgot to use the option in it.
$("#datepicker").datepicker('option', {minDate: <some date>, maxDate: <some date>});
Please have a look here.
-> At first see that have you imported the correct path for bootstrap-datetimepicker
$('#date').datepicker('option', { minDate: new Date(startDate), maxDate: new Date(endDate) });
Thanks to Nargis ,Rajesh & sibeesh for your Quick replies..
I Solved the problem ..
The problem was maxDate and minDate are attributes used in some other plugin (i think jquery datatime picker) . as I am using an old Bootstrap plugin ,The valid attributes are startDate and endDate
The worked code is below
$(function() {
$( "#fdate" ).datetimepicker(
{
format: 'yyyy-mm-dd',
pickTime: false,
startView: 'month',
minView: 'month',
autoclose: true,
startDate: '-1d',//previous date
endDate: new Date()//current date
});
});
I have a JQuery date picker and i wanted to highlight several dates that are pre-define dates.I saw several answers while googling,but not success
My code:
var availableDates = ["30-1-2016", "15-1-2016", "16-1-2016"];
$('#Datepicker').datepicker({
beforeShowDay: availableDates
});
But it doesn't show the 'available dates'( Actually i wanted to highlight available dates in the jquery calendar )
Please use the below JS
var datesToBeHighlighted=['1/1/2016','1/5/2016'];
$('.datepicker').datepicker({
inline: true,
beforeShowDay: function (date) {
var theday = (date.getMonth()+1) +'/'+ date.getDate()+ '/' + date.getFullYear();
return [true,$.inArray(theday, datesToBeHighlighted) >=0?"hightlight":''];
}
});
JsFiddle : https://jsfiddle.net/Lokcre03/
I made two date fields ("pickup" and "dropin"). And, I want to make sure that:
Pickup date should be earlier than dropin date.
When a user already choose his dropin and pickup dates and later he changes the pickup date later than dropin date, then the script automatically changes his dropin date later than the user chose.
(for example, a user put "12/07/2011" in pickup date and "13/07/2011" in dropin date then later he changes his pickup date to "13/08/2011". If so, the script should set "13/08/2011" as the dropin date.
I referred to one of threads in this site. And, the following is the code I am having right now.
$.datepicker.setDefaults({dateFormat: 'dd/mm/yy'});
$("#pickup").datepicker({
onSelect: function(dateText, inst){
var minDate = $(this).datepicker('getDate');
$('#dropin').datepicker('destroy').datepicker({
minDate: minDate
});
},
onClose: function(dateText, inst) {
if(dateText == '') {
$('#dropin').val('');
$('#dropin').datepicker('destroy').datepicker();
}
}
});
$("#dropin").datepicker();
var set=$("#dropin").datepicker('getDate');
alert(set.getDate());
It looks like that it satisfies the first one. But, I have no idea about the second constraint. And, it keeps stating that 's' is null.
Can you help me with the issue?
Thank you very much.
Try somethig like this:
var date = new Date();
$.datepicker.setDefaults({
'dateFormat' : 'yy-mm-dd',
'onSelect' : function(dateText, inst){
instance = $(this).data('datepicker'),
selectedDate = $.datepicker.parseDate(
instance.settings.dateFormat || $.datepicker._defaults.dateFormat,
dateText,
instance.settings
);
if (this.id == 'datepicker-pickup') {
$('#' + 'datepicker-dropin')
.datepicker('option', 'minDate', selectedDate)
.datepicker('refresh');
datePickup = dateText;
}
if (this.id == 'datepicker-dropin') {
$('#' + 'datepicker-pickup')
.datepicker('option', 'maxDate', selectedDate)
.datepicker('refresh');
dateDropin = dateText;
}
}
});
$('#datepicker-pickup').datepicker({
'defaultDate' : datePickup,
'maxDate' : dateDropin
});
$('#datepicker-dropin').datepicker({
'defaultDate' : dateDropin,
'minDate' : datePickup,
'maxDate' : new Date(date.getFullYear(), date.getMonth(), date.getDate())
});
I have two input text boxes which is bound to jquery Datepicker widget.
When user select a given date from Date1 (Effective Date), I want to set the min date of Date2 (Expiry date) to Date1 + 1 .. How do I do that,
Thanks
see this link :
jQuery datepicker- 2 inputs/textboxes and restricting range
and use onChangeMonthYear function or onSelect function:
$('#txtStartDate, #txtEndDate').datepicker({
showOn: "both",
beforeShow: customRange,
dateFormat: "dd M yy",
firstDay: 1,
changeFirstDay: false,
onChangeMonthYear: function(year, month, inst) { ... },
onSelect: function(dateText, inst) { ... }
});
and use the same technique Ben Koehler or Russ Cam used.