How to disable previous date on edit using datetime picker - javascript

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.

Related

How to overwrite datetimepicker enabledHours after initial load?

On page load I initialized datetimepicker to this:
$('#txtdate').datetimepicker({
inline: true,
sideBySide: true,
maxDate: someDate,
minDate: curentDate,
enabledHours: HoursArray(CurrentDayOpenTime, CurrentDayCloseTime)
});
but on new date selection I want to update/overwrite enabledHours (because on new date enabledHours are different) using below function.
$(document).on('dp.change', manipulateTime);
//function////
function manipulateTime(td){
if (!td.date.isSame(td.oldDate, "day")) {
$('#txtdate').datetimepicker({
inline: true,
sideBySide: true,
maxDate: SomeCloseDate,
minDate: SelectedDayOpenTime,
enabledHours: HoursArray(SelectedDayOpenTime, SelectedDayCloseTime)
});
}
}
I couldn't able to overwrite the previous enabledHours. It always shows enabled hours which is generated on page load.
Can someone help me on this?

You can try the below code to change enabledHours:
$(document).on('dp.change', manipulateTime);
function manipulateTime(td){
//Your code....
$('#txtdate').data('DateTimePicker').enabledHours([21,22,23]); //change the array of enabled hours here
}

bootstrap datepicker not retaining value on focusout

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.

Bootstrap Datepicker - Set startDate with multidate

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"]);

Bootstrap datepicker today's date selected when calendar open first time

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
});

yearvalue option is not visible in the jquery datepicker

How we can display the date in dd-mm-yyyy format using jquery datepicker, I tried with the below code, however, the year option is not visible in the datepicker.
jQuery("#formComp1_date").datepicker({
minDate: new Date(1, 1, 1900),
maxDate: new Date(dayValue, monthValue, yearValue),
dateFormat: 'dd-mm-yyyy' ,
changeMonth: true,
changeYear: true,
yearRange:"-90:+0"
});
Thanks,
Balaji.

Categories