I used this snippet to display dates using datepicker:
$(document).ready(function(){
$("#txtFrom").datepicker({
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() + 1);
$("#txtTo").datepicker("option", "minDate", dt);
}
});
$("#txtTo").datepicker({
numberOfMonths: 1,
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate() - 1);
$("#txtFrom").datepicker("option", "maxDate", dt);
}
});
$('#txtFrom').on("click", function(){
alert($(this).getDate());
});
});
Now I wanna be able to store each date in a variable and display and alert after choosing and clicking in the input submit button.
Please help
Note: In the snippet I actually tried but it didn't work.
Hope you can help from the entire code here
You can try on button click event:
$('#txtFrom').on("click", function(){
alert($("#txtFrom").val());
alert($("#txtTo").val());
});
If you want as a Date Object use:
$('#txtFrom').datepicker( 'getDate' )
Related
I am new to jQuery and JSP. I am trying to make a booking system which has two dates - start date and end date. I require the following functionalities to be included in the system.
Start date should be less than end date and end date should be more than start date.
Booking should be allowed only on weekdays.
Format of date should be dd-mm-yy.
I was able to achieve all these functionalities individually but when I merge them either of them does not work.
Here is the jQuery code for start date should be less than end date and end date should be more than start date.
<script>
$(document).ready(function () {
$("#datepick").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#datepick1").datepicker("option", "minDate", dt);
}
});
$("#datepick1").datepicker({
onSelect: function (selected) {
var dt = new Date(selected);
dt.setDate(dt.getDate());
$("#datepick").datepicker("option", "maxDate", dt);
}
});
});
</script>
And this is the jQuery code for disabling weekends and changing the date format.
<script>
$(document).ready(function () {
$("#datepick").datepicker({
dateFormat: "dd-mm-yy",
beforeShowDay: $.datepicker.noWeekends
});
$("#datepick1").datepicker({
dateFormat: "dd-mm-yy",
beforeShowDay: $.datepicker.noWeekends
});
});
</script>
I tried combining these two but either one of the functionality does not work.
Thank you in advance!!!
You can easily achieve that with just a bit of CSS:
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
pointer-events: none;
opacity: 0.5;
}
This will target datepicker CSS class weekends and set it to not clickable and opacity same as you would using datepicker JS.
And to get around date format not working use this:
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
datepicker excepts 2015-03-25 and outputs this kind of format in selected:
2015-03-25T12:00:00-06:30
so when you set your date format it does not produce it right in . So you split your format, and rearrange it in your case from: 22-07-2020 to 2020-07-22 then datepicker new date function starts working again.
So now you can use your date range function as before just with added dateFormat: "dd-mm-yy", and code above. Example:
$(document).ready(function() {
$("#datepick").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(selected) {
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
var dt = new Date(newdate);
dt.setDate(dt.getDate());
$("#datepick1").datepicker("option", "minDate", dt);
}
});
$("#datepick1").datepicker({
dateFormat: "dd-mm-yy",
onSelect: function(selected) {
var res = selected.split("-");
var newdate = [];
newdate.push(res[2],res[1],res[0] );
var dt = new Date(newdate);
dt.setDate(dt.getDate());
$("#datepick").datepicker("option", "maxDate", dt);
}
});
});
th.ui-datepicker-week-end,
td.ui-datepicker-week-end {
pointer-events: none;
opacity: 0.5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<input type="text" id="datepick" name="date"><input type="text" id="datepick1" name="date">
In my app I have a form with 3 datepicker objects; from, to, and apply_to. I tried in JavaScript to set the control input to and apply_to
$("#from").datepicker({
dateFormat: 'dd.mm.yy',
onSelect: function(selected) {
$("#to").datepicker("option","minDate", selected);
$("#apply_to").datepicker("option","maxDate", selected)
}
});
But I need to set maxDate in apply_to to the selected date minus one.
$("#apply_to").datepicker("option","maxDate", selected-1d)
But my code is not working.
In your onSelect, the selected parameter is a string so you must first convert it to a javascript date object, then subtract one day using setDate / getDate, and finally update the corresponding datepicker maxDate option
onSelect: (selected) => {
var pieces = selected.split('.');
var dt = new Date(pieces[2], parseInt(pieces[1])-1, pieces[0]);
dt.setDate(dt.getDate() - 1);
$("#to" ).datepicker( "option", "maxDate", dt);
}
How I can change the end date when the user selects the start time? I want to disable the days before the start time. It's homework, but I am new to jquery.
Thanks. Here is the code i managed to work, but i don't know what to change.
<script>
$(document).ready(function() {
$('#start').val(moment(start).format('YYYY-MM-DD'));
$('#end').val(moment().add(+1, 'days').format('YYYY-MM-DD'));
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#checkAllEdit").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#start, #end").datepicker('setDate', new Date());
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd'
});
});
</script>
THE WORKING VERSION:
$('body').on('focus', ".dpicker", function () {
$(this).datepicker();
});
$(function () {
$("#start").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'yy-mm-dd',
onClose: function (selectedDate, instance) {
if (selectedDate != '') {
$("#end").datepicker("option", "minDate", selectedDate);
var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
date.setMonth(date.getMonth() + 3);
var minDate2 = new Date(selectedDate);
minDate2.setDate(minDate2.getDate() + 1);
$("#end").datepicker("option", "minDate", minDate2);
$("#end").datepicker("option", "maxDate", date);
}
}
});
$("#end").datepicker({
minDate: 1,
changeMonth: true,
dateFormat: 'yy-mm-dd',
onClose: function (selectedDate) {
$("#star").datepicker("option", "maxDate", selectedDate);
}
});
});
you can try to add minDate: 0 to set min date today
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
minDate: 0 /* This will be today */
});
If you want to add minDate to some other day you can just use
new Date(2007, 1 - 1, 1) for example
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
minDate: new Date(2007, 1 - 1, 1)
});
EDIT to answer comment:
If you want to set end date, then you can use setDate
$("#start, #end").datepicker({
dateFormat: 'yy-mm-dd',
setDate: new Date(2016,10,03)
});
And it seems like you want end date to be 1 day after start date, then take start date value
var startDate = $('#start').datepicker('getDate') + 1; /* Get start date and add one day */
$('#end').datepicker({
dateFormat: 'yy-mm-dd',
setDate: startDate
});
For further reading: https://api.jqueryui.com/datepicker/#option-minDate
Using Asp.Net MVC 4 with JqueryUI.
I have 2 textboxes which provide me datepickers. I need validation for; start date can be equal to finish date and finish date can not be less from start date.
Datepicker script code;
<script>
$(function () {
$(".date").datepicker({
changeMonth: true,
changeYear: true
});
});
</script>
My textboxes:
<td>#Html.TextBoxFor(model => model.StartDate, "{0:dd.MM.yyyy}", new { #class = "date", #id="dt1" }) </td>
<td>#Html.TextBoxFor(model => model.FinishDate, "{0:dd.MM.yyyy}", new { #class = "date", #id="dt2" }) </td>
I found this code from this subject. But i can't get validation. I cant figure out what's the problem. All helps will be appreciated.
$(document).ready(function () {
$("#dt1").datepicker({
dateFormat: "dd-M-yy",
minDate: 0,
onSelect: function (date) {
var dt2 = $('#dt2');
var startDate = $(this).datepicker('getDate');
var minDate = $(this).datepicker('getDate');
dt2.datepicker('setDate', minDate);
startDate.setDate(startDate.getDate() + 30);
//sets dt2 maxDate to the last day of 30 days window
dt2.datepicker('option', 'maxDate', startDate);
dt2.datepicker('option', 'minDate', minDate);
$(this).datepicker('option', 'minDate', minDate);
}
});
$('#dt2').datepicker({
dateFormat: "dd-M-yy"
});
});
JQuery - end date less than start date
I think this may helps you, when you changes one of the datepickers will show an error if both are different. and also se the isValid variable to false too stop it from being able to submit
<script>
var isValid=true;
$(function () {
$(".date").datepicker({
changeMonth: true,
changeYear: true,
onSelect: function() {
var date1 = $("#dt1").datepicker('getDate');
var date2 = $("#dt2").datepicker('getDate');
if (date1.getDate() === date2.getDate() &&
date1.getMonth() === date2.getMonth() &&
date1.getFullYear() === date2.getFullYear())
{
isValid=false;
//ALERT error
}
}
});
});
</script>
I have a question, quite similar to the one at: year/month only datepicker inline
The difference is that I am using the input version, rather than the div.
In the div case, the ui-datepicker-calendar is inside the outer div, and so can be accessed uniquely.
But with the input, there is no relation between the input and the ui-datepicker-calendar (or, not that I've found...)
Just to be clear, I cannot use the "global" .ui-datepicker-calendar { display: none;}, as I have other datepicker that is a full one (i.e., uses the days as well).
My code looks as follows:
$("#monthsYearInput").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: "mm/yy",
onClose: function(dateText) {
if (dateText != "") {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
beforeShow: function() {
var dateText = $(this).val();
var isPopulated = dateText.length > 0;
if (isPopulated) {
var selectedDate = $.datepicker.parseDate("dd/mm/yy", "01/" + dateText);
$(this).datepicker("option", "defaultDate", selectedDate);
$(this).datepicker("setDate", selectedDate);
$(this).datepicker("refresh");
}
},
onChangeMonthYear: function(year, month) {
if (changingDate) {
return;
}
changingDate = true;
$(this).datepicker("setDate", new Date(year, month - 1, 1));
$(this).datepicker("refresh");
changingDate = false;
}
});
$("#monthsYearInput").focus(function () {
$(".ui-datepicker-calendar").hide();
};
$("#monthsYearInput").blur(function () {
$(".ui-datepicker-calendar").hide();
};
It all looks OK as start, but then when the year/month has changed, the new date is populated in the input (desired), but now the calendar displays (not desired).
Any ideas on how to solve this issue?...
Thanks in advance.
JSfiddle: http://jsfiddle.net/OhadRaz/8z9M2/
I think that you could still do it with a css like in the solution that you've linked but targeting only that one datepicker
#monthsYearInput .ui-datepicker-calendar { display: none;}
Can you put your code on JSFiddle so we can see what it is doing? I may have done something familiar at Jquery Datepicket Supress Year, but can't tell without a JSFiddle demo...
OK,
I came up with some sort of a solution:
var superUpdateDatepicker = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
var ret = superUpdateDatepicker.apply(this, arguments);
if (inst.id == "monthsYearInput") {
$(".ui-datepicker-calendar").hide();
}
return ret;
}
While working, I am not happy with it.
It is too hacky, it is not clean, and I just don't like it.
Any better ideas?...