I am trying to allow customer within age 18-50 in my application and I am using jqueryui datepicker.
I am not getting a way for events to be employed for this!
Any help will be much appreciated!
While investigating, I got a way to do this.
jQuery( "#datepicker" ).datepicker({
maxDate: '-18y',
minDate: '-68y',
});
where #datepicker is my selector.
If there's a better way to do the same, then comments are most welcome!
try this .. its another way...
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10) {
dd = '0'+dd
}
if(mm<10) {
mm = '0'+mm
}
today = mm + '/' + dd + '/' + yyyy;
$('input').datepicker({
minDate: 'today-18250',
maxDate: 'today-6570',
beforeShowDay: function(date){
var str = jQuery.datepicker.formatDate('yy-mm-dd', date);
var minDateArr = $(this).datepicker( "option", "minDate" ).split('/')
var minDate = new Date(minDateArr[2],minDateArr[0]-1,minDateArr[1]);
if ($.inArray(str) != -1){
return [false, 'special']
}
else if(date < minDate ){
return [false, 'not-special']
}
else{
return [true,"special"];
}
}
});
Related
I have to set the datepicker date format like dateFormat: "yy-mm-dd", and this is because I am getting data from database in this format. Now I want to display any changes of datepicker in this format 'DD, d MM, yy' what I did was
onSelect: function(){
var formattedDate = $('#datepicker').datepicker({ dateFormat: 'DD, d MM, yy' }).val();
alert(formattedDate);
}
but the datepicker still returning the data in "yy-mm-dd" format. How can I fix this?
Demo
You just need to use the utility function:
$.datepicker.formatDate( format, date, options )
$.datepicker.parseDate( format, value, options )
See more: https://api.jqueryui.com/datepicker/
Working example: http://jsfiddle.net/Twisty/1ku4wLzf/5/
JavaScript
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
minDate: 0,
maxDate: new Date('2019-10-31'),
onSelect: function(dStr, obj) {
var dt = $.datepicker.parseDate("yy-mm-dd", dStr);
var fdt = $.datepicker.formatDate("DD, d MM, yy", dt);
alert(fdt);
}
});
I have implemented a bootstrap datepicker for policy start, so that I want to show user to select dates from current month and next month only.
Can anyone tell me how is it possible in bootstrap datepicker?
$(".policy-start-dp").datepicker({
});
You need to set the minimum and maximum values of the date picker
//Get Current Date
var date = new Date();
//Create Variable for first day of current month
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
//Create variable for last day of next month
var lastDay = new Date(date.getFullYear(), date.getMonth() + 2, 0);
$( "#datepicker" ).datepicker({
minDate: firstDay,
maxDate: lastDay
});
Hope that helps :)
no need to set start and end date just pust the "startDate" code is below.
var changeDateFormat = () => {
if ($(fileMonths).parent().parent().hasClass('sandbox-container')) {
$('#fileMonths').datepicker({
autoclose: true,
minViewMode: 1,
startDate: '0m',
format: "mm/yyyy"
});
}
};
date picker months
I am running an Ajax call to get places available for a certain date.
I can get that date fairly comfortably with the following code :
$('.booking-date').datepicker(
{
beforeShowDay: enableAllTheseDays,
numberOfMonths: 2,
dateFormat: 'DD, d MM, yy',
showButtonPanel: true,
onSelect: function(dateText, inst) { }
}
I know the dateFormat is there, but I ideally want that to be in a nice neat format for the end user, Which produces something like : Sunday, 28 July, 2013
If I can switch the DateFormat for the dateText variable to a MySQL friendly date that would be even better.
Hope someone can help
Cheers
Solved by creating the following :
onSelect: function()
{
var dateText = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker("getDate"));
$('.date_hidden').html(dateText);
}
Currently this code is working but not as expected:
$("#start_date").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(_date, _datepicker)
{
var myDate = new Date(_date);
myDate.setDate(myDate.getDate()+8);
$('#estimated_hatching_date').text(myDate);
alert( myDate);
}
});
The first issue is, how the date is presented. Currently that code above alerts Fri Oct 01 2010 17:00:00 GMT-0700 (Pacific Daylight Time). I would like the output to be just the date, for example, 09/06/2010.
The second issue is, $('#estimated_hatching_date').text(myDate); does not change the text. When that code is fired nothing is changed. However if I do: $('#estimated_hatching_date').text('myDate'); myDate is placed into the #estimated_hatching_date div.
So, how do I just output the date and replace the "text" inside of #estimated_hatching_date div with just the date +7 days from when a date is selected?
Thank You,
Rich
jQuery UI Datepicker has a built in formatDate function. Please #dottedquad, don't use your self-made version, date math and formatting is harder than you imagine. The corner cases will make you tear your hair out.
onSelect: function(_date, _datepicker) {
var myDate = new Date(_date);
var myText = $.datepicker.formatDate('dd-mm-yy',myDate);
alert(myText);
}
I read over the ui datepicker manual again and figured it out.
$("#start_date").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(_date, _datepicker)
{
var myDate = new Date(_date);
myDate.setDate(myDate.getDate()+8);
var fullYear = myDate.getFullYear();
var month = ((myDate.getMonth()+1) < 10) ? ('0' + (myDate.getMonth()+1)) : myDate.getMonth()+1;
var day = (myDate.getDate() < 10) ? ('0' + myDate.getDate()) : myDate.getDate();
var myNewDate = fullYear + '-' + day + '-' + month;
$('#estimated_hatching_date').text(myNewDate);
alert(myNewDate);
}
});
That code works as expected. Anyone else have any more ideas that would get that job done differently?
-Thank You,
Rich
I had the same problem and used "altField" option with a hidden input. Hidden input's value is always formatted according to "dateFormat"
Basically I want to take date from one field and then increment day and set it to another date field.
This is kind of psuedo-code:
var date1 = $( '#date1' ).datepicker( 'getDate' );
var incrementDate = date1 + 1 //increment day
$( '#date2' ).datepicker('setDate', incrementDate );
var date1 = $('#date1').datepicker('getDate');
var date = new Date( Date.parse( date1 ) );
date.setDate( date.getDate() + 1 );
var newDate = date.toDateString();
newDate = new Date( Date.parse( newDate ) );
$('#date2').datepicker('setDate', newDate );
var date = new Date($('#date1').datepicker('getDate'));
date.setDate(date.getDate() - 1);
$('#date1').datepicker('setDate', date);