jQuery datepicker not working properly after append - javascript

I am appending row to table add new field but datepicker not working properly.May be its coz of multiple datepicker.i just need datepicker started from current date and next will be start from same date selected on first one.
var mydate = new Date();
jQuery(document).on('focus', ".datefrom", function () {
jQuery(this).datepicker({
format: 'dd-mm-yy',
minDate: new Date()
}).on('dateSelected', function (e, date)
{
mydate = date;
});
});
jQuery(document).on('focus', ".datetill", function () {
jQuery(this).datepicker({
format: 'dd-mm-yy',
minDate: mydate
});
});
Thanks in advance.
Here the snapshot:1
fiddle link https://jsfiddle.net/3oyxc97g/16/

Initiate the second datepicker when the date from the first was selected
var mydate = new Date();
jQuery(document).on('focus', ".datefrom", function() {
jQuery(this).datepicker({
format: 'dd-mm-yy',
minDate: new Date()
}).on('changeDate', function() {
mydate = this.value;
dates = mydate.split('-');
mydate = dates[1]+'-'+dates[0]+'-'+dates[2];
jQuery(".datetill").datepicker('destroy').datepicker({
format: 'dd-mm-yy',
startDate: new Date(mydate)
});
});
});
https://jsfiddle.net/3oyxc97g/31/

try
var mydate=new Date();
jQuery(document).on('focus',".datefrom", function(){
jQuery(this).datepicker({
format : 'dd-mm-yyyy',
autoclose : true,
todayHighlight : true,
startDate : new Date()
}).on('changeDate', function(ev)
{
mydate=jQuery('.datefrom').val();
});
});
......

Related

Disable future dates after today in Jquery Ui1.8.9 [duplicate]

Is it possible to disable future date from today?
Let say today is 23/10/2010, so 24/10/2010 onwards are disabled.
Sorry I am very new in jQuery and JavaScript.
Yes, indeed. The datepicker has the maxdate property that you can set when you initialize it.
Here's the codez
$("#datepicker").datepicker({ maxDate: new Date, minDate: new Date(2007, 6, 12) });
$(function() { $("#datepicker").datepicker({ maxDate: '0'}); });
Try This:
$('#datepicker').datepicker({
endDate: new Date()
});
It will disable the future date.
you can use the following.
$("#selector").datepicker({
maxDate: 0
});
Code for Future Date only with disable today's date.
var d = new Date();
$("#delivdate").datepicker({
showOn: "button",
buttonImage: base_url+"images/cal.png",
minDate:new Date(d.setDate(d.getDate() + 1)),
buttonImageOnly: true
});
$('.ui-datepicker-trigger').attr('title','');
Date for the future 1 year can be done by
$('.date').datepicker({dateFormat: 'yy-mm-dd', minDate:(0), maxDate:(365)});
you can change the date format too by the parameter dateFormat
http://stefangabos.ro/jquery/zebra-datepicker
use zebra date pickers:
$('#select_month1').Zebra_DatePicker({
direction: false,
format: 'Y-m-d',
pair: $('#select_month2')
});
$('#select_month2').Zebra_DatePicker({
direction: 1, format: 'Y-m-d',
});
Yes, datepicker supports max date property.
$("#datepickeraddcustomer").datepicker({
dateFormat: "yy-mm-dd",
maxDate: new Date()
});
$('#thedate,#dateid').datepicker({
changeMonth:true,
changeYear:true,
yearRange:"-100:+0",
dateFormat:"dd/mm/yy" ,
maxDate: '0',
});
});

jquery-how to ensure end date is not less than start date? [duplicate]

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

several jquery datepicker widgets, add class to only one of them

I have a problem with jquery datepicker.
I have a form with several datepicker inputs and one of those inputs I need to select the whole week, while in the other one, I need to work just the regular way; the thing is that when I add the class (ui-weekpicker) to the widget so the first input the user can select the whole week,the class affects all the inputs in the form, at least the hover event, meaning that the other inputs in the onSelect event show the correct date...
How can I prevent this to happen?
here is my code for the week-select datepicker
$('#jump-picker').datepicker('destroy').val('').attr('placeHolder','Select Week');
$('#jump-picker').datepicker( {
yearRange: "-3:+3",
showOtherMonths: true,
selectOtherMonths: true,
language :'es',
options: {
dateFormat : 'dd/mm/yy',
showAnim : 'slideDown',
},
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
var startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
var endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#jump-picker').val($.datepicker.formatDate( dateFormat, startDate, inst.settings )
+ ' - ' + $.datepicker.formatDate( dateFormat, endDate, inst.settings ));
var year = startDate.getFullYear(),
month = startDate.getMonth(),
day = startDate.getDate() - startDate.getDay();
$('#calendar').fullCalendar ('gotoDate', year, month, day);
selectCurrentWeek();
},
beforeShow: function() {
selectCurrentWeek();
},
beforeShowDay: function(date) {
var cssClass = '';
if(date >= startDate && date <= endDate)
cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function(year, month, inst) {
selectCurrentWeek();
}
}).datepicker('widget').addClass('ui-weekpicker').removeClass ('hide-calendar MonthDatePicker HideTodayButton');
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
$('.ui-weekpicker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });
thanks for the help
Rather than chaining the call to .addClass('ui-weekpicker') off your $('#jump-picker') selector, add a second invocation to retrieve just one of the elements:
$('#jump-picker.week').addClass('ui-weekpicker')
or, if you're unable to add a class to one element and not the other
$('#jump-picker').first().addClass('ui-weekpicker')
will add the class to the first element matched.
As an aside, it's bad practice to use ids when you have more than one element, they're supposed to be unique within the document. You'd be best served to use a class for jump-picker instead.

jQuery Datepicker Date Formatting Not Working

I am new to jQuery so bear with me here. I have set my code set up so that when the user clicks on a certain date on the jQuery calendar, it displays the date that they have selected. I just want it to show the date in the format of "mm-dd-yyyy" but everything I have tried does not affect the date output.
This is the bare jQuery code:
$(document).ready(function init (){
$("#datepicker").datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function() {
var userdate = $("#datepicker").datepicker("getDate");
document.getElementById("userdate").innerHTML = userdate;
}
});
});
Here is a plunker of my bare code:
http://plnkr.co/edit/T8ARyYg2qZna9QvPGg8m?p=preview
Thank you!
Change your code:
var userdate = $("#datepicker").datepicker("getDate");
By:
var userdate = $('#datepicker').datepicker({ dateFormat: 'dd-mm-yy' }).val();
just change your onSelect function like this
onSelect: function(dateText) {
var userdate = dateText;
document.getElementById("userdate").innerHTML = userdate;
}
your code should look like this
$(document).ready(function init() {
$("#datepicker").datepicker({
dateFormat: 'mm/dd/yy',
onSelect: function(dateText) {
var userdate = dateText;
document.getElementById("userdate").innerHTML = userdate;
}
});
});
here's a working JSFIDDLE
You can use the formatDate function:
var userdate = $.datepicker.formatDate('mm/dd/yy', $("#datepicker").datepicker("getDate"))

