using this code
<input type="text"
id="StudentDOB"
class="controls span2"
data-bind="datepicker: StudentDOB"
name="StudentDOB" />
yeilds the following result.
When I change the code to
<input type="text"
id="StudentDOB"
class="controls span2"
data-bind="datepicker: StudentDOB, datepickerOptions: {}"
name="StudentDOB" />
It appears as follows:
Now I want the year and month option while setting my max year to 2014. How do I do this?
The date picker you are talking about is not the the knockout datepicker as there is no such thing. It's the jQueryUI datepicker. The options are in the api documentation on the jQueryUI website: http://api.jqueryui.com/datepicker/
datepickerOptions: { changeYear: true, changeMonth: true, yearRange: '1900:2014' }
http://jsfiddle.net/d4kkg/
Related
I have tried autocomplete="off", autocomplete="none" , autocomplete="/" ,autocomplete="new-text"
but still it shows autocomplete
browser autocomplete overlaps typehead autocomplete popup
I don't Know how to remove this autocomplete
Thank you in advance!!
<form name="clientForm" class="kt-form kt-form--label-right" novalidate role="form" autocomplete="new-text">
<div class="form-group row">
<div class="col-lg-3 col-sm-6 col-xs-12 typeahead">
<label for="country">Country <span style="color:red">*</span></label><br />
<input id="add-c-country" class="form-control" name="country" type="text" dir="ltr" placeholder="Enter Country" autocomplete="new-text" />
<div class="form-text text-muted" ng-show="clientForm.country.$touched || clientForm.$submitted"
ng-messages="clientForm.country.$error" role="alert">
<div class="req-red" ng-message="required">Please Select Country</div>
</div>
</div>
</div>
</form>
I am using typeahead.js for auto complete
function applyAutocomplete(id, array,namE) {
$('input#' + id).typeahead({
hint: true,
highlight: true,
minLength: 1,
accent: true,
offset: true
}, {
name: namE,
limit: 100,
source: substringMatcher(array)
});
}
applyAutocomplete('add-c-country', $ctrl.countryNameList,'country');
Could you try just completely removing the autocomplete parameter?
Like this:
<input id="add-c-country" class="form-control" name="country" type="text" dir="ltr" placeholder="Enter Country" />
Edit after reading your edited question:
You can not disable browser autocomplete in your own code. That is a browser specific setting.
For chrome you can do the following:
Click the Chrome menu icon. (Three lines at the top right of the screen.)
Click on Settings.
At the bottom of the page, click 'Show advanced Settings'
In the Passwords and Forms section, uncheck 'Enable Autofill to fill out web forms in a single click'.
Hope this solves your problem.
Best regards.
I am trying to show minDate:1 and defaultDate:+3 in datepicker.
$( ".datepicker1" ).datepicker({
dateFormat: "mm-dd-yy",
altFormat: "yy-mm-dd",
altField: "#altField",
minDate: 1
});
$("#TTOCutoffDate").datepicker("option", "defaultDate", 3);
$("#fileDate").datepicker("option", "defaultDate", 3);
If I use html input box, it works as expected.
<input type="text" name="fileDate" id="fileDate" class="datepicker1">
success picture
But If I use html.textboxfor as below, it doesn't work.
<%=Html.TextBoxFor(x => x.TTOCutoffDate, ttoEnabled ? new {#class="datepicker1" } : (object)new {
disabled = "disabled" })%>
TextBoxFor picture
It seems that default date is not set as default date.
How can I make it work with TextBoxFor?
html rendered as below.
<input type="text" name="fileDate" id="fileDate" class="datepicker1 hasDatepicker">
<input class="datepicker1 hasDatepicker" id="TTOCutoffDate" name="TTOCutoffDate" type="text" value="" readonly="" style="background-color: rgb(255, 255, 255);">
Thank you.
You're missing the fileDate ID
I put a new datepicker into a admin page and it lets me select the date needed but when I had data-date-format="yyyy/mm/dd" as dd/mm/yyyy, it would not save the date in the database and would save it as 0000-00-00 so I changed the format to data-date-format="yyyy/mm/dd" and it works now and saves the date correctly now in the database but is there any way I can have the date format as dd/mm/yyyy in the input field as it currently shows as 2019/10/22
The code I have is below
<div id="exstdate" class="col-lg-6 input-group date" data-date-format="yyyy/mm/dd">
<input type="text" class="form-control" name="exstdate" value="<?php echo $exstdate; ?>" id="exstdate" readonly />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><div class="error alert-danger"></div>
</div>
<script>
$(function () {
$("#exstdate").datepicker({
language: "en",
autoclose: true,
todayHighlight: true,
dateFormat: 'dd/mm/yyyy'
}).datepicker('update', new Date());
});
</script>
There is an edit page where a user can, obviously, edit aspects of an event. Everything displays fine except the Date shows empty.
I am using the type="date" in my html which may be a cause, how can I get around this so that I can show the date, because when it saves it saves as null after editing the event
View:
<div class="form-group">
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= event.startDate %>">
</div>
Route:
router.get("/event/:id/edit", isLoggedIn, function(req,res){
Event.findById(req.params.id, function (err, foundEvent) {
if(err){
console.log(err);
console.log("Cannot find the event...maybe the database isnt running?")
} else {
res.render("eventEdit", {event: foundEvent});
Everything works fine but the date
Can you add some more information to the question? at the moment it looks quite unclear. like how is your server set up.
It turns out its an HTML thing, if you want to display a date you have to have it formattted as YYYY-MM-DD then it shows fine, otherwise it doenst recognize the format.
This comes into account if you use the type="date" attribute in your input
I had to edit the event date coming from mongo using momentjs and here is the line I used.
var newDate = moment(foundEvent.startDate).utc().format("YYYY-MM-DD")
res.render("eventEdit", {event: foundEvent, newDate:newDate});
The newDate is the variable being passed to the template, then I just have:
<input class="form-control" type="date" name="editEvent[startDate]" placeholder="Date" value="<%= newDate %>">
This works.
I am trying to implement a dynamic start date for a bootstrap datepicker while using vuejs. Below is an example of what I have in my code currently. Using -30d or a date formatted as 01-01-2016, but not 2016-01-01 works.
<input type="text" name="cancelDate" id="cancelDate" autocomplete="off" class="form-control form-control-small"
v-model="sale.cancelDate"
v-bind:class="{ 'has-error': !validation.cancelDate }"
v-datepicker start-date="{{sale.saleDate}}" />
<p>{{sale.saleDate}}</p>
The {{sale.saleDate}} in the p tags is accessible, and displays a date like '1/27/2016'. Changing 'start-date' to 'data-start-date' does not work. In the datepicker directive, I have...
var self = this;
$(self.el).datepicker({
startDate: self.params.startDate,
endDate: self.params.endDate,
todayBtn: "linked",
autoclose: true
});
How can I get the start-date to appear dynamically?
I post an example here:
//script.js
new Vue({
el:"#app",
data:function(){
return {
startDate: moment().subtract(7, 'days').format('MM/DD/YYYY'),
cancelDate: moment().format('MM/DD/YYYY')
}
},
ready:function(){
$('.datepicker').datepicker({ startDate: this.startDate });
}
})
// index.html
<div id="app">
<input class="datepicker" type="text" v-model="{{cancelDate}}" value="{{cancelDate}}" >
</div>
https://jsfiddle.net/nosferatu79/jfk97gp9/4/
Hope this help...