I'm needing some guidance with a little jQuery's datepicker problem, surely its some detail i'm overseeing.
I'm trying to set some minimum dates for two datepickers; I fetch via ajax a message containing a description, a start date, and an end date, and show those values on a form. For start/end dates, I have jQuery datepickers, and for start date I always set the mininum date as today, which usually overwrites the fetched value. On the other hand, for end date, I want to set the minimum date as whatever is selected on the other datepicker (so you can't cross dates and set an end date lower than start date)
I try to set the EndDate.datepicker minDate as soon as I bind the datepicker, and again after eventually setting a value for StartDate, but it still isn't working on EndDate (it doesn't limit any date, much less update the limit when I change the StartDate)
This's the code I have:
StartDate.datepicker({ minDate: -0 });
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
//Initial Behavior - when loading, show last landing message
$.ajax({
...
success: function (data) {
var fetchedStartDttm = ParseJsonDate(data.GetMessageResult.StartDttm);
var fetchedEndDttm = ParseJsonDate(data.GetMessageResult.EndDttm);
var today = new Date();
if (today <= fetchedEndDttm) {
//Message still in valid period
Message.val(data.GetMessageResult.MessageDesc);
StartDate.datepicker("setDate", fetchedStartDttm);
EndDate.datepicker("setDate", fetchedEndDttm);
} else {
//Last message already expired
Message.val("Text to be displayed (DELETE THIS REMINDER)");
StartDate.datepicker("setDate", today);
EndDate.datepicker("setDate", today);
}
//minimum enddate should be at least the startDate
EndDate.datepicker({ minDate: StartDate.datepicker("getDate") });
}
});
I'd deeply appreciate any help!
-ccjmk
I found similar questions and they have working solutions (at least for me)
Explaned here:How do I set Min Date in Datepicker from another Datepicker?
and here: Restrict date in jquery datepicker based on another datepicker or textbox
Related
I have some data comprising startdate and enddate.
When I edit that data, I want to only allow future dates in enddate datepicker, but that has to be one day greater than the startdate.
For Example: If startdate = 01/05/2020, then I want enddate to be 01/06/2020 or greater than that in datepicker.
I tried that with a function naming getNextDayToStartDate() but I know I am doing something wrong.
Thanks.
Please see the code here: https://stackblitz.com/edit/angular-dtnlyc
onEditData(data): void {
var newdate = this.getNextDayToStartDate(data.startDate);
this.editData = {
Name: data.Name,
startDate: this.getDate(data.startDate),
endDate: newdate
}
this.editDataDialog = true;
}
Your function to add a day returns a value, yet you continue with the original value. Capturing the returnvalue and using that, solves the issue.
Small sidenote: momentjs is a rather usefull thing for working with dates :) Might want to look in to that ;)
Add editData.startDate to you method call in your html, that will fix it!
<input type="date" [min]="getNextDayToStartDate(editData.startDate)" [(ngModel)]="editData.endDate">
I have input type="date" in my html page and I want to disable particular date through JavaScript. How can I do that?
I have tried to disable using getElementById but its disabling complete date input.
You can add a min or max attribute to the input type=date. The date must be in ISO format (yyyy-mm-dd). This is supported in many mobile browsers and current versions of Chrome, although users can manually enter an invalid date without using the datepicker.
<input name="somedate" type="date" min="2017-11-25">
The min and max attributes must be a full date; there's no way to specify "today" or "+0". To do that, you'll need to use JavaScript or a server-side language:
var today = new Date().toISOString().split('T')[0];
document.getElementsByName("somedate")[0].setAttribute('min', today);
What we can’t do yet, however, is eliminate classes of days from our input. We can’t, for example, prevent selection of weekends or disallow Mondays purely through markup. Instead, we’ll need to do a little more work, using the HTML5 validation API, and the native JavaScript Date object.
code that will display an error if the date selected is a Monday.
var date = document.querySelector('[type=date]');
function noMondays(e){
var day = new Date( e.target.value ).getUTCDay();
// Days in JS range from 0-6 where 0 is Sunday and 6 is Saturday
if( day == 1 ){
e.target.setCustomValidity('OH NOES! We hate Mondays! Please pick any day but Monday.');
} else {
e.target.setCustomValidity('');
}
}
date.addEventListener('input',noMondays);
You could set a maximum/minimum on your date attribute like shown over here: https://www.w3schools.com/tags/att_input_min.asp
This however does not let you disable specific dates. If you really want this I would check if the selected date is allowed on posting the form.
You could get the selected date value on a submit like this in JQuery:
$('#submit').on('click', function(){
var date = new Date($('#date-input').val());
day = date.getDate();
month = date.getMonth() + 1;
year = date.getFullYear();
//Check here if date, month and year combination is allowed
});
In this example we have a date element with id 'date-input' and a button with id 'submit'.
Note that you should also check if the date is allowed on the server side.
I am developing a site where i am using jQuery-UI datepicker, the problem is i have to select all dates and put it into an array when the user select a start date and end date using a aingle jquery UI datepicker.
i checked the jQuery-UI documentation but found nothing that solve my problem.
I want date-range to be picked up like this.
i have to use jQuery-UI, so any useful idea will be appreciated,
Thanks
you can use this method:
1.The user clicks the 2 dates
2.You save them as two variables(startDate,endDate)
3.you make a loop:
var numberOfDaysToAdd=0
var startDate;
var endDate;
var dateCheck=startDate;
var DatetoAddInArray = startDate;
var array = [];
while(DatetoAddInArray!=endDate){
//every time you check if the date is equal to the endDate
//if is not you add it in the array with the dates and then
//you increase the index.
//the while loop ends when you find the end Date
//You can change your code to add or not the start and the end dates
numberOfDaysToAdd++;
DatetoAddInArray.setDate(DatetoAddInArray.getDate()+numberOfDaysToAdd);
array[numberOfDaysToAdd-1]=DatetoAddInArray;
}
The above could be an easy way to store all the dates from the start to the end date.
(!) If the datepicker allows the user to click a startDate and then click a endDate that is before the startDate, you have to alert a message to the user to select a correct range.
Thanks.
I created datepicker like this, so no need for more answers. Thanks
Here is working Fiddle
I am using fuelux date picker and I have two date pickers on a page. Basically a start date and an end date. What I want to do is initialize both at the beginning and then when the user select a start date then restrict the end date picker to only have date starting from the start date that was selected by the user.
// Initialize datepickers
$('#startDate, #endDate').datepicker();
// When the start date changed by user
$('#startDate').on('changed.fu.datepicker dateClicked.fu.datepicker', function (evt, startDate) {
$('#endDate').datepicker('setDate', startDate);
$('#endDate').datepicker({
restricted: [{ from: '01/01/1900', to: startDate }]
});
});
Right now the set date works but restricted doesn't. Any solution?
You are trying to re-initialize the end date with different options which Fuel UX doesn't support. For your idea to work, you cannot initialize the end date until the start date is set.
Please review Destruction and re-initialization
I'm using jquery-ui datepicker on a User DOB field in a Rails 3.2 app.
I'm trying to achieve the following:
restrict the range of dates that can be selected, max = today, min = 100 years ago.
initialize the datepicker with the date currently stored in the database (if any).
display the selected date in a particular format in the dob text field.
My form looks like this:
<%= form_for #user do |f| %>
<%= f.text_field :dob, :class=>'date-selector-dob', :value => (#user.dob.blank? ? '' : #user.dob.to_s(:long)) %>
<% end %>
where .to_s(:long) is the display format I'm after.
With the following javascript the datepicker works, the text field is properly formatted, but no max/ min date is set, and no initialization with the stored date occurs.
$(function (){ // enabledate picker
$('.date-selector-dob').datepicker();
});
I added to this functions that I though would set min/max range and initialize, as follows:
$(function (){ // enable date picker
$('.date-selector-dob').datepicker({minDate: new Date('-100Y'), maxDate: new Date('-1D')}); // enable datepicker and set range
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value'))); // initialize datepicker with stored value
});
This is initializing the date picker correctly, but is not setting a min/max range. Is my approach incorrect?
In addition, the extended function resets my formatting string, and data is not displayed according to .to_s(:long). Using the basic function above, this formatting string is properly applied. What would cause this?
I'm pulling my hair out with this! I'd really appreciate it if someone can help me see whatever is it I've missed, and understand what I'm doing wrong. Thanks!
JavaScript's Date doesn't know what -100Y or -1D mean so your minDate and maxDate settings aren't going to be anything that the datepicker will understand.
From the fine manual:
minDate
Set a minimum selectable date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '-1y -1m'), or null for no limit.
So you want this:
$('.date-selector-dob').datepicker({
minDate: '-100y',
maxDate: '-1d'
});
Demo: http://jsfiddle.net/ambiguous/RQgCW/
If you want the datepicker to use a certain format for the date, use the dateFormat option:
The format for parsed and displayed dates. This attribute is one of the regionalisation attributes. For a full list of the possible formats see the formatDate function.
Also, you should be able to skip this:
$('.date-selector-dob').datepicker('setDate', new Date($('.date-selector-dob').attr('value')))
and just set the <input>'s value attribute to the date (preferably in ISO 8601 format), then the datepicker should be able to take it from there on its own.
At the time of initialize datepicker object we need to pass all our conditions as a hash. In your example you datepicker initialized for second time, that's the problem for not getting date range.
$(function (){
$('.date-selector-dob').datepicker({
dateFormat: 'M dd, yyyy',
minDate: '-1y',
maxDate: '+1m',
});
});
You can set the date by following way, for this you need to specify correct date format(already specified in initializer param as 'dateFormat')
$('#popupDatepicker').val("Feb 13, 2012");