Datepicker with month and year only

I would like to have a datepicker where user can select only the month and year from the datepicker and i also need to restrict the next datepicker with selected month and year from previous datepicker..
Can anyone help me out?
Sean answer is pretty good, if you want to disable day selecting as well, you might use a different approach, you can see the result in this fiddle:
Calendar is hidden, so you can only choose month and year. When selecting a date in first datepicker, minDate of second datepicker is getting adapted.
EDIT
jQuery datepicker has seriously problems when dateformat doesn't provide a day. I changed th code to make it work. Only thing is when opening a datepicker, I have to convert the date to a suitable format. Have a look at the new fiddle.
HTML:
<p>Date: <input type="text" id="first-datepicker"/></p>
<p>Date: <input type="text" id="second-datepicker"/></p>
CSS:
#ui-datepicker-div .ui-datepicker-calendar,
#ui-datepicker-div .ui-datepicker-current
{
display: none !important;
}
JAVASCRIPT:
$('#first-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
var secondDatePicker = $('#second-datepicker').data('datepicker');
var dateSetted = secondDatePicker.input.data('date-setted');
setMyDate(secondDatePicker);
secondDatePicker.input.datepicker('option', 'minDate', new Date(inst.selectedYear, inst.selectedMonth, 0));
if (dateSetted == true) {
saveMyDate(secondDatePicker);
};
}
});
$('#second-datepicker').datepicker({
changeYear: true,
changeMonth: true,
beforeShow: function (input, inst) {
setMyDate(inst);
},
onClose: function (dateText, inst) {
saveMyDate(inst);
}
});
function saveMyDate(inst) {
inst.selectedDay = 1;
inst.input.data('year', inst.selectedYear);
inst.input.data('month', inst.selectedMonth);
inst.input.data('day', inst.selectedDay );
var date = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
inst.input.datepicker('setDate', date );
formatDate(inst, date);
inst.input.data('date-setted', true);
};
function setMyDate(inst) {
var dateSetted = inst.input.data('date-setted');
if (dateSetted == true) {
var year = inst.input.data('year');
var month = inst.input.data('month');
var day = inst.input.data('day');
var date = new Date(year, month, day);
inst.input.datepicker('setDate', date );
};
};
function formatDate(inst, date) {
var formattedDate = $.datepicker.formatDate('MM - yy', date);
inst.input.val(formattedDate);
};
You can modify the jQuery datepicker to only allow the user to select certain dates, in this case we could restrict it to the first of the month:
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also modify the options to display the date differently:
$(".datepicker").datepicker({
dateFormat: 'mm/yy'
});
Combine the two and we get:
$(".datepicker").datepicker({
beforeShowDay: disableDaysExceptFirst,
dateFormat: 'mm/yy'
})
function disableDaysExceptFirst(date) {
if (date.getDate() != 1) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can also use this to restrict your second datepicker:
var restrictedMonth = parseInt($("#myFirstDatePicker").text().split("/")[0]); //replace myFirstDatePicker with the HTML ID of the text input your datepicker is attached to
$("#myFirstDatePicker").datepicker({
beforeShowDay: disableAllExceptCurrentMonth,
dateFormat: 'dd/mm/yy' //swap mm and dd for US dates
});
function disableAllExceptCurrentMonth(date) {
if (date.getMonth() != restrictedMonth) {
return [false, date.getDate().toString() + "_day"];
}
return [true, ""];
}
You can use this monthpicker jquery widget : https://github.com/lucianocosta/jquery.mtz.monthpicker
If you can work in html5 i would suggest to use the new month input support for newer browser
simply use and let the magic happen.
https://developer.mozilla.org/fr/docs/Web/HTML/Element/Input/month
Datepicker can show month and year only without using css
.ui-datepicker-calendar {
display: none;
}?
You can do like this
var dp=$("#datepicker").datepicker( {
format: "mm-yyyy",
startView: "months",
minViewMode: "months"
});
dp.on('changeMonth', function (e) {
//do something here
alert("Month changed");
});
Documentation here

Categories

Resources