Simply put, the following syntax doesnt work
onload="$(this).datepicker('option', {minDate: -0, maxDate: +0})"
which i have used in the input for a form as given below
<input type="text" name="date" class="datepicker form-control" onload="$(this).datepicker('option', {minDate: -0, maxDate: +0})" autocomplete="off"/>
What I want is for not being able to select a date at initial page load but later enabling it after a certain option is selected. Am i missing something that i cant see? Any help would be appreciated.
Related
This is my html
<input type=text name="date" value=7/8/2019>
This is my date picker:
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
endDate: '+0d',
todayBtn: 'linked'
});
I want to select the date in the calendar using the date value in the text box
The code which you paste is call javascript not html
But you can use html input tag with type date or datetime-local like this, which give the additional attributes to set min, max etc.
<input name="submittion-date"
type="date"
max="2017-06-20"
min="2017-06-01" />
You can use jquery to read the value
for further reading: https://www.w3schools.com/jsref/prop_date_value.asp
Your input should look like this:
<input type="text" id="datepicker" value="7/8/2019">
You need to wrap your attribute values in "" if they are not numeric.
I'm using Jquery datepickers to collect two dates on the same page, the calendars display correctly and I'm able to collect the input dates fine however, on the occasion a default date is supplied to JQuery, it only populates the first datepicker on the page. I'm using
$( id ).datepicker( "option", "defaultDate", defaultDate );
to attempt to set the default date where the var id is the html id of the datepickers and defaultDate var is the date to set. How do I get the default date to populate in both datepickers?
Update:
The html ids for both of these are unique. Here are some logs from the console-
//default date sets correctly
default date 06/01/2017
id#opa_global_global_BeginBus
//does not set
default date 06/30/2017
id#opa_global_global_a_TempVendor
I also noticed while debugging that the default date for the second datepicker value appears to be selected on the calendar, but not displayed in the corresponding textbox (see image below).
The HTML
<!--has default date --->
<div id="rn_CalendarInput_40" class="rn_CalendarInput">
<input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_BeginBus" name="opa_global_global_NysBeginBus" placeholder="MM/DD/YYYY" value="06/01/2017" aria-required="true"><img class="ui-datepicker-trigger" src="assets/images/calendar.gif" alt="Select date" title="Select date">
</div>
<!--does not have default date--->
<div id="rn_CalendarInput_46" class="rn_CalendarInput">
<input type="text" class="datepicker form-control hasDatepicker" id="opa_global_global_TempVendor" name="opa_global_global_TempVendor" placeholder="MM/DD/YYYY" value="06/30/2017"><img class="ui-datepicker-trigger" src="/assets/images/calendar.gif" alt="Select date" title="Select date">
</div>
IDs must be unique to each element. Anything else is invalid HTML and jQuery will ignore any element with an ID which has already been used further up the page.
Give both datepickers the same class instead and use that as your selector. e.g.
<input id="dp1" class="datepicker"/>
<input id="dp2" class="datepicker"/>
$(".datepicker").datepicker( "option", "defaultDate", defaultDate );
As everybody is saying, as long as Id's are unique, it should work. or use a class selector instead if you don't want that selector to be unique. And to show it, check the jsfiddle below using both, ids and classes and also using the options object instead of the setter syntax where you pass { defaultDate: defaultDate }, you might like that better.
jsfiddle here
Code:
$(function(){
var defaultDate = new Date('7/01/2016');
$('#first').datepicker();
$('#second').datepicker();
$('#first, #second').datepicker("option", "defaultDate", defaultDate);
$('.date').datepicker({ defaultDate: defaultDate });
});
I have the following code for jQuery datepicker
$('#startDate').datepicker({
format: "dd/mm/yyyy",
maxDate: '0'
})
.on('changeDate', function (ev) {
$('#startDate').datepicker('hide');
});
It launches in a Bootstrap modal. It is working as expected apart from the maxDate - I want to restrict user from entering any date in the future - is there something I am missing? I also tried maxDate : new Date() which also did not work. And I did a hard reload and have checked Dev Tools and I can see the java-script in the rendered markup is as expected.
Updated with full html markup.
<input id="startDate" placeholder="Select Date" data-provide="datepicker" class="datepicker ng-valid ng-touched ng-dirty ng-valid-parse" readonly="readonly" style="cursor:auto; background-color:white" ng-model="item.startDate" ng-change="startDateChanged(item.startDate)">
Using jQuery 1.10.2 and Angular 1.4.1
Hope this will work for you
$( "#datepicker" ).datepicker({
format: "dd/mm/yyyy",
maxDate: 0
});
Do you want to Prevent the user from typing a date into the text box then add readonly='true' in your Textbox.
HTML
<input id="Datepicker" type="text" readonly='true' />
Demo : Click here
Lesson learned is to search what libraries other devs add to the project and dont assume its the one you have used in the past - I have used jQuery Datepicker in nearly every other place I have developed. This particular Dev had included bootstrap js datepicker. The options for it were endDate and also there is an option for autoclose so I can even get rid of the 'on' event handler which was doing the hiding
https://bootstrap-datepicker.readthedocs.io/en/latest/options.html
From database I get data in format like (let's suppose it's a string)
1974-07-05
How I need to pass the date in form with datepicker and make the date active there, so how can I do it?
<td>
<script src="javascript/datepicker.js"></script>
<input id="datepicker" type="text" name="dob" value="${person.bdate}">
</td>
and ${person.bdate} is a string date
This is not an answer, just an observation.
You have requested a pure javascript solution, but you are using a plugin. Why not use jQuery and jQueryUI's datepicker plugin. Look how easy the code would be:
jsFiddle Demo
HTML:
<input id="datepicker" type="text" name="dob" value="">
jQuery:
var dd = '1974-07-05';
$('#datepicker').val(dd);
$('#datepicker').datepicker({
dateFormat: 'yy-mm-dd'
});
Sources:
http://jqueryui.com/datepicker/#date-formats
I am using datepicker in my application for letting the user entering dates. But what I want is that the user should be able to enter the dates manually as well into the textbox using keyboard and then the date-picker automatically should be able to identify the date and accept it.
Here is the JS used.
<script type="text/javascript">
function getMetricName()
{
var today = new Date();
var maxdate= new Date(today.getFullYear(),today.getMonth(),(today.getDate()- 1),"23","59","59");
$(function() {
$('#start_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
maxDate: maxdate});
$('#end_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
maxDate: maxdate});
});
</script>
And below is the simple datepicker commands in html.
<td><input class="datepicker" name="start_date" value="" /></td>
<td><input id="end_date" name="end_date" value="" /></td>
Please help.
If you are using Datepicker Widget from JQuery, you can use the next option;
constrainInput: false
like
$('#start_date').datetimepicker({timeFormat: "HH:mm:ss",
dateFormat:"dd-mm-yy",
constrainInput: false,
maxDate: maxdate});
API information constrainInput +
API documentation for further documentation if you need any.