I tried setting the disableTouchKeyboard option but it did nothing -- at least on iOS/Safari. The options I was specifically using were:
$(".datepicker").datepicker({
autoclose: true,
disableTouchKeyboard: true,
format: 'm/d/yyyy',
startDate: '01/01/1900',
todayBtn: 'linked',
todayHighlight: true,
});
Anyone know what the best way to do this is?
If you are using Bootstrap3 Datepicker: https://eonasdan.github.io/bootstrap-datetimepicker
Just add this property to the input: readonly="readonly"
and this property to options when instantiate the library.
$('#datetimepicker1').datetimepicker({
useCurrent: false,
daysOfWeekDisabled: [0, 6],
format: 'DD-MM-YYYY',
ignoreReadonly: true <------ this property
});
Tested on Safari iPhone and Chrome / Native browser Android.
This is how I've accomplished this but I'd love to know if there are better ways.
Using the same options in the question, I then also made the HTML text box readonly by doing this in my HTML:
#Html.EditorFor(model => model.Date, new { htmlAttributes = new {
#class = "form-control datepicker", #readonly = "true",
}})
This seems to work as JavaScript can still change the value of the field. However, it does make the background of the text box gray (i.e., disabled) and it changes the mouse pointer to the crossed circle icon (not-allowed) which is not desired. To get around that I did this added an inline style:
#Html.EditorFor(model => model.Date, new { htmlAttributes = new {
#class = "form-control datepicker", #readonly = "true",
style = "cursor: default; background-color: #fff"
}})
I tried to override the cursor and background-color in CSS (using !important) but that didn't seem to work in Internet Explorer.
This isn't pretty but it works for me. Still need to see how I could do this in a more robust way (e.g., no hard coding the background color, not having to specify this on all of my date fields, etc.). If anyone knows a better way, I'd very much appreciate it.
I have/had a similar problem like this.
I use a input field type=text where i bind a jQuery datepicker to it. When I select the input field on my mobile (android chrome) I get the datepicker and the keyboard of the phone.
After searching StackOverflow I found some solutions about setting the input field on readonly or disabling the field. The problem with this is when you disable the field it will not be submitted, and when read-only is set my jQuery validator skips the field. So I needed a different solution.
I have now fixed it by letting the datepicker set the field on read only before opening the picker, and removing the readonly when the picker is closed. I have tested it so far on mobile android (chrome and I.E) and i dont get the native keyboard. iphone/ipad is not tested yet but maybe other can check it.
The code is:
$(this).datepicker({
beforeShow: function(input, obj){$(input).prop('readonly', 'readonly');},
onClose: function () {$(this).prop('readonly', false);}});
Just also add attribute readonly in datepicker.
$(".datepicker").datepicker({
format: "dd-M-yyyy",
autoclose: true,
disableTouchKeyboard: true,
Readonly: true
}).attr("readonly", "readonly");
This is an old question but I thought I should share my solution since this question shows up in Google search. If you make the input type a button the keyboard will not show up and you can style the button to look like a text input field if you really need to.
<input type="button" style="background-color:white;border:1px solid #DDD;padding:5px;cursor:text;" value="Enter a Date" id="datepicker">
This quick block of Javascript will allow you to disable keyboard input within Date fields. This snippet is helpful if you need to avoid the virtual keyboard from appearing within the datepicker.
<script type="text/javascript">
jQuery(function() {
jQuery( ".datepicker" ).datepicker({ }).attr('readonly','readonly');
});
</script>
Related
I want to take two date string with textbox or editor in mvc.
The format should be
"MM/yyyy-MM/yyyy".
I need to force the user for entering the input like above format without posting model.
#Html.TextBox("tbxDateRange", "", "{0:dd/MM/yyyy}", new { #class = "form-control dropdown", placeholder = "MM/yyyy - MM/yyyy" })
Above code not working event get just a formatted date string.
The format is working as expected. You are telling tbxDateRange's value (the zero in the third parameter ("{0:dd/MM/yyyy}") to format as day/month/year. It will therefore take the input in the text box and display it in that format.
It is only a display format. It will not enforce this format. For that you will need to do your own client side javascript (since you mentioned without posting the model). You could look at using a masked input element. ASP.NET MVC does not have a masked input out of the box.
You could use a masked input control like maskedinput which is a plugin for jQuery.
Additionally, you might want to look at breaking this up into two controls. One for the start and one for the end. You could consider using the html5 input type of date and you will automatically get a calendar. Although, if the day of the month will be too confusing for your users/UI then you could look at using jquery UI's datepicker and you can configure it to show only month and year.
Once you include jQuery UI in your app you would do something like jQuery UI DatePicker to show month year only.
In that example the winning answer formats the control in such a way to only show the month and year items of the control.
<script type="text/javascript">
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
});
</script>
<style>
.ui-datepicker-calendar {
display: none;
}
</style>
I have an ASP.NET MVC web app and trying to use Bootstrap 3 Datepicker for my "month/year" field like the one in demo here:
https://eonasdan.github.io/bootstrap-datetimepicker/#min-view-mode
In that demo, it only allows users to select "year" and "month". Not "days". I want the same functionality in my app. However, in my app, it works the same on first click but on succeeding clicks it shows the "days" selection view. Setting the viewMode to 'years' doesn't fix the problem.
My model is as follows:
public class FilterViewModel
{
public DateTime? StartMonthYear { get; set; }
...
My view is as follows:
<div class="col-sm-3">
#Html.TextBoxFor(model => model.StartMonthYear, new { #class = "month-picker" })
...
<script type="text/javascript">
$(function () {
$('.month-picker').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
useCurrent: false
});
});
</script>
The problem is that viewMode only sets the initial view. However, it seems this particular library doesn't provide any way to actually restrict which views are available.
There's an alternate libary that I personally use, which does give you the ability. It's virtually a drop-in replacement, so you shouldn't have to change much to switch over. However, importantly, it provides minView/maxView options you can utilize:
$(function () {
$('.month-picker').datetimepicker({
startView: 'month',
minView: 'month',
format: 'mm/yyyy'
});
});
As you can see there's a few minor differences:
viewMode becomes startView. The view names are also singular month vs. months.
The formatting string is more similar to C# formatting, so you'd use lowercase mm and yyyy.
The default for this library is to use the current date/time, so there's no need for a separate useCurrent option. If you want to specify a different start date/time, you'd use initialDate.
I found a work around which works pretty well:
$(function () {
$('.month-picker').datetimepicker({
viewMode: 'months',
format: 'MM/YYYY',
useCurrent: false
});
$('.month-picker').on("dp.show", function (e) {
$(e.target).data("DateTimePicker").viewMode("months");
})
});
This is based on a reply found here.
This was a bug in the library and solved. I faced same problem and solved by simply downloading latest version.
So I have just come across this issue.
I am using the JQuery UI to have a datepicker which "maps" to a readonly textbox:
$(document).ready(function ()
{
var dateFormatStr = 'yy/mm/dd';
$('#DateOfBirth').datepicker({
dateFormat: dateFormatStr,
minDate: '-100Y',
maxDate: '-18Y',
changeMonth: true,
changeYear: true
});
$('#DateOfBirth').attr('readonly', 'readonly');
});
And in the View, this is what I am doing to bind it:
#Html.LabelFor(m => m.DateOfBirth)
#Html.EditorFor(m => m.DateOfBirth, new { #readonly = "readonly" })
This works fine in IE.
In Chrome however, not so much. It gives its own definition of the date picker control and you can see the jquery control behind it! And when you try to set the value, it fails to do so.
is there a reason why chrome is acting weird? I am guessing this is because the EditorFor is binding the DateOfBirth property which is of type DateTime.
Is there a way to stop this behaviour? I believe I had issues when I was using a TextBoxFor instead and had to use the EditorFor.
Many thanks
I don't see any Id with your EditorFor statement.
#Html.EditorFor(m => m.DateOfBirth, new { id="DateOfBirth", #readonly = "readonly" })
Don't know if that's the issue, I worked on the datepicker control yesterday and I had no issues. Unfortunately, I can't make much sense of what you describe as weird behaviour in Chrome.
I'm working on some internationalization using jQueryUI. I have a DatePicker control on a form that is properly working in the French language.
When I select a date, for example August 15, 2012, the DatePicker will display 15 Aoû, 2012 as I would expect. My issue however, is that when the form is posted, the value of the DatePicker is posted as '15 Aoû, 2012' which now needs to be translated on the server before it can be saved properly.
My question is, is there a built-in way inside the jQueryUI DatePicker so that I can have it always post to the server in a consistent format, regardless of which language the control is being displayed in? If there isn't a built-in way, what options exist for achieving this?
I realize that I can change the dateformat to something like 08/15/2012 instead of using the textual representation, however this isn't what I want to do.
There's 2 configuration options for that: altField and altFormat. http://api.jqueryui.com/datepicker/#option-altField
If you specify an altField, that field will be updated too, and will have the altFormat.
Normally you will want make the altField a hidden field, soyou can ignore the regular field and send to db the altField.
As you'll have noticed, supplying a dateFormat works well for newly entered dates, but it does not alter the value attribute which was already supplied to the date input field. It took me some time and I'm not sure whether this solution is ideal, but here's my situation explained and the code which solves it. Might help others with the same problem in the future. In my example I'm using dd/MM/yyyy as the display format.
The page contains any number of date input fields, which may or may not already have a value attribute supplied in the format yyyy-MM-dd, as specified by W3C.
Some browsers will have their own input control to handle dates. At the time of writing, that is for instance Opera and Chrome. These should expect and store a date in the abovementioned format, while rendering them according to the client's regional settings. You probably do not want/need to create a jqueryui datepicker in these browsers.
Browsers which don't have a built-in control to handle date input fields will need the jqueryui datepicker along with an 'alt', invisible field.
The invisible, alt input field with the yyyy-MM-dd format must have the original name and a unique id in order for forms logic to keep working.
Finally, the yyyy-MM-dd value of the display input field must be parsed and replaced with its desired counterpart.
So, here's the code, using Modernizr to detect whether or not the client is able to natively render date input fields.
if (!Modernizr.inputtypes.date) {
$('input[type=date]').each(function (index, element) {
/* Create a hidden clone, which will contain the actual value */
var clone = $(this).clone();
clone.insertAfter(this);
clone.hide();
/* Rename the original field, used to contain the display value */
$(this).attr('id', $(this).attr('id') + '-display');
$(this).attr('name', $(this).attr('name') + '-display');
/* Create the datepicker with the desired display format and alt field */
$(this).datepicker({ dateFormat: "dd/mm/yy", altField: "#" + clone.attr("id"), altFormat: "yy-mm-dd" });
/* Finally, parse the value and change it to the display format */
if ($(this).attr('value')) {
var date = $.datepicker.parseDate("yy-mm-dd", $(this).attr('value'));
$(this).attr('value', $.datepicker.formatDate("dd/mm/yy", date));
}
});
}
<input type="text" name='fieldName' id="datepicker" value="" style="width: 100px;" />
<script type="text/javascript">
$( "#datepicker" ).datepicker( "option", "dateFormat", 'dd/mm/yy' );
$( "#datepicker" ).datepicker();
</script>
It appears someone else had this question or a similar one prior to yours.
If you read this stackoverflow answer, the author was trying to show the date in one format and pass the data to MySQL in another format.
The prior answer in that link gets you set up to access the selected value as a variable. Now all you need is to wire in a parseDate to your selected date variable.
<script type="text/javascript">
$('#cal').datepicker({
dateFormat: 'dd M yy',
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var newDateFormat = $.datepicker.parseDate('dd-mm-yyyy', dateAsString);
}
});
</script>
Check the parseDate link for settings and formatting.
Hope this helps!
Basically, you should not re-format the date. Instead, you should read JavaScript's Date object from Datepicker, via getDate() method. Then, you need to pass it to server.
The question is how. Basically, what you want is some common format. If you use JSON the answer is very simple, just put date object and JSON's stringify() function will automatically format it to ISO8601.
As you may see from Wikipedia, ISO8601 was designed to interchange date and time reliably, therefore that's what you should use.
It might be helpful to know that modern web browsers support Date object's toISOString() method.
As #Pawel-Dyda mentioned,
There's a
getDate() method
var currentDate = $( ".selector" ).datepicker( "getDate" );
Here's an example of what it returns: Wed Jan 20 2016 00:00:00 GMT+0300.
You can parse it in Javascript, PHP, in SQL or whatever.
MySQL parsing examlple:
select str_to_date('Wed Jan 20 2016 00:00:00 GMT+0300','%a %b %d %Y %H:%i:%s');
Returns:
2016-01-20 00:00:00
Solution working for ASP.NET
#using (Html.BeginForm("ActionName", "ControllerName"))
{
#Html.HiddenFor(m => m.DateFrom)
#Html.HiddenFor(m => m.DateTo)
<div class="form-group">
#Html.LabelFor(m => m.DateFrom)
<input id="datepicker-date-from" type="text" class="form-control datepicker" value="#Model.DateFrom.Date.ToString("dd.MM.yyyy")"/>
</div>
<div class="form-group">
#Html.LabelFor(m => m.DateTo)
<input id="datepicker-date-to" type="text" class="form-control datepicker" value="#Model.DateTo.Date.ToString("dd.MM.yyyy")" />
</div>
<input type="submit" class="btn btn-sn btn-primary" value="Download" />
}
#section scripts {
<script type="text/javascript">
$(function () {
$("#datepicker-date-from").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateFrom),
altFormat: "yy-mm-dd"
});
$("#datepicker-date-to").datepicker(
{
dateFormat: "dd.mm.yy",
altField: #Html.IdFor(m => m.DateTo),
altFormat: "yy-mm-dd"
});
});
</script>
}
The recent update (V 20.x) of Chrome has broken one of my forms with the new built-in date and time input type. I'm calling jQuery UI datepicker on a date field and it used to work perfectly prior to the update. After the update, Chrome overrides my placeholder and renders the jQuery UI widget unusable.
Any ideas of how I can prevent Chrome from messing up with my input fields without changing their type?
You have a couple of different options.
You could detect that the user is using Chrome by sniffing the user agent string and preventing click events.
if (navigator.userAgent.indexOf('Chrome') != -1) {
$('input[type=date]').on('click', function(event) {
event.preventDefault();
});
}
User agent sniffing is a bad idea, but this will work.
The ideal approach in my mind is to detect whether the browser supports a native datepicker, if it does use it, if not use jQuery UI's.
if (!Modernizr.inputtypes['date']) {
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat: 'yy-mm-dd'
});
}
Example - http://jsfiddle.net/tj_vantoll/8Wn34/
Of course since Chrome supports a native date picker the user would see that instead of jQuery UI's. But at least you wouldn't have a clash of functionality and the UI would be usable for the end user.
This intrigued me so I wrote up something about using jQuery UI's datepicker alongside the native control - http://tjvantoll.com/2012/06/30/creating-a-native-html5-datepicker-with-a-fallback-to-jquery-ui/.
Edit
If you're interested, I recently gave a talk on using jQuery UI's widgets alongside HTML5 form controls.
Slides
Video
To remove the arrow and spin buttons:
.unstyled::-webkit-inner-spin-button,
.unstyled::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
You can still active the calendar by pressing Alt+Down Arrow(checked on windows 10).
To disable, you need to add a little JavaScript:
dateInput.addEventListener('keydown', function(event) {
if (event.keyIdentifier == "Down") {
event.preventDefault()
}
}, false);
This works for me:
;
(function ($) {
$(document).ready(function (event) {
$(document).on('click input', 'input[type="date"], input[type="text"].date-picker', function (e) {
var $this = $(this);
$this.prop('type', 'text').datepicker({
showOtherMonths: true,
selectOtherMonths: true,
showButtonPanel: true,
changeMonth: true,
changeYear: true,
dateFormat: 'yy-mm-dd',
showWeek: true,
firstDay: 1
});
setTimeout(function() {
$this.datepicker('show');
}, 1);
});
});
})(jQuery, jQuery.ui);
I completely agree with TJ.
If you're doing any sort of editing, pre-filling, or dynamic setting of date values, you'll also need to know that as of 7/3/13 Chrome only honors the ISO standard date format (yyyy-mm-dd). It will display dates to the user in local format ('mm/dd/yy' for the US) but will ignore any values set in the HTML that are not ISO standard format.
To convert on page load, you can use TJ's user agent sniffer and do this:
if (navigator.userAgent.indexOf('Chrome/2') != -1) {
$('input[type=date]').each(function(){
var d = trim(this.getAttribute('value'));
if (d){
d = new Date(d);
var dStr = d.toISOString().split('T')[0];
this.value = dStr;
}
});
}
If, for example, you opt to disable the native datepicker and use jQuery's, you'll also need to set the date format to match Chrome's date field, or it won't display the input that the jQuery datepicker is sending it:
$('#myDate').datepicker({dateFormat: 'yy-mm-dd'});
Add those two things to the first option in TJ's answer and you have jQuery's datepicker working in Chrome without errors!
Relying on native datepickers is ideally the best solution. But when you need something that supports black-out dates, date ranges, or you just plain want it to look prettier, this will work.