var birthDate;
$(function() {
var currentDate = new Date();
$("#BirthDate").datepicker({
dateFormat: "mm/dd/yy",
showOn: "button",
buttonImage: "../Images/cal.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
maxDate: currentDate,
yearRange: "-90:+10",
onSelect: function(dateText, inst) { birthDate = dateText;}
});
});
$(function() {
var currentDate = new Date();
$("#MaritalStatusDate").datepicker({
dateFormat: "mm/dd/yy",
showOn: "button",
buttonImage: "../Images/cal.gif",
buttonImageOnly: true,
changeMonth: true,
changeYear: true,
minDate: birthDate,
maxDate: currentDate,
yearRange: "-90:+10"
});
});
In the above code I am trying to disable $("#MaritalStatusDate") dates based on the date selected in $("#BirthDate"). I am using the onSelect event in BirthDate to identify the selected date and I'm storing the value in a variable which is globally declared. Using the variable I have set the minDate in $("#MaritalStatusDate"). But the dates are not getting disabled based on minDate value. Do I need to change the date format while assigning the value to the variable? Can anyone please help me in doing this?
You can simply set the minDate for $('#MaritalStatusDate') in onSelect event.
$("#BirthDate").datepicker({
...
onSelect: function(dateText, inst) {
$('#MaritalStatusDate').datepicker('option', 'minDate', dateText);
}
});
See this in action: http://jsfiddle.net/william/2q7TN/.
Related
$(tdForDatePicker).datepicker({
numberOfMonths: [1, 1],
dateFormat: "mm/dd/yy",
defaultDate: myMinDateBegin,
minDate: {date1:'01/03/2014', date2:'06/18/2014'},
maxDate: {date1:'01/141/2014', date2: '06/30/2014'},
onSelect: function () {
$(this).focusin();
}
});
This is an example of what i am trying to do. The user has two ranges to work with mindate: '01/03/2014' maxdate: '01/14/2014' and mindate: '06/18/2014' with maxdate: of '06/30/2014'. multiDatesPicker does not work as I want in this part of my app. How can I make datepicker to give user two mindate and two maxdate options. My search in stackoverflow has not found this unique functionality.
Update: Found this solution on jQuery datepicker, custom range quirk
This is my present code:
ranges = [{ start: moment(new Date('01/03/2014')).format("MM/DD/YYYY"), end: moment(new Date('01/14/2014')).format("MM/DD/YYYY") },
{ start: moment(new Date('06/18/2014')).format("MM/DD/YYYY"), end: moment(new Date('06/30/2014')).format("MM/DD/YYYY") }];
myMinDateBegin = ranges[0].start;
myMaxDateBegin = ranges[ranges.length - 1].end;
console.log('minDateBeginOnEdit', myMinDateBegin + " " + myMaxDateBegin);
$(tdForDatePicker).datepicker({
numberOfMonths: [1, 1],
dateFormat: "mm/dd/yy",
beforeShowDay: function(date) {
$.each(ranges, function (index) {
if(date >= ranges[index].start && date <= ranges[index].end){
return [true, ''];
}
})
return [false, ''];
},
minDate: myMinDateBegin,
maxDate: myMaxDateBegin,
defaultDate: myMinDateBegin,
onSelect: function () {
$(this).focusin();
}
})
The console reveals dates as 01/03/2014 and 06/30/2014. The datepicker has all dates greyed out.
This holds the solution jQuery ui: multiple ranges for date picker?
My Code
var beGdate1start = new Date('01/03/2014');
var beGdate1end = new Date('01/14/2014');
var beGdate2start = new Date('06/18/2014');
var beGdate2end = new Date('06/30/2014');
$(tdForDatePicker).datepicker({
numberOfMonths: 1,
dateFormat: "mm/dd/yy",
beforeShowDay: function (date) {
return [(date >= beGdate1start && date <= beGdate1end || date >= beGdate2start && date <= beGdate2end), ''];
},
minDate: beGdate1start,
maxDate: beGdate2end,
//defaultDate: ranges[0].start,
onSelect: function () {
$(this).focusin();
}
})
The link gives a fiddle to play with. Thanks.
i have used jquery-ui datepicker in my application. I want to count a week number with date type "dd-mm-yy" but it giving me a wrong week number i realize that it uses "mm-dd-yy" date type to calculate week number.
i have used bellow code :
<input type="text" class="calendar">
<input type="text" class="week">
$(function() {
$(".calendar").datepicker({dateFormat: "dd/mm/yy",
showWeek: true,
onSelect: function(dateText, inst) {
dateFormat: "'Week Number '" + $.datepicker.iso8601Week(new Date(dateText)),
$(".week").val('Week:' + $.datepicker.iso8601Week(new Date(dateText)));
}
});
$(".calendar").datepicker("setDate", new Date());
});
here is a also a JSFiddle for it
Use inst to get selectedYear, selectedMonth and selectedDay and construct a Date from those values instead of the dateText.
Here is the code:
$(function() {
$(".calendar").datepicker({
dateFormat: "dd/mm/yy",
showWeek: true,
onSelect: function(dateText, inst) {
var newDate = new Date(inst.selectedYear, inst.selectedMonth, inst.selectedDay);
dateFormat: "'Week Number '" + $.datepicker.iso8601Week(newDate),
$(".week").val('Week:' + $.datepicker.iso8601Week(newDate));
}
});
$(".calendar").datepicker("setDate", new Date());
});
Here is the updated JSFiddle.
add this link to JSFiddle resources
https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.js
now run this code only
$(document).ready(function(){
var weekday = moment("12-25-1995", "MM-DD-YYYY").week();
alert(weekday);
});
I am trying to use Date picker in a frame (main page is composed of 2 frames) and when I click in the textbox the calendar appers in the same frame, drops down with scroll so that it is invisibile (you need to scroll to see it). I want to make it to drop over all the frames. The code I use is the following:
$(function() {
$('#datepicker').datepicker({minDate: '0', maxDate: '+1Y+6M', onSelect: function(dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$('#datepicker2').datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}});
$('#datepicker2').datepicker({minDate: '0', maxDate: '+1Y+6M', onSelect: function(dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
}});
});
All comments will be very appreciated.
<script type="text/javascript" language="javascript">
//datetimepicker
$(function () {
$('.datepicker').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd M yy',
showAnim: 'slideDown'
});
});
</script>
<asp:TextBox ID="txtentrydate" CssClass="datepicker" runat="server" Width="200px"></asp:TextBox>
this code for desired textbox calender
I have a problem with my datepicker. When I focus the text field it shows properly, but when I click anywhere else in the screen (to make it dissapear), then if I focus again the text field without previously selecting another element, the datepicker doesn't show.
Here is the code:
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var day = $("#datepicker").datepicker('getDate').getDate();
var month = $("#datepicker").datepicker('getDate').getMonth() + 1;
var year = $("#datepicker").datepicker('getDate').getFullYear();
$(this).datepicker('setDate', new Date(year, month, day));
}
});
});
The problem is in your onClose function. When you call $("#datepicker").datepicker('getDate').getdate(), you run the possibility of calling getDate() on null.
The following should fix the problem, hope it works for you =)
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
changeDay: true,
showButtonPanel: true,
dateFormat: 'dd MM yy',
onClose: function (dateText, inst) {
var getdate = $('#datepicker').datepicker('getDate');
if(getdate) {
var day = getdate.getDate();
var month = getdate.getMonth() + 1;
var year = getdate.getFullYear();
$('#datepicker').datepicker('setDate', new Date(year, month, day));
}
}
});
});
Edit: here's the jsfiddle if you need a working proof of concept: http://jsfiddle.net/jcolicchio/fpS2Q/
I am attempting to combine this article and this article where I have a date and time pickers in each row. I have this working for existing rows, but they don't work on added rows.
I found the jQuery .live function which seems to be what I am looking for, but I am confused on how it works. Here is my working jQuery code:
$(".datepicker").datepicker({
showAnim: '',
dateFormat: 'm/d/yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
buttonText: 'Select a date'
});
$(".timedropdown").timedropdown();
I have tried to change them to:
$(".datepicker").live("datepicker", function() {
$(this).datepicker({
showAnim: '',
dateFormat: 'm/d/yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
buttonText: 'Select a date'
});
});
$(".timedropdown").live("timedropdown", function() {
$(this).timedropdown();
});
But that not only doesn't work, but it also removes them from the existing rows that previously worked.
What am I doing wrong?
I found this question that gave me the solution:
$(".datepicker").live("click", function() {
$(this).datepicker({
showAnim: '',
dateFormat: 'm/d/yy',
showOn: 'button',
buttonImageOnly: true,
buttonImage: '../../js/txtdropdown/txtdropdown-btn.png',
buttonText: 'Select a date'
});
});
$(".timedropdown").live("click", function() {
$(this).timedropdown();
});