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
});
Related
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 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 am using date time picker.on edit page the selected value is not displaying.
when I check the code element, I am seeing the result in value attribute.
my code is
$('#id').datetimepicker({
format: 'DD/MM/YYYY',
minDate:moment().millisecond(0).second(0).minute(0).hour(0),
ignoreReadonly: true,
useCurrent: false
});
Any idea?
Try this:
$('#id').datetimepicker({
format: 'DD/MM/YYYY',
minDate: new Date(), // Or try minDate: 0
ignoreReadonly: true,
useCurrent: false
});
You may check this answer too.
I have a datepicker div with multi date and a few dates set with setDates.
$("#datepicker").datepicker({
multidate: true,
startDate: "08/01/2016",
endDate: "11/30/2016"
});
$("#datepicker").datepicker('setDates',["08/01/2016","09/10/2016","10/15/2016","11/30/2016"]);
The problem is that it shows the last date by default(11/30/2016). I want it showing the first date instead(08/01/2016). What should I do?
The JSFiddle is: https://jsfiddle.net/itzuki87/tdj2Lscr/4/
Just switch 1st date with last date:
$("#datepicker").datepicker({
multidate: true,
startDate: "08/01/2016",
endDate: "11/30/2016"
});
$("#datepicker").datepicker('setDates',["11/30/2016","09/10/2016","10/15/2016","08/01/2016"]);
I'm using bootstrap datepicker and I'm trying to set dates (events) from returned array of dates, but when I set dates by using datepicker's method (setDates), It's shows the month of the last date in the array of events, how to let it return to the current month.
var events = ['02/02/2015','02/05/2015','02/09/2015','03/09/2015'];
$('.calendar').datepicker({
multidate: true,
daysOfWeekDisabled: "0,1,2,3,4,5,6",
todayHighlight: true
});
$('.calendar').datepicker('setDates', events);
JSFiddle
Demo
Try this
var todayDate = new Date()
var events = ['02/02/2015','02/05/2015','02/09/2015','03/09/2015',todayDate ];
$('.calendar').datepicker({
multidate: true,
daysOfWeekDisabled: "0,1,2,3,4,5,6",
todayHighlight: true
});
$('.calendar').datepicker('setDates', events );