I have an online form and I want to hide/display specific fields based on the date the user selects in a datepicker field. However, the date they select must fall within a specific date range in order for the additional fields to be shown/hidden.
Right now, this is the only code I have (I am not jQuery writer)
jQuery(document).ready(function ($) {
$("#dpick").datepicker("getDate");
var monthsWithExams;
monthsWithExams = $("#dpick").datepicker("getDate");
if monthsWithExams - THIS IS WHAT I NEED HELP FIGURING OUT
});
#dpick is the id of my datepicker field. Once they select a date, I want the code to check whether the selected date is inside a specific date range - for example, if they pick any day in December, then I want the form field with id tours to be hidden. I think I can write the if...else part, I just don't know how to check if date is inside date range.
I am not a jQuery expert so please try to explain it to me so that I can understand! Thanks for any help! :)
You can set the range by giving the minDate(starting date) and maxDate(Ending date)
//This will only allow 30 days from now range
$(function() {
$("#txtFiled").datepicker({
minDate: 'today',
maxDate: "+30D"
});
});
The datepicker has an "onClose" which can take the chosen date and check it against other dates.
$( "#dpick" ).datepicker({
onClose: function ( selectedDate ) {
var date = selectedDate ;
// if date is between x and y hide element A
}
});
Related
I have 2 text boxes namely fromDate & toDate for date search , in which by default, current day will be showed.
working code:
Jquery
(document).ready(function () {
$('.dateClass').datetimepicker({timepicker: false}); // css for displaying date without time
$('#fromDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
$('#toDateId').datetimepicker({value: '01-01-2016', format: 'd-M-Y'}); // display current date with dd-mmm-yyyy
});
Struts
<html:text property="fromDate" styleId="fromDateId" styleClass="dateClass" />
<html:text property="toDate" styleId="toDateId" styleClass="dateClass" />
Issue:
By default current day shown in both textboxes, suppose user choose different dates and submit,
db records are fetched and displayed but these 2 texboxes replaced with current dates how to avoid this.
kindly help me to resolve.
Update: There are reports this no longer works in Chrome.
This is concise and does the job:
$(".fromDateId").datepicker('setDate', new Date());
And another thing,
$(function()
{
$('.date-pick').datePicker().val(new Date().asString()).trigger('change');
});
Is there a simple way to update a jQuery Datepicker when a button is clicked? The datepicker is displayed inline, and I would like it to always be visible.
The logic flow behind this is that the user would check off certain dates and click the 'Done' button, which would update the datepicker to restrick the dates they selected.
The code below just creates the datepicker when the program opens. Should I just create a new datepicker with the restricted dates every time the user clicks the 'Done' button?
$( "#calenderDiv" ).datepicker({
minDate: 0,
onSelect: function(dateText, obj){
$('#A12').val(dateText);
},
beforeShowDay: function(date) {
var day = date.getDay();
return [(day == 0)];
}
});
The jQueryUI documentation states that
By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.
Is your #calenderDiv indeed a div or a span?
Edit
Save the selected date in a variable, and inside beforeShowDay you check if the date in the calender that is currently being added has the same weekday as the selected day.
You would then end up with the following code:
var curDate;
$("#calenderDiv").datepicker({
minDate:0,
onSelect:function(dateText, obj) {
$("#A12").val(dateText);
curDate = new Date($(this).val());
$(this).datepicker("refresh");
},
beforeShowDay:function(date){
return [(typeof curDate === 'undefined' || day != curDate.getDay())];
}
});
Alternatively, if you want to have multiple days crossed out, use an array instead, push the selected weekdays onto it and later check inside beforeShowDay if the date is in the array.
I have the following..
# Html.EditorFor ( model = > model.Date )
A template editor also works in the DateTime type
Clicking on this entry, a calendar is displayed , you select a calendar date , and that date
is the new value of my post. What I need is to validate that the date you select is equal or greater than today.
I tried the onchange event for the EditorFor , but it did not work , Jquery DatePicker property has a MinDate
but added that would mean modifying the operation of all entries with the DateTime data type .
jQuery Datepicker has onSelect function which will give you the chosen date that is displayed in date input box! Here is a fiddle http://jsfiddle.net/aa74R/66/
onSelect: function(dateText, inst) {
var date = $(this).datepicker('getDate');
alert(date);
}
The Question is a bit vague, however I think this should help.
It looks like what you want to do is change the date, based on after you've selected a newDate. onChange should work. As far as why it isn't, it could be a matter of code.
If it's a matter of how you've written your code:
$('#inputId').on('change', function(){
var newDate = $(this).val();
});
I personally think this might be an easier approach for some, however inefficient as it persistently sets the date every time you leave the field:
$('#inputId').on('blur', function(){
var newDate = $(this).val();
});
There are also many other ways to write it. But I feel like this might have the proper level for you.
Question doesn't seem to have a context with the absence of code.
Since you have tagged jQuery a possible problem might be you are binding the onchange event to the textbox. If this textbox were to be dynamically generated, the onchange event would never be registered. If this is your problem then you could do this-
$("body").on("change", "#textBoxId", function(){
alert($(this).val());
});
I am using below date-picker plugin for angularjs which is made from pickadate.js
https://github.com/alongubkin/angular-datepicker
I am using this plugin twice on the page. Plugin have very good option max date and min date which will help us select between those date.
Example options
$scope.depOptions = {
format: 'dd/mm/yyyy',
min: minDate,
max: maxDate,
onClose: function(){
$scope.arrOptions.min = $scope.depDate;
}
}
Now I want to make min date starting from selected. I tried $watch and also tried to onClose method provided by plugin but I could not do it. Kindly somebody help me.
http://plnkr.co/edit/QBFwqyUIJxtw1dltMDky?p=preview
It seems that the element's configuration once initialized cannot be changed. Try putting the arrival input in ngIf, so that it is always rendered anew when departure changes.
What I Have
In jquery.ui.datepicker I have changed the value minDate to +1 so todays date or any historical date cannot be selected.
All good so far.....However.....
What I Want
I want to stop anyone selecting tomorrows date after 8pm today, so, after 8pm tomorrows date should no longer be available for selection.
I cannot see an option to do this in the default values or any of the examples on the datePicker website.
What is the best or easiest way I can achieve this?
Thanks in advance of a hopefully good suggestion
Since, jQuery DatePicker hasn't yet provided the functionality to support time(i guess) we need to do this in manual way.
You can use beforeShow options of jQuery DatePicker; which is called upon the datePicker UI display every time you click on DatePicker input field.
So, Inside beforeShow you can calculate the current time and manipulate the minDate as required ,
beforeShow : function(){
var dateTime = new Date();
var hour = dateTime.getHours();
//If Hour is greater or equals to 8PM
if(hour >= 20){
//Disable all past days including tomorrow and today
$(this).datepicker( "option", "minDate", "+2" );
}
}
Here is the working demo.
P.S
I haven't tried this yet but you should look into this
DateTimePicker plugin
if you want a more subtle approach