I have the following piece of code that displays an input area and a datepicker popup
<input close-on-date-selection="false" type="text"
id="startDate" datepicker-popup="dd.MM.yyyy"
ng-model="myCtryl.startDate"
max-date="myCtrl.maxDate"
datepicker-options="myCtrl.dateOptions"
ng-change="myCtrl.validateDate()"/>
The date model is bound to startDate variable. My problem is, initially this startDate variable is in string format. When I debug startDate variable at the opening of the page, it looks like:
Whenever I make a selection on the datepicker, this variable turns into date format. Following is the screenshot of the variable after I select a date from the datepicker:
Here are the related parts of the controller. Initially I show today's date on the input area of the datepicker:
vm.todayDt = new Date();
vm.todayDt = $filter('date')(vm.todayDt, 'dd.MM.yyyy');
vm.startDate = vm.todayDt;
Here, the filter might be the problem. I tried removing that line too. When I removed that line, startDate became a date object at initial state too, but this time it shows "28.20.1614" on the input of the datepicker:
even though the dateobject is correct when I debug the variable:
What can I do to make the date object and the input area consistent? I.e., the object should be always in date format and it should show correctly on the input area. Thanks.
Related
I am using mui/x/datepicker and unable to clear the value when the user enters the invalid value. I am aware of the bug which is inside mui/lab but this is the new library getting imported from mui/x
Sandbox link
I am using Bootstrap datepicker and on selecting different values from a list its startdate is changing. It is working fine if I set the startdate 2013 from 2008 but it doesn't work if a select start date 2008 and currently its 2013.
What could be the reason here?
$('#datepicker').datepicker('setStartDate', updatedDate);
This line I am executing whenever I select different startDate.
Really need to know what updatedDate value is.
However, if you read the docs for the dtepicker the value passed in must be a string that is understandable by format
https://bootstrap-datepicker.readthedocs.io/en/latest/methods.html#setstartdate
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html#startdate
Date or String. Default: Beginning of time
The earliest date that may be selected; all earlier dates will be
disabled.
Date should be in local timezone. String must be parsable with format.
So what you pass in as the format option must match the format of your start date. If you do not set the format optin, the default is "mm/dd/yyyy"
Without seeing code, I can only hypothesize; try calling [...].datepicker('update', 'date_string'); on the object to force an update on the control.
I have saved date as a string.
for example:
I have object in angularJs called myBirthday.
myBirthday.date="1996-04-04";
and I want to show the date in input in the modal:
<input type="date" ng-model="myBirthday.date" />
The problem is that it's shown dd-mm-yyyy instead of 04-04-1996.
Then When I change the date,close modal and then reopen it,The input shows the correct date.
How can I make it to show the correct date? not dd-mm-yyyy?
I have tried almost every string types of date.
please HELP
You shoud create a Date object instead of a String.
myBirthday.date = new Date(1996, 3, 4);
You could also cast the Date to a String:
date_string = myBirthday.date.toISOString();
It seems date filter called before binding of date or date-format values. date/dateformat is null initially but filter called that's why filter would be giving default format string. And once values are binded properly then everything works perfectly fine
I am adding a project start and project end date picker, <input type="date">, to a quote page for my web clients, however, I have never worked with these before. How can I use the data from these date pickers to create an if statement that if the project end date is earlier than the end date or vice versa, it will display an error message?
This is what you want. Add ids to your date pickers, get their value using simple selectors and add them to the variables. Compare the variables in the if function
var startDate = document.getElementById('startDate_id').value
var endDate = document.getElementById('endDate_id').value
if(startDate > endDate){display error}
else{do nothing}
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");