I am using the following for datepicker in Jquery to format the date display in dd/mm/yy format and also I want the user not to select future date.Only one thing is working at a time.
<script type="text/javascript" language ="javascript" >
$(function () {
var date = new Date();
var currentDate = date.getDate();
var currentMonth = date.getMonth();
var currentYear = date.getFullYear();
$(".datepicker").datepicker({ dateFormat: 'dd/mm/yy' });
$(".datepicker").datepicker({ maxDate: new Date(currentYear, currentMonth, currentDate) });
});
</script>
How do make, both the dateformat and disable the future dates to work simultaneously. I am missing single bit, I don't know how to club this two validations or requirements togather.
Any answers Please?
Thank you.
I had a similar requirement for my code with a hire date. Here's how I did it:
$('#hireDate').datepicker({
dateFormat: 'dd/mm/yy',
maxDate: new Date(currentYear, currentMonth, currentDay)
});
The user can still enter a future date manually and weasel around your date picker. We had this problem on a production system.
If you want to additionally validate the date using the validation plugin, try this:
/**
* Requires Datepicker and Validator
*
* Params:
* 0...dateformat. see datepicker
* 1...date. Value "0" is "today"
* 2...(optional). date to display. will be automatically filled if 0 and 1 are set.
* usage:
* myfield: { maxDate: ['m/d/yy', 0] }
*/
jQuery.validator.addMethod("maxDate",
function(value, element, params) {
if (!params[0])
throw 'params missing dateFormat';
if (typeof(params[1]) == 'undefined' )
throw 'params missing maxDate';
var dateFormat = params[0];
var maxDate = params[1];
if (maxDate == 0) {
maxDate = new Date();
maxDate.setHours(0); // make it 00:00:0
maxDate.setMinutes(0);
maxDate.setSeconds(0);
maxDate.setMilliseconds(0);
}
if (typeof(params[2]) == 'undefined' )
params[2] = $.datepicker.formatDate(dateFormat, maxDate);
try {
var valueAsDate = $.datepicker.parseDate( dateFormat, value )
return (valueAsDate < maxDate);
} catch (x) {
return false;
}
},'Must be greater than {2}.');
$("#myform").validate({
rules: {
datepicker : {
maxDate ['m/d/yy', 0]
}
}
});
HTML:
<input name="datepicker" class="datepicker" type="text"/>
Related
My requirement is to bind these two dropdown with fullcalendar and reflect the changes according.
I have already searched lot about binding the custom dropdown to the fullcalendar but not getting success yet!!
So any help is appreciated.
$(document).ready(function() {
var $months = $('#months');
var $calendar = $('#calendar');
$calendar.fullCalendar({
viewRender: function() {
buildMonthList();
}
});
$('#months').on('change', function() {
$calendar.fullCalendar('gotoDate', $(this).val());
});
buildMonthList();
function buildMonthList() {
$('#months').empty();
var month = $calendar.fullCalendar('getDate');
var initial = month.format('YYYY-MM');
month.add(-6, 'month');
for (var i = 0; i < 13; i++) {
var opt = document.createElement('option');
opt.value = month.format('YYYY-MM-01');
opt.text = month.format('MMM YYYY');
opt.selected = initial === month.format('YYYY-MM');
$months.append(opt);
month.add(1, 'month');
}
}
});
Please check this fiddle for month and year dropdown for fullcalendar.
https://jsfiddle.net/L6a5LL5b/
I using two date selected daterangepicker. this working perfect but how to disable past date. below is my code
js/site/daterange/moment.min.js">
<script type="text/javascript" src="<?php echo base_url();?>js/site/daterange/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="<?php echo base_url();?>css/site/daterangepicker.css" />
<script type="text/javascript">
$(function() {
$('input[name="checkin"],input[name="checkout"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="checkin"],input[name="checkout"]').on('apply.daterangepicker', function(ev, picker) {
//$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
$('#checkin').val(picker.startDate.format('MM/DD/YYYY'));
$('#checkout').val(picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="checkin"],input[name="checkout"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
this is easy way to solve the problem
$('input[name="daterange"]').daterangepicker({
minDate:new Date()
});
I had the same issue. I checked http://www.daterangepicker.com/#options and seems to me minDate would do the job.
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 }
var today = dd+'/'+mm+'/'+yyyy;
$('input[name="daterange"]').daterangepicker({
minDate:today
});
So as far as i can see from your code you want to disable dates that are in the past so there are multiple ways to do such a thing but the easiest of them in my opinion would be to get the current date on document load and set that as the start date for your date range picker.
http://www.daterangepicker.com/#options should give you the example explaining the startDate syntax to do the same and the code to find the current date in the said format can be show as below:
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 }
var today = dd+'/'+mm+'/'+yyyy;
Here today stores the string form of the format you need and can be set to the startDate attribute.
What is the best way to validate a date input which can be changed with text? I've tried with aui:validator with no success, when I click on the datepicker, the onSelect doesn't update the value and my custom validation recieves the old value from the datepicker.
<aui:input type="text" name="creationDate" id="creationDate" class="datefield">
<aui:validator name="required"/>
<aui:validator name="custom" errorMessage="Default error message">
function (val, fieldNode, ruleValue) {
var date = new Date(val);
var today = new Date();
return (date < today);
}
}
</aui:validator>
</aui:input>
<script type="text/javascript">
$(document).ready(function(){
$("#creationDate").datepicker("option", "minDate", 0);
}
</script>
Try this:
$("#creationDate").datepicker(
{
minDate: 0,
onClose: function() {
$(this).focus().blur();
}
}
);
I am using a kendo datetimepicker. When user opens the calender and select any date I need to check for some other dates, ie need to run validations if the date is wrong then prevent the new date from filling the date picker and keep the old value, otherwise allow datepicker to change value. I tried with event.preventDeafult , but unfortunatly it is not working..
Is there any way to acheceive this?
Here is the fiddle enter link description here
Any help is appreciated.
Example fiddle here
$("#datePicker").kendoDatePicker({
change:function(event){ alert(1);
// some validations here
event.preventDeafult(); }
});
Go through this answer. May any lines help you to solve your problem. You can simply assign like this.
$("#datepicker").kendoDatePicker({
change: function () {
// some validations here
var i = 0;
var prev = "9/12/2014";
var date = kendo.toString(this.value(), 'd');
if (i == 0) {
$("#datepicker").data("kendoDatePicker").value(prev);
}
},
close: onClose,
open: onOpen
});
Updated Answer :
var date;
$(function () {
date = $("#datepicker").data("kendoDatePicker").value();
$("#datepicker").kendoDatePicker({
change: function () {
// some validations here
var i = 0;
var prev = date;
if (i == 0) {
$("#datepicker").data("kendoDatePicker").value(prev);
}
},
close: onClose,
open: onOpen,
});
})
I've used read only in the past to do this.
var endDate = $("#endDate").data("kendoDatePicker");
endDate.readonly();
I am using jquery bassistance validation and need to verify that a start date is after an end date. I am wondering if anyone knows if this functionality exists and if I can add rules to do this or if I have to add a custom check. I am having difficulty finding any examples of this that work with my code which forwards to another function if the form is valid. (pasted below)
$("#hotels").validate({
rules: {
checkinDate: {
date: true
},
checkoutDate: {
date: true
}
}
});
$("#hotels input.submit").click(function() {
var isValid = $("#hotels").valid();
if (isValid == true) {
} else {
hComp();
return false;
}
} else {
return false;
}
});
I saw this in another example, but am not sure how I could use it.
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
if (startDate < endDate){
// Do something
}
Thanks in advance for any assistance.
That example looks like it's exactly what you need. Have a look here.
Borrowing from that jquery example, suppose you have the following HTML:
<input id="startDate" value="Jan 12, 2009" />
<input id="endDate" value="Jan 12, 2010" />
Then this JavaScript code should show the alert "Start date is before end date!" (assuming the values aren't modified):
var startDate = new Date($('#startDate').val());
var endDate = new Date($('#endDate').val());
if (startDate < endDate){
alert("Start date is before end date!");
}
I ended up solving this problem before validation, which is probably a much better idea anyway. Here's the solution using the jquery ui datepicker. Then I can just use the same logic to do a final validation check.
$('input').filter('.datepicker').datepicker({
beforeShow: customRange,
showOn: 'both',
buttonImage: contextPath + '/assets/images/icon-calendar.gif',
buttonImageOnly: true,
buttonText: 'Show Date Picker'
});
function customRange(a) {
var b = new Date();
var c = new Date(b.getFullYear(), b.getMonth(), b.getDate());
if (a.id == 'checkoutDate') {
if ($('#checkinDate').datepicker('getDate') != null) {
c = $('#checkinDate').datepicker('getDate');
}
}
return {
minDate: c
}
}