The problem is while user selecting input date field then display only month and year not date.
i had tried mm/yy in my jquery but didn't worked for me.
here is my code.
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') { //Start date selected - update End Date picker
$("#End").datepicker('option', 'minDate', selectedDate);
} else { //End date selected - update Start Date picker
$("#Start").datepicker('option', 'maxDate', selectedDate);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
dateFormat: "dd/mm/yy",
onSelect: onDateSelect
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>
I'm choose first date field it also should display month and year & second field do as same as first field except don't display previous date accordingly first date so it is working finely except displaying month & year
Not a perfect solution, but you can use <input type="month">.
Example
<label for="start">Start month:</label>
<input type="month" id="start" name="start"
min="2020-08" value="2020-10">
Result
You can get use mm/yy to display only month and year ,also to you need to get date manually and then set in your datepicker. i.e :
var onDateSelect = function(selectedDate, input) {
if (input.id === 'Start') {
//getting start date
var start = $('#Start').datepicker("getDate");
console.log("start - "+start);
//setting it has mindate
$("#End").datepicker('option', 'minDate', start);
} else if(input.id === 'End'){
//getting end date
var end = $('#End').datepicker("getDate");
console.log("end - "+end);
//passing it max date in start
$("#Start").datepicker('option', 'maxDate', end);
}
};
var onDocumentReady = function() {
var datepickerConfiguration = {
onSelect: onDateSelect,
dateFormat: "mm/yy",
};
///--- Component Binding ---///
$('#Start, #End').datepicker(datepickerConfiguration);
};
$(onDocumentReady); // jQuery DOM ready callback registration
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<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="Start" name="start" min="2000-03" required>
<input type="text" id="End" name="start" min="2000-03" required>
Related
I have an input field text which is readonly. I'm using it to display the year quarter. I have another input field which is a start date. I'm using jQuery datepicker for choosing the date.
My problem is that the quarter input field value Q1 then if I choose a start date outside of Q1 I need to display a message below it saying:
The selected start date is not within the quarter
How can I do that?
var datePickerOptions = {
dateFormat: 'dd-M-yy',
changeMonth: true,
changeYear: true
}
/* Initialise the date picker */
if (!$.datepicker.initialized) {
$(document).mousedown($.datepicker._checkExternalClick)
.find(document.body).append($.datepicker.dpDiv);
$.datepicker.initialized = true;
}
$(function() {
$("#startdate").datepicker(datePickerOptions);
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<p>Quartor: <input type="text" id="quartor" readonly value="Q1"></p>
<p>Start Date: <input type="text" id="startdate" placeholder="DD-MMM-YYYY"></p>
To achieve this you can hook to the onSelect() method of the datepicker. There you can execute code which uses a simple calculation to determine the quarter of year from the selected date, and compare it to the value entered by the user, something like this:
let getQuarter = d => Math.ceil((d.getMonth() + 1) / 3);
let datePickerOptions = {
dateFormat: 'dd-M-yy',
changeMonth: true,
changeYear: true,
onSelect: dateValue => {
let date = new Date(dateValue);
let dateQtr = 'Q' + getQuarter(date);
let userQtr = $('#quartor').val().trim();
$('.qtr-warning').toggle(dateQtr != userQtr);
}
}
jQuery($ => {
$("#startdate").datepicker(datePickerOptions);
});
.qtr-warning {
color: #C00;
display: none;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.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>
<p>Quartor: <input type="text" id="quartor" readonly value="Q1"></p>
<p>Start Date: <input type="text" id="startdate" placeholder="DD-MMM-YYYY"></p>
<span class="qtr-warning">The selected start date is not within the quarter</span>
Note that you may wish to make the comparison more robust by making it case-insensitive, or ignoring the Q string.
This question already has answers here:
jQuery DatePicker with today as maxDate
(5 answers)
Closed 3 years ago.
I'm developing application in iWorkflow platform. It is an object oriented platform. I have DatePicker control for Field named Select Date :.
I want to disable the future dates using javascript for type=DatePicker. But my codes isn't working.
I tried this by adding maxDate:0. But I think $("#ctrl_DatePicker_e0leq").DatePicker works for Input type=Text not DatePicker.
$("#ctrl_DatePicker_e0leq").DatePicker({
maxDate: 0
});
I'm expecting correct script to disable dates greater than the current date.
You can use this approach:
$(document).ready(function () {
var today = new Date();
$('.datepicker').datepicker({
format: 'mm-dd-yyyy',
autoclose:true,
endDate: "today",
maxDate: today
}).on('changeDate', function (ev) {
$(this).datepicker('hide');
});
$('.datepicker').keyup(function () {
if (this.value.match(/[^0-9]/g)) {
this.value = this.value.replace(/[^0-9^-]/g, '');
}
});
});
And:
<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>
<p>Select Date: <input type="text" class="datepicker"></p>
For more Details you can use this link:
$(document).ready(function() {
$("#datepicker").datepicker({
minDate: 0
});
});
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script language="javascript">
$(document).ready(function() {
$("#datepicker").datepicker({
minDate: 0
});
});
</script>
</head>
<body>
Date :
<div id="datepicker"></div>
</body>
</html>
When an existing entry for a process phase has a time like 13:53, opening the datetimepicker sets the time automatically to 13:00, so I could by accident change the time without realizing, just by opening the datetimepicker
Without open datetimepicker
With open datetimepicker
problem with datetimepicker
function createDateTimePicker(id, timePicker, lang) {
var displayTimepicker = (timePicker == true ||timePicker == 'true') ;
var dateTimePicker = $(id).datetimepicker({
showTimepicker : displayTimepicker,
controlType: 'select',
oneLine: true,
dateFormat: 'dd.mm.yy',
timeFormat: 'HH:mm',
stepMinute: 5,
showOn: 'both',
buttonImage: '/assets/images/calendar.png',
buttonImageOnly: true
});
return dateTimePicker;
}
Is there a way or solution to have the same time as the textfield or the closest time within 5 minutes of the text field time in the datetimepicker?
$(function() {
$('#basic_example_1').datetimepicker();
});
var setDateTime = function() {
$('#basic_example_1').datetimepicker('setDate', (new Date()));
}
var clearDateTime = function() {
$('#basic_example_1').val('');
}
<head>
<link rel="stylesheet" media="all" type="text/css" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" media="all" type="text/css" href="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.css" />
</head>
<body>
<p>Add a simple datetimepicker to jQuery UI's datepicker</p>
<div style="display:inline">
<input type="text" name="basic_example_1" id="basic_example_1" value="" />
<button onclick="clearDateTime()">clear</button>
<button onclick="setDateTime()">now</button>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://trentrichardson.com/examples/timepicker/jquery-ui-timepicker-addon.js"></script>
</body>
</html>
I have used jQuery datetimepicker plugin, hope it helps you!!!
I'm using jquery datetimepicker & i have two controls:
From
To
I want get after three month date in To control as per selected date in From control.
What U tried:-
$(function () {
$('.datePicker').datetimepicker({
});
$('body').on('blur', '.pcFrom', function () {
var fromDate = $(this).val();
$('.pcTo').val(fromDate);
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<label>From</label>
<input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control pcTo">
</div>
You will need to convert the value from the datepicker to Date() and then use .setMonth() by adding the desired number of month. Then you will need to re-format it again on the output field.
$('.datePicker').datetimepicker();
$(document).on('blur', '.pcFrom', function() {
var fromDate = new Date($(this).val());
var after3Months = fromDate.setMonth(fromDate.getMonth()+3);
$('.pcTo').val("" + (fromDate.getMonth()+1) + "-" + fromDate.getDate() + "-" + fromDate.getFullYear());
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/eonasdan-bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="form-group">
<label>From</label>
<input type="text" class="form-control datePicker pcFrom" data-date-format="MM-DD-YYYY">
</div>
<div class="form-group">
<label>To</label>
<input type="text" class="form-control pcTo">
</div>
I am trying to auto populate the "end_date" field based on the number of days the user enters in the "days" field. For example, user enters 2 in days field. User then proceeds to select a start date of 04/27/2016. The end date should be filled with 04/29/2016. I am not very familiar with javascript and I have spent hours searching but no answer so far. Any help would be appreciated.
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
</html>
<input id='days' class='days' type='text'/>
<input id='start_date' class='start_date' type='text'/>
<input id='end_date' class='end_date' type='text'/>
<script>
$(function() {
$(".days").val();
$(".end_date").datepicker();
$(".start_date").datepicker({
onSelect:function(){
var x = $(".days").val();
var toDate = $(this).datepicker('getDate');
toDate.setDate(toDate.getDate() + x)
$(".end_date").datepicker("setDate", toDate);
}
});
});
</script>
I kept trying a few things and was able to figure out a way to make this code work. This might not be the best way to do this but it works for what I am trying to do. I changed this line of code from toDate.setDate(toDate.getDate() + x) to toDate.setDate(toDate.getDate() + (x / 1)).
<html>
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
</html>
<input id='days' class='days' type='text'/>
<input id='start_date' class='start_date' type='text'/>
<input id='end_date' class='end_date' type='text'/>
<script>
$(function() {
$(".on_site_days").val();
$(".audit_end_date").datepicker();
$(".audit_start_date").datepicker({
onSelect:function(){
dateFormat : 'dd-mm-yy'
var x = $(".on_site_days").val();
var toDate = $(this).datepicker('getDate');
toDate.setDate(toDate.getDate() + (x / 1))
$(".audit_end_date").datepicker("setDate", toDate);
}
});
});
</script>