Develop Reference

Gradually hide placeholder for datepicker value

I want to try to implement a gradually hidden placeholder on my following datepicker:
<b-input-group class="input-datepicker">
<b-input-group-prepend>
<b-datepicker
v-model="datepicker"
button-only
locale="en-US"
></b-datepicker>
</b-input-group-prepend>
<b-input
v-model="datepicker"
type="text"
placeholder="YYYY-MM-DD"
autocomplete="off"
class="mr-0"
></b-input>
</b-input-group>
I use Vuejs with bootstrap-vue and my date Format is YYYY-MM-DD
I wish to have, for example, on input field at beginning ____-__-__ and we gradually input data, we have for example 2020-__-__ or 2020-0_-__ and reversely
I have searched in Internet and i don't find any good answers.
Sorry for my English if is not correct, i'm french
Thank you in advance
Best Regards,

Input from user without the <input> tag

i need to get an input from user, for instance his name, but the user won't be able to edit his name, like in a text box. This is what i'm using right now:
<input id="number_input" type="text" size="12" maxlength="19" />
In order to write or edit his name the user will use already existing buttons. Just like in a calculator. How can i achieve this in html??
Thanks.

I would probably consider using this: http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-keyboard-with-css-and-jquery/
DEMO HERE

Validation with specfic input types generated from an XML

I am in the midst of trying to come up with the best way for some validation within a generic MVC based XML which outputs the following.
<input name="xxxx" value="xxxx" ValidationType="Email" IsRequired="True" />
Basically if things contain certain elements, we validate it, if it's required than we do, if not, we don't etc etc. I tried some things but it seems the best way to do this would be a the JQuery "contains" method. I also know that that "ValidationType" is not really a valid attribute of input, but the XML outputs it this way. Any feedback would be appreciated. Thanks. I'm trying to do this as non complicated as possible :)

I would recommend using jquery validate plugin. You can validated elements with class-based attributes and add custom validation if need be. for example, should you need an input required. The output would look like this.
<input name="xxxx" value="xxxx" class="required" />
for email validation you can use
<input name="xxxx" value="xxxx" class="required email" />
Then execute the .valid() function to validated

Need Date/Time Picker with specific functions

I've looked around, and I do see previous questions where people ask about Date/Time pickers; unfortunately none of those threads matched my specific needs. I see a lot of people recommending Any+Time as well, but it seems a little "heavy" and I'm looking for lightweight.
Basically, I have the need for a date/time picker for "events". The event-search picker here (http://jqueryui.com/demos/datepicker/#event-search) is very nice, but it doesn't handle time. My form is built on jQuery, so I'm okay with using that.
Must be able to select both date and time
End time form should be hidden until the start time is selected.
After the start time is selected, end time should automatically be set for 6 hours later
Should not be able to select an end time that takes place before the start time
Should be able to handle timezones, and default to the user's current timezone
Should be able to send out a UTC timestamp (I will store in a hidden field; ex: 1291004863)
Your recommendations are appreciated... I dont know much about Javascript.

I would try extending the jQuery UI datepicker with the modifications made on the following page:
http://addyosmani.com/blog/the-missing-date-time-selector-for-jquery-ui/
The jQuery UI event search example code would only need the new parameters added as to make it work.
Hope that helps!
Edit:
Example code for datepicker range (using code from link above):
-HTML-
<p>
<label for="from">From:</label> <input class="datetime" type="text" name="from" id="from" value="" />
<label for="to">To:</label> <input class="datetime" type="text" name="to" id="to" value="" />
</p>
-js-
$(function() {
$('.datetime').datepicker({
duration: '',
showTime: true,
constrainInput: false
});
});
Here's a link to see in action:
http://bit.ly/hZTR84

HTML Select and Text Input

We have all seen countless instances of forms with a select drop down having one of it's options as "Other" and on choosing that option, we get to see a input text box (which was hidden all along) asking us to type in our input.
Is there a better way to implement this? Are there plugins out there which will let me do this better? Or are standard HTML elements suffice (some setting to a select tag, may be) ?

You could use datalist. Example:
<input list="cookies" placeholder="Type of Cookie"/>
<datalist id="cookies">
<option value="Chocolate Chip"/>
<option value="Peanut Butter"/>
<option value="Raisin Oatmeal"/>
</datalist>
Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/
This gives the user the ability to select from a list of cookies and, if the type of cookie they seek is not found in the list, enter their own.
My only beef with it in your situation is that it may not be immediately obvious to the user they can use it as a drop down. But that could be easily remedied with a little bit of css.

An editable combobox might be a good alternative. The challenge is to style it in such a way that it is clear to the user that he can actually edit the contents of the control, rather than only selecting the provided default contents.

That's a fairly common way to design a form both on paper and on the web.
I'm not quite sure exactly what you mean with a better way to do so...
If you're worried about the hidden field not appearing if the user has javascript disabled, I'll suggest you hide the field using javascript or have a duplicate "If other please specify" text area in a noscript block:
<select><!-- implemented something like rahul showed -->
<noscript>
<label for="ifOtherInput">If other please specify</label>
<input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
<!-- Here we know the user selected other so we can just have this label: -->
<label for="ifOtherInputJs">Please specify</label>
<input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>
The backend must handle that the input in the noscript block may be missing. Or you could add the javascript version of the input to the page of the input using javascript (so both cannot possibly appear simultaniously so that they can have the same name.