I have declared a date picker instance as follows:
$("#datePickerId").datepicker(
{ dateFormat: 'DD, d MM yy',
minDate: 0,
showOn: 'button',
buttonImage: '../../images/calendar.gif',
buttonImageOnly: true,
hideIfNoPrevNext: true
}
);
I now want to change to the minDate option so I do this:
$('#datePickerId').datepicker('option', 'minDate', 3);
But nothing happens. Was I suppose to do anything else? What other possible causes could there be?
How to dynamically alter the minDate (after init)
The above answers address how to set the default minDate at init, but the question was actually how to dynamically alter the minDate, below I also clarify How to set the default minDate.
All that was wrong with the original question was that the minDate value being set should have been a string (don't forget the quotes):
$('#datePickerId').datepicker('option', 'minDate', '3');
minDate also accepts a date object and a common use is to have an end date you are trying to calculate so something like this could be useful:
$('#datePickerId').datepicker(
'option', 'minDate', new Date($(".datePop.start").val())
);
How to set the default minDate (at init)
Just answering this for best practice; the minDate option expects one of:
a string in the current dateFormat OR
number of days from today (e.g. +7) OR
string of values and periods ('y' for years, 'm' for months, 'w' for
weeks, 'd' for days, e.g. '-1y -1m')
#bogart setting the string to "0" is a solution as it satisfies option 2 above
$('#datePickerId').datepicker('minDate': '3');
jQuery UI docs for minDate
Draco,
You can do it like this:
$("#datePickerId").datepicker(
{ dateFormat: 'DD, d MM yy',
minDate: new Date(2009, 10 - 1, 25), // it will set minDate from 25 October 2009
showOn: 'button',
buttonImage: '../../images/calendar.gif',
buttonImageOnly: true,
hideIfNoPrevNext: true
}
);
remember to write -1 after month (ex. for june is -> 6 -1)
Use minDate as string:
$('#datePickerId').datepicker({minDate: '0'});
This would set today as minimum selectable date .
Change the minDate dynamically
.datepicker("destroy")
For example
<script>
$(function() {
$( "#datepicker" ).datepicker("destroy");
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
Say we have two date select fields, field1, and field2. field2 date depends on field1
$('#field2').datepicker();
$('#field1').datepicker({
onSelect: function(dateText, inst) {
$('#field2').val("");
$('#field2').datepicker("option", "minDate", new Date(dateText));
}
});
There is no need to destroy current instance, just refresh.
$('#datepicker')
.datepicker('option', 'minDate', new Date)
.datepicker('refresh');
Month start from 0.
0 = January,
1 = February,
2 = March,
...,
11 = December.
Related
I am using Bootstrap Datetimepicker for setting start_at and end_at time in my Rails app.
If you set end_at future time, of course you can set and edit, but if you edit the event you set before and already expired because of end_at, the time disapper in view.
In my DB, of course I can have correct end_at time, but not view.
How can I put correct time (past time) in my view?
$('#tickets .datetimepicker3').datetimepicker({
format: 'YYYY/MM/DD HH:mm',
showClose:true,
useCurrent:false,
minDate: d,
maxDate: y,
stepping: 15,
// sideBySide:true
});
$("#tickets .datetimepicker3").on("dp.change", function (e) {
$('.datetimepicker2').data("DateTimePicker").maxDate(e.date);
});
You can pass the date on page load in java script from rails.
setdate('#{object.end_date}'})
funtione setdate(end_date){
$('#tickets .datetimepicker3').datetimepicker({
format: 'YYYY/MM/DD HH:mm',
showClose:true,
useCurrent:false,
minDate: d,
maxDate: moment(end_date,'YYYY/MM/DD HH:mm'),
stepping: 15,
// sideBySide:true
});
}
you can use moment() of datetimepicker.
$(document).on('focus',".expdate",function(){
$('.expdate').datepicker({minDate:0});
$(this).datepicker();
$( ".expdate" ).datepicker('option', 'dateFormat' , 'dd/mm/yy');
Even i tried with changeYear: true
Try this
$(document).on('focus','.expdate',function(){
$('.expdate').datepicker({ minDate:0, dateFormat:'dd/mm/yy'});
});
I am doing some work in .net technology using MVC 4.0 with VB language.
I have dropdownlist that has a set of years from 2006 to running year.
I want to set the selected year from dropdownlist to datepicker so I can have that year specific months and days and I have done following changes in datepicker.
$('input').filter('.datepickerHoliday').datepicker({
changeMonth: true,
changeYear: false,
showYear: false,
dateFormat: 'mm/dd/' + yr,
});
How can I do this?
This might do the trick. This is an basic you can build top of it.
var myDate = new Date();
var prettyDate = 01 + '/' + 01 + '/' + 'your selected dropdownlist year'
$("#date_pretty").val(prettyDate);
here is an link which gives you what you need :
Link
Link
var yr = $('#ddlYear').val();
var beforeDate = '01/01/' + yr;
var myDate = new Date(beforeDate);
$('input').filter('.datepicker').datepicker({
changeMonth: true
});
$('input').filter('.datepicker').datepicker("setDate", myDate);
so I got my selected year's date means year specific months and days.
I have the following in my MVC View:
#Html.TextBoxFor(model => model.FromDateCollected, new { style = "width:90px;" })
In query I have the following:
$("#FromDateCollected").datepicker();
To get the selected date, I tried the following:
var dt = $("#FromDateCollected").datepicker("getDate")
alert(dt);
but getting:
[object Object]
just get the value of text box
var dt = $("#FromDateCollected").val();
alert(dt);
If you want to get the selected date, when user select a date in the calendar, you can do that on the onSelect event
$(function() {
$('#FromDateCollected').datepicker({
onSelect: function(dateText, inst) {
alert(dateText);
}
});
});
Working sample http://jsfiddle.net/pDmjm/5/
EDIT : as per the comment,
$("#FromDateCollected").datepicker("getDate") will give you a Date object and $("#FromDateCollected").val(); will give you a string with current value in the textbox. write the result to a console and you will see the result.
Sample : http://jsfiddle.net/pDmjm/14/ (check firebug console after alerts)
You can get the date from the textbox value.
var dt = new Date(Date.Parse($('#FromDateCollected').val()));
alert(dt);
what does navigationAsDateFormat do?
also, I have changeMonth and changeYear enabled, how can I make it so that when you change the month and year using those dropdowns, the input field is automatically updated (e.g., updates without having to click on a new day)
added this parameter, does what I need it to, but would still like to get the day in the easiest way possible:
onChangeMonthYear: function(year, month, inst) { $(this).val(month + '/01/' + year); }
Here's the docs for navigationAsDateFormat
When true the formatDate function is
applied to the prevText, nextText, and
currentText values before display,
allowing them to display the target
month names for example.
You could write a function to change the value in the input when the onChangeMonthYear event is raised
Here's a Working Demo
Something like
$('#picker').datepicker({
onChangeMonthYear: function(year, month, inst) {
var now = new Date(this.value);
if (now) {
var max = new Date(year, month, 0).getDate();
var day = now.getDate() > max?
max : now.getDate();
var newDate = new Date(year, month -1, day);
inst.input.datepicker('setDate', newDate);
}
},
changeMonth: true,
changeYear: true
});