I'm using this datepicker. As of now, the user can write anything he likes in the input field which is not what I want.
My code:
session.js
session.getDateFormat = function() {
return 'yyyy-MM-dd';
};
session.formatDate = function(date) {
return $filter('date')(date, session.getDateFormat());
};
Controller.js
vm.dateFormat = session.getDateFormat();
function submit() {
date : session.formatDate(vm.data.date)
}
The code is much longer but that basically the part concerning the date. And HTML
<input type="text" class="form-control" uib-datepicker-popup="{{vm.dateFormat}}" placeholder="{{vm.dateFormat}}" ng-model="vm.data.date" is-open="vm.dateOpened" ng-required="true" ng-disabled="disabled" />
The admin can choose if he wants getDateFormat to accept yyyy-mm-dd or dd-mm-yyyy etc.
What I want:
To verify that the user has input the date is the right format, otherwise to clear the field automatically and display an error message along with the right date format as a hint to the user. All that must be done before pressing submit.
Not allowing the user to enter letters obviously
No hard coded html regex, I want something to check if the input is the same as getDateFormat, otherwise clear the field and display an error.
No Jquery, I don't use Jquery in the entire project.
If you have any other datepicker in mind that works with angular and bootstrap without using Jquery, let me know.
I had to update to angular-ui 1.3.3 and then I had to give the date input a name 'datepicker' and the form a name 'frm' and then
<div ng-if="!frm.datepicker.$error.required"">
<div class="datepicker-error" ng-if="frm.datepicker.$invalid">
some error message
</div></div>
I didn't clear the field since if the user didn't finish typing it's going to be invalid and hence might be cleared. If anyone has a better solution let me know.
Related
I know next to nothing about Javascript. I think I am almost there but need some help...
I need to pass UTC into a hidden field in an HTML form. The actual time doesn't really matter, just using it as an order identifier that will be unique for each order.
Here is what I have but it isn't working... Appreciate any help.
--- in form section ---
<input id="pg_consumerorderid" value="" type="hidden">
--- Script just below the < /form> tag
<script>
var field = document.querySelector('#pg_consumerorderid');
var date = Date.now();
// Set the date
field.value = date;
</script>
All my other form fields use input name= instead of the input id= Not sure if that is messing things up.
Thanks!
Kalhan.Toress said in a comment which gave the answer:
you have to keep both name and id
I searched a lot but maybe because I am quite new here i couldn't fine a result that's works for my challenge.
Project view
What's is going on:
I have made page where users could click on a date-picker, after the user selected a date or a date range and they click on the submit button "Verzenden"the table that is positioned under the selection area shows all data from that specific date or date range that is available in the database.
In this table the user is able to adjust some data from a specific table row.
After clicking on the submit "Ok" button the changes the user made is pushed to the database.
Now my challenge:
After the user has changed some data from a row an they click on submit button "Ok" i want to achieve that the user is getting back to it's last date selection that he made before adjusting some data in a row table. What is the best way to handle this ?? I hope someone could help me, thanks already for participating and reading.
The term you're looking for is "pre-populating a form". You can pre-populate the form with PHP by generating HTML that has the value written directly in the HTML
<input type="text" value="<?php echo htmlspecialchars($someValue, UTF8, ENT_BOTH);?>">
Your homework probably wants you to save the input into the user's SESSION, and then check the SESSION every time you render the page. If a previous value is in the session, then pre-populate the form (i.e. render the HTML with the hard-coded values).
Try this:
<form autocomplete="on">...</form>
the "autocomplete" attribute allows you to save your selection that you've submit after reload the site.
If you don't want this feature take effect for some special tag,you should write your code like this:
<form autocomplete="on">
...
<input type="date" autocomplete="off" /> // this tag won't save the choice
</form>
check this fiddle : https://jsfiddle.net/9nfz311z/
html part:
<input type="date" name="test"/>
js part :
var dateInput = document.querySelector('input[name="test"]');
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)}
// on change save in localStorage the value
dateInput.addEventListener('change', function(e) {
localStorage.setItem(dateInput.name, dateInput.value);
});
// on dom ready if localStorage has date value apply it to the input
DOMReady(setDateValue);
function setDateValue() {
var date = localStorage.getItem(dateInput.name);
if (date) {
dateInput.value = date;
}
}
I am writing a ReactJS application, and I want to disable the input on a date/time field, which includes the react-bootstrap-datetimepicker. Disabling the input field works fine, but the glyph used to bring up the datepicker, when clicked, is still active, and it allows the user to select a date, which is added to the input field. It just seems to prevent typing.
Does anyone know a way around this?
<DateTimeField
inputFormat='HH:mm'
data-hour-format="24"
mode='time'
name="formInputTime"
id={inputID}
defaultText={this._getICEField(i-1, "time")}
onChange={this._generateEventHandler(i-1, "time")}
inputProps={{disabled: readOnly}}
/>
In this image the input field is set as disabled, but the calendar still appears, and a date can be set:
Here is an example on jsfiddle.
Well, the control does not support this as of now (and maybe it shouldn't either), so you should not run the
$element.datetimepicker()
on those input fields, which are disabled. You can check the disabled state programmticaly like this:
var $startDate = $('#startDate');
if (!$startDate.prop('disabled')) {
$startDate.datetimepicker()
}
Try this one, I have just updated your code: JsFiddle.
Relevant code:
if($("input[name=startDate]").attr('disabled') != 'disabled') {
jQuery("#startDate").on("dp.change",function (e) {
jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
});
jQuery('#startDate').datetimepicker();
}
My ultimate goal is to add some validation to a set of date fields. However, my javascript sucks, so I'm starting small.
I am starting out by trying to get an alert message when a user leaves a field.
(For simplicity I'm just doing it all in my view...) Heres what I go to work...
# html.erb-template
<div class="from_date">
From Date
<input type="text" id="from_date" name="from_date"></input>
</div>
<script>
$("#from_date").blur( function() {
alert("boom!");
});
</script>
Your code seems to be fine - problem is that class and id are named the same, but you want to watch the input field not the surrounding div.
I just made a fiddle from your script and changed
the listener to be attached to the input field's id - and it's working.
the alert into a console.log
see
$("#from_date").blur(function() {.....
// instead of
$(".from_date").blur(function() {.....
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