I'd like 3 SELECT boxes that allow people to select the month, day, and year. I'm sure there are HTML pre-sets like this, right?
January 5 2006
And the user can select the date, which is just option boxes.
Why not use a jQuery Date picker?
Note: I am searching for the old school date picker which you asked. Will be back soon.
Edit: This page has a similar html code which you are looking for.
You should use the html 5 <input type="date" /> then degrade gracefully for browsers that do not support it yet.
To degrade gracefully use the following code, taken from diveintohtml5 here.
<form>
<input type="date">
</form>
...
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// No native date picker support :(
// Use Dojo/jQueryUI/YUI/Closure to create one,
// then dynamically replace that <input> element.
}
</script>
Related
Bit of a wide question so feel free to ask for elaboration if needed but after some Googling I couldn't find an answer.
More curious than an actual need.
Is there a way of adding a tag, attribute (such as type=date) or JS (such as converting to a date object) to a text date string, like "Tuesday 3rd May, 2pm" that allows the user to select it and add it to their calendar?
Much like I can select an address text string and Google gives me the option to find that location on Google Maps.
Not looking for a concrete answer necessarily just some direction so I can have a play around.
You can play around with this:
<input type="date" />
<script>
const input = document.querySelector('input');
input.addEventListener('change', ({ target }) => {
const date = new Date(target.value).toDateString();
console.log(date);
});
</script>
I am using WKWebview of iOS, and there is a date selection in the html file. Right now, the part that selects the month is in English. But I want to change this to a different language. How can I change it?
<input type="date" class="input" id="date1" >
#Piyush's answer does not fit my question.
How can I solve it?
You can use toLocaleString() method of Date.
Like this:
var format = new Date().toLocaleString('fr-FR', { month: 'long' });
document.getElementById("display").innerHTML = format;
<div id="display"></div>
Here first argument "fr-FR" is the language code for various languages. You can find all available language codes here.
Hi all I am using angularjs, working with datepicker functionality. Input type date is not working on IE so I am using jquery and css to get date picker, it's working fine but I am not able to trigger the ng-change event in IE, here I attached my fiddle help. Help me solving this problem.
Fiddle
Internet Explorer 11 does not currently support <input type='date'> as you already trying to find a work around. You may use datepicker onSelect and update your model. You can fire change function manually. So that you can collect both changes from HTML5 Date supported browsers and others.
You can find the fiddle here
function LoginController($scope) {
$scope.changeDetected = function() {
console.log($scope.date);
}
if ($('#test')[0].type != 'date') $('#test')
.datepicker({
onSelect: function(date) {
$scope.date = date;
$scope.$apply();
$scope.changeDetected(date);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app ng-controller="LoginController">
<input type="date" id="test" ng-model="date" ng-change="changeDetected()"/>
{{date}}
</div>
Reason why it is not working is IE11 is not know to type="date"
Please have a look into the screenshot!!
https://iamlalit.tinytake.com/sf/MTgxNjMyN181OTAwMzE4
IE 11 does not support <input type='date'>. So you can go with using input type='text' or date picker.
but anyway you need validate if the field has been entered invalid date from this discussion
Javascript: how to validate dates in format MM-DD-YYYY?
and you should read these below discussions to better understand
How to make <input type="date"> supported on all browsers? Any alternatives?
How to get HTML 5 input type="date" working in Firefox and/or IE 10
Below we are talking about IE11:
I think the reason is jquery .datepicker method won't delegate the date change to your ng-change method.
If you modify the input type="text", the ng-change also won't trigger the alert.
But if you modify the input content manually, it triggers the alert message.
Maybe you should use some angular datepicker instead of jquery date picker to handle all the browsers.
Alternatively, is it possible to validate against another field's value with HTML?
A common example would be selecting a date range where "from" date should be less than or equal to "to" date. The following would described the desired relationship between the values, if only you could use element references in syntax:
<input type="date" name="from" max="to"> //todo: populate with ~to.value
<input type="date" name="to" min="from"> //todo: populate with ~from.value
It's possible to utilize html5 validation mechanism with some javascript to dynamically update min/max attributes:
//in this case a single input restriction is sufficient to validate the form:
$('#from, #to').on('change', function(){
$('#to').attr('min', $('#from').val());
});
Fiddled. Both min and max could be applied to the respective fields for enhanced UX if browser implementation of a datepicker respects range limitations (by disabling dates outside of the desired range)
Here, Web Components are very useful, however they are not full supported in all browsers yet .
The idea is to create a simple html Element, with two children (from and to) as the following:
<div id="fromToDate">
<div></div>
<div></div>
</div>
then create a template, which defines how the date picker should look:
<template id="fromToDateTemplate">
<label for="fromDate">from</label>
<input type="date" class="fromDate" select=":first" required="" />
<label for="toDate">to</label>
<input type="date" class="toDate" select=":last" required="" />
</template>
the select parameter defines, where the value is taken from so the first input field takes the first div from the "#fromToDate".
Last we have to populate the "shadow root" and define the logic:
var shadow = document.querySelector('#fromToDate').webkitCreateShadowRoot(),
template = document.querySelector('#fromToDateTemplate');
shadow.appendChild(template.content);
shadow.querySelector(".fromDate").addEventListener("change", function (e) {
var to = this.value;
shadow.querySelector(".toDate").setAttribute("min", this.value);
});
template.remove();
In the end two input fields are renderd and when selecting a date in the first datepicker, the second datepicker can't pick any lower data.
Fiddler example: http://jsfiddle.net/cMS9A/
Advantages:
Build as widget
Easy to reause
won't break pages
can be styled independently
Disadvantages:
Not supported in all browsers yet
Future reading:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
https://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html
If you want to avoid issues with someone hacking / crashing yor site - validate input data with:
(optional) javascript before sending a form (protects against malforming data using javascript, inputting incorrect one, reduces traffic)
(mandatory) on server side (protects against more clever guys that might malform input data using fiddler for example)
This is the only (at least second point) approach that protects you and your site.
It's great to see things moving towards a pure HTML solution ... but why not take a look at using moment.js to fill in the gaps for the time being?
http://momentjs.com/
There are plenty of good examples there and a lot of useful utility methods.
I'm worry, that there's no chance how to validate a input value based on other input value. Only good old javascript.
But maybe you can use <input type="range" …> and set some minimal step (1 day / 1 hour / …). Then you can use min and max value by same-named attributes.
I've been trying to add a date picker to my site that allows users to pick multiple non-concurrent dates. Multidatespicker appears to do what I want but i've got to a point where I think I have discovered a bug, particularly with it's AltField, which is confirmed here. The bug seems to stop the altfield's values showing. If you visit the Multidatespicker demo and inspect the altfield you'll see that while it appears empty the values are showing in the code.
The issue this presents for me is that I can't edit previously selected dates when returning a record from my App/DB. When passing the value of altfield back to my Rails App for database storage I only receive the hidden values shown in the code.
If I can get the altfield to correctly show these values and allow me to edit them via the date selector, then I should be amend within my app's backend.
Note the suggested fix on the github link above does not solve this issue - it only enables rendering dates in 'dateVar' as being selected in the picker....it does nothing to show values in altField.
Has anyone used this and had the same problem and solved it?
Does anyone know how to fix it?
OR
Can anyone suggest a good alternative that will work nicely with a Rails 3 App using Twitter Bootstrap. It's very important that i'm able to select multiple non-concurrent dates. I've searched quite extensively but MultiDatesPicker seems to be one of the only options I can find.
The problem is that Multidatespicker is not listening #altField so we need to create our own listener to add/remove dates.
The idea is to add values to a hidden or readonly input and add/remove dates by an other. This prevent the customer to add dates in #altField and getting them overwritten by the plugin.
HTML
<input type="text" id="date">
<button type="button" id="addDate">Add dates</button>
<button type="button" id="removeDate">Remove dates</button>
<div class="ui-state-error" id="error"></div>
<br />
<input type="text" id="altField" readonly value="2013-08-30,2013-08-31">
JAVASCRIPT
And with javascript we simply add the date with a button (could be on keyup or anything your imagination can imagine :)
var dates = $('#altField').val().split(',');
$('#datepicker').multiDatesPicker({
dateFormat: "yy-mm-dd",
addDates: dates,
altField: '#altField'
});
$('#addDate, #removeDate').on('click', function() {
try {
var $date = $('#date');
var addOrRem = $(this).attr('id') === "addDate" ? 'addDates' : 'removeDates';
$('#datepicker').multiDatesPicker(addOrRem, $date.val());
$date.val('');
} catch (e) {
var $error = $('#error');
$error.html(e).slideDown();
setTimeout(function() {
$error.slideUp();
}, 2000);
}
});
jsFiddle
I have scanned the source of MultiDatesPicker. I don't find any method which set the date from the #altfield. So it is not a bug it is missing.
I also do not understand the difference between the preselected dates and the altfield.
I think you can do what you want with a combination of preselect and the altfield:
html
<div id="with-altField"></div>
<input type="text" id="altField" value="08/22/2013,08/21/2013">
</div>
javascript
//first read the values of the #altfield
var dates = $('#altField').val().split(',');
//second set your multiDatesPicker with the dates of step 1 and an altfield
$('#with-altField').multiDatesPicker({
dateFormat: "mm/dd/yy",
addDates: dates,
altField: '#altField'
});
nb load the javascript on document ready