Jquery UI Date Picker: Implementing Alternate Format - javascript

I'm trying to have my Jquery UI Date Picker insert YYYY/MM/DD format (due to SQL limitations). I see the options on the Jquery site, but can't get it to work. Below is my working code (without Alt Date). It's in a div that is hidden initially so it needs live():
$(function() {
$('.datepicker').live('focus', function () {
var picker = $(this).datepicker({showOn: ''});
picker.datepicker("show");
});
});
Any help?

You need to add "option", "dateFormat", "yy/mm/dd" to your datepicker call.
var picker = $(this).datepicker({dateFormat: "yy/mm/dd", showOn: ''});
This will make datepicker format the date value selected as 2011/08/22.

Related

Using values selected by JQuery datepicker from code-behind

I am building an ASP.NET website, and in the aspx markup page i put in a JQuery datepicker.
I also set default values, and on the FE side it looks ok, the text box is always populated with the selected date.
However when im trying to use the text values in the text box, it acts like there's nothing there.
This is my JS function in the ASPX page
<script type="text/javascript">
$(function () {
//console.log($("[id$=txtFromDate]"));
//console.log($("[id$=txtToDate]"));
$("[id$=txtFromDate]").datepicker();
$("[id$=txtToDate]").datepicker();
//init date format
$("[id$=txtFromDate]").datepicker({ dateFormat: 'mm/dd/yy' });
$("[id$=txtToDate]").datepicker({ dateFormat: 'mm/dd/yy' });
//init default date
var FromDate = new Date();
FromDate.setMonth(FromDate.getMonth()-1)
$("[id$=txtFromDate]").datepicker('setDate',FromDate);
$("[id$=txtToDate]").datepicker('setDate','today');
});
How can i work with the datepicker from the code-behind C#?
Replace
$("[id$=txtToDate]").datepicker('setDate','today');
with
var Today = new Date();
$("[id$=txtToDate]").datepicker('setDate',Today);
and then in code behind you can use this code
Request.Form["txtToDate"]
"txtToDate" is your input box Name and don't use input box id;

Display specific month on datepicker without changing selected date

i'm using two datepickers to select range of dates, and I have the following problem:
When i select "start date" on datepicker I, I update minDate on the second one (analogously when selecting "end date" I update maxDate on the first one).
The problem is, that updating maxDate or minDate causes refreshing of datepicker.
So, for example if someone was browsing months on datepicker II and then selects some date on datepicker I then datepicker II will refresh and display goes back to last selected date on datepicker II, instead of staying at month user was browsing.
I already know the way to find out which month was last displayed on datepicker - by using "onChangeMonthYear" option.
The question is how to force datepicker to navigate to month I want (without actually changing selected date).
I'd really appreciate any help or suggestions.
Code, as requested. I'm using AngularJS, but I guess you can easily see how this would be translated into JQuery:
scope.fromDate.onChangeMonthYear = function(year, month){
//saving info about date I
};
scope.toDate.onChangeMonthYear = function(year, month){
//saving info about date II
};
scope.fromDate.onSelect = function(selectedDate) {
element.find(".date-to").datepicker("option", "minDate", selectedDate);
};
scope.toDate.onSelect = function(selectedDate) {
element.find(".date-from").datepicker("option", "maxDate", selectedDate);
};
according to jquery ui datepicker api reference:
// getter
var minDate = $( ".selector" ).datepicker( "option", "minDate" );
// setter
$( ".selector" ).datepicker( "option", "minDate", new Date(2007, 1 - 1, 1) );
this should be used after the initialization, without reseting the datepicker

Jquery UI Datepicker return minDate

I'd like to think I'm tech savvy, but my experience with js is all code-hacking, so I really don't know what I'm doing.
I have all of the options of the datepicker set up in an external js file. The datepicker is for selecting a delivery date. In the header, I have a clock that counts down to 2 PM - the latest we can deliver. At 2, the clock turns off and is replaced with an image. However, we don't delivery on Sundays or specific dates set in the datepicker options, but the clock still shows on those dates.
I want the clock to read the next available delivery date from the dateicker (set by minDate). Is there any way for me to call that variable from my datepicker options back to the header?
var minDate = $( "%your_selector%" ).datepicker( "option", "minDate" );
You can use the option getter for the datepicker:
$(selector).datepicker('option', 'minDate');
jQuery UI Datepicker - minDate

jQuery: retrieve datepicker date, check if inside date range, display/hide fields

I have an online form and I want to hide/display specific fields based on the date the user selects in a datepicker field. However, the date they select must fall within a specific date range in order for the additional fields to be shown/hidden.
Right now, this is the only code I have (I am not jQuery writer)
jQuery(document).ready(function ($) {
$("#dpick").datepicker("getDate");
var monthsWithExams;
monthsWithExams = $("#dpick").datepicker("getDate");
if monthsWithExams - THIS IS WHAT I NEED HELP FIGURING OUT
});
#dpick is the id of my datepicker field. Once they select a date, I want the code to check whether the selected date is inside a specific date range - for example, if they pick any day in December, then I want the form field with id tours to be hidden. I think I can write the if...else part, I just don't know how to check if date is inside date range.
I am not a jQuery expert so please try to explain it to me so that I can understand! Thanks for any help! :)
You can set the range by giving the minDate(starting date) and maxDate(Ending date)
//This will only allow 30 days from now range
$(function() {
$("#txtFiled").datepicker({
minDate: 'today',
maxDate: "+30D"
});
});
The datepicker has an "onClose" which can take the chosen date and check it against other dates.
$( "#dpick" ).datepicker({
onClose: function ( selectedDate ) {
var date = selectedDate ;
// if date is between x and y hide element A
}
});

How to make all future dates non-clickable

I want to disable all future dates in the calendar after today. Today's date is highlighted in Yellow (Feb 23rd 2012)in the diagram below. All the other future dates should be non clickable. How can i do that ?
For instance 24th,25th.... etc should not be clickable
Note:
$('.datepicker').BlackoutDates.Add(new CalendarDateRange(DateTime.Now.AddDays(1), DateTime.MaxValue)); doesn't work
If you are using JQuery UI datepicker calandar, use maxdate method : http://api.jqueryui.com/datepicker/#option-maxDate
$( ".selector" ).datepicker({ maxDate: new Date() });
new Date() corresponds to the current date
demo : http://jsfiddle.net/UQTY2/21/
if the datepicker wizard has already been initialized on the input, you can also use:
$( ".selector" ).datepicker("option", {maxDate: "+0D" });
That should also work when a day ends and a new day starts after the datepicker has been initialized.

Categories