In this image when i select value from drop down and select dates then container is displayed and then when i select row from table data then cont and sumdata div is displayed now i want when i select again dates from date picker then want to hide all divs ... and when click on search then want to display container
<script type="text/javascript">
$(function () {
var currentYear = (new Date).getFullYear();
var currentMonth = (new Date).getMonth();
var currentDay = (new Date).getDate();
$('#fromdate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
//minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: new Date(currentYear, currentMonth, currentDay),
//maxDate: new Date((currentYear + 1), 12, 1),
onSelect: function (selectedDate) {
// Start Date
var startDate = $(this).datepicker('getDate');
//startDate.SetHours(0);
//startDate.setMinutes(0);
//startDate.setSeconds(0);
$('#todate').datepicker('option', 'minDate', startDate);
$('#todate').datepicker('setDate', startDate);
// End Date
var enddate = $(this).datepicker('getDate');
enddate.setDate(enddate.getDate() + 60);
// endDate.setMonth(endDate.getMonth() + 2);
$('#todate').datetimepicker('option', 'maxDate', enddate);
}
});
$('#todate').datepicker({
showSecond: false,
timeFormat: 'HH:mm',
minDate: new Date((currentYear - 2), 12, 1),
minDate: 0,
dateFormat: 'yy-mm-dd',
maxDate: '+30',
//maxDate: endDate.setMonth(endDate.getMonth() + 2)
});
$('#fromdate').on('click', function () {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
});
$("#todate").datepicker({
onSelect: function (dateText) {
$("#tabledata").hide();
$('#container').hide();
$("#cont").hide();
$("#sumdata").hide();
$("#sum").hide();
}
});
});
</script>
Use the onselect option to execute any JavaScript transformations
e.g.:
$(".datepicker").datepicker({
onSelect: function(dateText) {
// hide your divs
$('.mydivs').hide();
}
});
http://api.jqueryui.com/datepicker/#option-onSelect
working fiddle:
https://jsfiddle.net/7dy0wduc/
Related
I want minDate and maxDate to get set dynamically everytime on selecting the new date
$("#dtpik1").datepicker({
minDate: "-3M",
maxDate: '0D',
dateFormat: "dd/mm/yy",
onSelect: function(selected, date, value) {
var d = new Date()
var d1 = d.getDate()
var date2 = $("#dtpik1").datepicker("getDate")
date2.setDate(date2.getDate() + 30)
var date3 = $("#dtpik1").datepicker("getDate")
if (d > date2) {
$('#dtpik2').datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: '-4M' && date3,
maxDate: date2
});
$('#dtpik2').datepicker('setDate', date2);
} else {
$('#dtpik2').datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true,
minDate: '-4M' && date3,
maxDate: d
});
$('#dtpik2').datepicker('setDate', d);
}
},
});
I'm trying to set a date for date-picker on selecting date from first date-picker, and want to show an alert message if user selected another date. I'm not able to do that.
Here is my code:
$('#ELEdatepicker1').datepicker({
autoclose: true,
endDate: new Date(),
todayHighlight: true,
}).change(function(){
getELEdifference($(this),$('#ELEdatepicker2'));
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
startDate: new Date(),
todayHighlight: true,
}).change(function(){
getELEdifference($('#ELEdatepicker1'),$(this));
alert('Are you sure ?');
});
function getELEdifference($this1,$this2)
{
if($this1.datepicker("getDate") != null && $this2.datepicker("getDate") != null)
{
var ELEcertDiff= $this1.datepicker("getDate") - $this2.datepicker("getDate");
var result = ELEcertDiff / (1000 * 60 * 60 * 24) * -1;
//$("#ELEcertDiff").text(result);
document.getElementById("ELEcertDiff").value = result;
}
}
How can I show a date (suppose one year latter) in second date-picker ? And if user select before or after one year, it will show alert message on date selection.
UPDATE:
Is it possible to pass a parameter to set a difference for second date picker?
For Ex.
In above picture If I select a date from Issue Date-picker and from duration drop-down list box select a value (Ex. 3), then in Expiry Date-picker shows date after 3 years from selected date.
I've referred some questions:
Jquery UI : date picker. How to set date in date picker by $_GET
Define start date of second date picker from first date picker
I'm new to JavaScript and JQuery. Any kind of help is welcome. Thanks in advance.
plz add and check this code:
$('#ELEdatepicker1').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
var d = new Date(selectedDate);
var day = d.getDate();
var month = d.getMonth();
var year = d.getFullYear() + 1;
var newdate = month + "-" + day + "-" + year;
$( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
$("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
Check this answer
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="text" id="ELEdatepicker1">
<input type="text" id="ELEdatepicker2">
<!-- <input type="text" id="ELEcertDiff"> -->
<script>
$('#ELEdatepicker1').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
var d = new Date(selectedDate);
var year = d.getFullYear() + 1;
var month = d.getMonth();
var day = d.getDate();
var newdate = year + "-" + month + "-" + day;
$( "#ELEdatepicker2" ).datepicker( "option", "minDate", newdate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
$('#ELEdatepicker2').datepicker({
autoclose: true,
todayHighlight: true,
dateFormat:'dd-mm-yy',
onClose: function( selectedDate ) {
$("#ELEdatepicker2" ).datepicker( "option", "maxDate", selectedDate );
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
}
});
</script>
I am creating one control for date range. which have below requirements.
Form and To should be till yesterday no future dates [able to achive]
Restrict maximum 3 months of different.
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
console.log(selectedDate);
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
//$("#to-datepicker").datepicker("option", "maxDate", selectedDate);
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
}
});
Here is JSfiddle
Here is the result:
$(function() {
$("#from-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'TO' minDate
$("#to-datepicker").datepicker("option", "minDate", selectedDate);
// Set 'TO' maxDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() + 3);
if(dt < Date.now()) {
$("#to-datepicker").datepicker("option", "maxDate", dt);
}
}
});
$("#to-datepicker").datepicker({
dateFormat: "dd-M-yy",
maxDate: "-1d",
onClose: function (selectedDate) {
// Set 'FROM' maxDate
$("#from-datepicker").datepicker("option", "maxDate", selectedDate);
// Set 'FROM' minDate at 3 months if before yesterday
var dt = new Date($(this).datepicker("getDate"));
dt.setMonth(dt.getMonth() - 3);
if(dt < Date.now()) {
$("#from-datepicker").datepicker("option", "minDate", dt);
}
}
});
});
Working jsfiddle: http://jsfiddle.net/382z6ev5/
(Sorry, I got a problem with your jsbin)
hae, am working with $(document).on('click','',function(){}); but its not working as i want
below is my code:
<script type="text/javascript">
$(function () {
$(document).on('click', '.date-picker', function () {
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
});
</script>
table_html = '<td style="min-width: 200px;"><input name="' + control_id + '" id="' + control_id + '" value="' + row_val + '" type="date" data-role="datebox" data-options=\'{"mode": "calbox", "useClearButton": true}\' ></td>';
$('#variables').append(table_html);
The above code creates a month year picker. It works fine.
But when I click for the 1st time, the month picker control does nothing. When I clicked outside it and click on it again, it worked.
Any idea or suggestions on how the click event will be detected on 1st time click will be highly appreciated
Try show()
$(function () {
$(document).on('click', '.date-picker', function () {
var datepicker = $(this).data('uidatepicker');
if(datepicker) return;
$(this).datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
}).datepicker('show');
});
});
Demo: Fiddle
This question already has answers here:
Jquery datepicker restrict dates in second date field based on selected date in first date field
(3 answers)
Closed 9 years ago.
In the "From" field, the user selects one date and in the "To" field, the date should not be less than "From" field date.
How can I achieve this?
<script type="text/javascript">
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
changeMonth:false,
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});
</script>
Here is my code (so far) in action: http://jsfiddle.net/Mounika_Garrepalli/8z2UH/
You can compare the dates by passing them to a function
var dt1_temp = date1.split("-");
var ctdt1 = new Date(dt1_temp[2],dt1_temp[1],dt1_temp[0]); // Y/m/d format
var dt2_temp = date2.split("-");
var ctdt2 = new Date(dt2_temp[2],dt2_temp[1],dt2_temp[0]);
Now we can compare the dates
if(ctdt1>ctdt2) {
alert("To date should not be equal or before the from date");
}
Here's the FIDDLE
$(document).ready(function () {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function (selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
$('#datepicker').change(function () {
checkDate($(this), $('#datepicker1'));
});
$('#datepicker1').change(function () {
checkDate($('#datepicker'), $(this));
});
});
function checkDate(date1, date2) {
if (date1.val() > date2.val()) {
alert('Error');
date2.val(date1.val());
}
}
You can use the minDate option:
$("#datepicker1").datepicker({
yearRange: "-0:+0",
//Set the initial minDate
minDate: $("#datepicker").datepicker("getDate"),
dateFormat: "dd - M - yy"
});
And then react:
$("#datepicker").on("change", function() {
$("#datepicker1").datepicker("option", "minDate", $(this).datepicker("getDate"));
});
http://jsfiddle.net/8z2UH/5/
Once try this
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onClose: function(selectedDate) {
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker").change(function() {
datepicker1_mindate = $(this).datepicker('getDate');
datepicker1_mindate = new Date(datepicker1_mindate.getTime());
$("#datepicker1").datepicker("option", "minDate", datepicker1_mindate);
});
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy",
});
});
Try this:
$(document).ready(function() {
$('.ui-datepicker-prev ui-corner-all').hide();
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-0:c+10",
dateFormat: "dd - M - yy",
onSelect: function(selectedDate) {
$("#datepicker1").datepicker("option", "minDate", selectedDate);
$('#datepicker1').datepicker("setDate", selectedDate);
}
});
$('#datepicker').datepicker("setDate", new Date());
$("#datepicker1").datepicker({
yearRange: "-0:+0",
dateFormat: "dd - M - yy"
});
});