I am having problems getting my head around the syntax to set the date range for the JqueryUI calendar.
this...
$(function() {
$('#DOB').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'd MM yy',
minDate: new Date(1900, 11 - 1, 6)
});
});
is strangely giving me a range of the years 2000 - 2020. ALl I want to do is start at 1900. End date can be today.
The default yearRange shows +10 and -10 years from the current date (hence why you see 2000 to 2020)
Try adding:
yearRange: '1900:2010'
to display the years 1900 to 2010 in the year drop-down.
$(function() {
$('#DOB').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'd MM yy',
minDate: new Date(1900, 11 - 1, 6),
yearRange: '1900:2010'
});
});
if you choiced dateFormat: 'd MM yy' and range from 1900 to 20* you get the conflict with this values:
"1 February, 10" - is it "01.02.1910" or "01.02.2010"?
May be, if you change the dateFormat the problem would disappeared
Related
I am using latest version of MobiScroll datetime plugin and i need to display date in 24h format without AM/PM, so i doing it like
$('#datetime-start, #datetime-end').mobiscroll().datetime({
minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
display: 'modal',
animate: 'pop',
mode: 'mixed',
// 2013-03-15 11:26:17
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:ii:ss',
timeWheels: 'hhii'
});
but there still 12h format... Is there any way to set up 24 format?
Your timeWheels attribute is incoreect, change it to this:
$('#datetime-start, #datetime-end').mobiscroll().datetime({
minDate: new Date(now.getFullYear(), now.getMonth(), now.getDate()),
display: 'modal',
animate: 'pop',
mode: 'mixed',
// 2013-03-15 11:26:17
dateFormat: 'yy-mm-dd',
timeFormat: 'HH:ii:ss',
timeWheels: 'HHii'
});
So change this:
timeWheels: 'hhii'
to this:
timeWheels: 'HHii'
I am trying to use the jQuery-Timepicker-Addon by Trent Richardson and have maybe found a bug but figured I'd post here to see if anyone sees something I am doing wrong.
I have a start date/time and end date/time field and am trying to sync them to update minDate/maxDate depending on selections. These two text fields may be populated already when the page loads which appears to be causing me a problem.
Here is a working example of my problem: http://jsfiddle.net/eQmsw/3/
Here is the code inline:
<input id="start" type="text" size="30" value="11/14/2012 02:45 PM" /> <input id="end" type="text" size="30" value="11/28/2012 12:00 AM" />
$(function() {
var startDate = new Date(2012,10,14,14,45,0,0);
var endDate = new Date(2012,10,28,0,0,0,0);
var startDatePicker = $('#start');
var endDatePicker = $('#end');
startDatePicker.datetimepicker({
defaultDate: startDate,
maxDate: endDate,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
ampm: true,
stepMinute: 15,
timeFormat: 'hh:mm TT',
onSelect: function(selectedDateTime) {
var minDate = startDatePicker.datetimepicker('getDate');
endDatePicker.datetimepicker('option', 'minDate', minDate);
}
});
endDatePicker.datetimepicker({
defaultDate: endDate,
minDate: startDate,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
showOtherMonths: true,
selectOtherMonths: true,
ampm: true,
stepMinute: 15,
timeFormat: 'hh:mm TT',
onSelect: function(selectedDateTime) {
var maxDate = endDatePicker.datetimepicker('getDate');
startDatePicker.datetimepicker('option', 'maxDate', maxDate);
}
});
});
If you change one date, the other's time is removed. Once you have changed one date though, and fixed the other with the time removed, all other changes work as expected. I'm setting the 'defaultDate' property of each to a date the corresponds to it's initial value. In real life, I actually parse the date string but thought this would be clearer.
I will also post this in the issues list on the github site for the project but wanted to get this in front of the most people.
Thanks in advance for any help!
Well, I found something that works. I guess the 'defaultDate' option doesn't work as I was expecting. If it set the date on the datetimepicker after initialization, it works.
startDatePicker.datetimepicker('setDate', startDate);
endDatePicker.datetimepicker('setDate', endDate);
I have two datePickers in the same page and I wanna change the second datepicker's minDate depending the first one. Here is my code:
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: newDate
})
}
});
But I have a question, the first time I select a date in the first datePicker, the minDate of second one will be set according to this, but when I reselect the first one, the second datePicker's minDate won't change anymore, it will remain. I don't know why. Please help!!
I just wanna the minDate of the second one will change as long as the selected date of the first one change.
You are updating the second datepicker incorrectly. I am assuming you have already initialized the second one previously, although your code posted doesn't appear to. You need to use the option syntax when updating it, instead of the constructor.
http://jqueryui.com/demos/datepicker/#option-minDate
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
Full code:
$('#datepickerReturn').datepicker({
dateFormat: "mm-dd-yy",
minDate: 0
});
$("#datepickerDepart" ).datepicker({
dateFormat: "mm-dd-yy",
minDate: 0,
onSelect: function(dateText, inst) {
var m = dateText.substring(0,2);
var d = dateText.substring(3,5);
var y = dateText.substring(6,10);
console.log(d);
console.log(m);
console.log(y);
var newDate = new Date(y,m-1,d);
console.log(newDate);
$('#datepickerReturn').val("");
$('#datepickerReturn').datepicker({'option','minDate', newDate});
}
});
$("#strStartDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
onSelect: function(){
if ($("#strStartDate").val() > $("#strEndDate").val()){
$("#strEndDate").val($("#strStartDate").val());
}
}
});
$("#strEndDate").datepicker({
dateFormat: 'dd/mm/yy',
constrainInput: true,
firstDay: 1,
hideIfNoPrevNext: true,
beforeShow: function (input, inst) {
inst.settings.minDate = $("#strStartDate").val();
}
});
You can update secodn datepicker's mindate with following code :
$( "#ddate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
onSelect: function (selectedDate) {
$("#rdate").datepicker("option", "minDate", selectedDate);
},
minDate: 'today'
});
$( "#rdate" ).datepicker({
showOn: "button",
buttonImage: base_path+"img/date_picker.png",
buttonImageOnly: true,
minDate: 'today'
});
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);
}
});
Using jquery-ui datepicker
I would like to use altField and altFormat to 2 datepickers on the same page but I can't figure out how to add these 2 options which are specific to each datepicker along with my common set of options.
Code sample below. #dt1 does not work, but #dt2 works. How can I get #dt1 to work while using the datepickerOpts?
var datepickerOpts = {
minDate: -2,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd'
};
$('#dt1').datepicker(datepickerOpts,
{altField: '#alt1',
altFormat: 'mm-dd-yy'
});
$('#dt2').datepicker({
minDate: -2,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
altField: '#alt2',
altFormat: '#'
});
You passed in altField and altFormat as one array option in #dt1, but you did put them as 2 different options in #dt2 (which is the right way). What you have to do is make a copy of the opts(in case you add new elements in the future) for dt1 and dt2, append the altField altFormat as part of the datepickerOpts, and pass them as the only option to datepicker initialization.