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.
Related
I have a simple datetime attribute to pick a date like this on the views
= f.date_select :period_end_at, default: { day: 31 }
It defaults to last day of the month as the example. The problem is that if month selected is "June" that has 30 days, since there is no '31' day for June, it will save the object as day 1 instead of day 30.
Is there an easy way to always save to the highest day of the month if the value provided is above all available for that moonth?
Not sure if it could be shortened, but this should work (if I understood your question correctly):
= f.date_select :period_end_at, default: { day: Time.days_in_month(Time.now.month) }
Take a look at this js snippet, it works well for me with Rails 4.2.0
<script>
$(function(){
railsMonthDates();
$("select[id*=_2i], select[id*=_1i]").change( railsMonthDates );
});
function railsMonthDates() {
$("select[id*=_2i]").each(function(){
$monthSelect = $(this);
$daySelect = $(this).siblings("select[id*=_3i]");
$yearSelect = $(this).siblings("select[id*=_1i]");
var year = parseInt($yearSelect.val());
var month = parseInt($monthSelect.val());
var days = new Date(year, month, 0).getDate();
var selectedDay = $daySelect.val()
$daySelect.html('');
for(var i=1; i<=days; i++) {
$daySelect.append('<option value="'+i+'">'+i+'</option>');
}
$daySelect.val(selectedDay);
});
}
</script>
Simply paste it into the partial which has the form.
Pay attention, it match every element which has id*=_1i, id*=_2i or id*=_3i, so if you have more f.date_select you need to specify a better matcher.
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);
To the question started, my code (I'll try to only include relevant portions to start), starting with my script:
function RaceDate_onChange() {
var pickedDate = $(this).data('tDatePicker').value();
var month = pickedDate.getMonth() + 1;
$.get("/RaceCard/Details?year=" + pickedDate.getFullYear() + "&month=" + month + "&day=" + pickedDate.getDate());
}
Then my markup:
#Html.Telerik().DatePickerFor(model => model.RaceDate).ClientEvents(events => events.OnChange("RaceDate_onChange"))
And finally a bit of the receiving action:
[HttpGet]
public ActionResult Details(int year, int month, int day)
{
var viewModel = new RaceCardModel {Metadata = DetailModelMetadata.Display, RaceDate = new DateTime(year, month, day)};
I'm trying to get the selection of a new date to trigger a GET, to refresh the page without submitting a form. This works fine, except for this problem:
In GET requests to the Details action, the day value is always one day behind the DatePicker. E.g. The first value is set from a view model property, when the view is rendered, say 3. I then click on 14 and hit my breakpoint in the action method. The day value is 3. When I click on 29 and hit the breakpoint, the day value is 14.
Besides asking what is wrong, I'll take a liberty and ask if there is a better way that is no more complicated. I am fairly novice and would rather deliver working code that needs revision than get bogged down in tangents and details.
Try using e.value instead as shown in the client-side events example. You are probably using an older version where the value() method returned the previous value during the OnChange event.
UPDATE:
"e.value" means the value field of the OnChange arguments:
function onChange(e) {
var date = e.value; // instead of datePicker.value()
}
As far as the 1 month difference you are getting, that's normal, and it is how the getMonth() method works in javascript on a Date instance:
The value returned by getMonth is an
integer between 0 and 11. 0
corresponds to January, 1 to February,
and so on.
So adding +1 is the correct way to cope with the situation, exactly as you did.
Just a little remark about your AJAX call: never hardcode urls. Always use url helpers when dealing with urls:
var year = pickedDate.getFullYear();
var month = pickedDate.getMonth() + 1;
var day = pickedDate.getDate();
var url = '#Url.Action("Details", "RaceCard")';
$.get(url, { year: year, month: month, day: day }, function(result) {
// process the results of the AJAX call
});
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
});
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.