Develop Reference

Disable Previous Dates in Datepicker with Javascript

I Am Kinda New in Javascript and I want to Disable Previous Dates from Today
I used this code to display Datepicker
<input type="text" onfocus="(this.type='date')" id="leaveTo" name="leaveTo" placeholder="DD-MM-YYYY" style="width:fit-content;">

If I got your question right, you need to make some dates to be unselectable.
That can be done by using max, min attributes.
For more information take a look: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#Additional_attributes
<input type="date" min="2020-12-23">

Select new input to fire flatpickr

I have a date picker that when I choose a new date I wish to fire another date picker on another input
Input one:
<input name="pDate" type="text" class="form-control date-with-time-inputs" onchange="changeDate()" id="p_date" placeholder="" value="{{$times['now']}}">
Then I have onchange event
<script>
function changeDate() {
const input = document.getElementById('d_date');
input.select();
console.log('clicked');
}
</script>
And then the second input as so
<input name="dDate" type="date" class="form-control date-with-time-inputs" id="d_date" placeholder="" value="{{$times['tomorrow']}}">
The console log fires and the function is working but the 2nd input is not firing up.

You can't open/click() it from JS(only focus() but that would not help you):
The HTML5 <input> with type='date' will only work with a few browsers.
Also, as a programmer you have no control over its appearance or any
other aspect (such as showing and hiding it) (Quick FAQs on input type date)
Thus, if you must do this, the HTML5 <input type='date'> tag is not an
option. You'll have to use something build in JavaScript such as
jQuery UI or Bootstrap date picker.
Found here: https://stackoverflow.com/a/18327043/12753766

date format of textfield using java script and php

i am making a form that has a date field using textfield, i want my date field to have a label format inside the textfield, here's the picture:
after clicking on the textfield the format will be erased and the hyphen will remain like this picture:
i already made the code for the label format,
here's my code:
<input type="text" name="date" value="DD_MM_YYYY" id="date" style="width:180px" onclick="if(this.value=='DD_MM_YYYY'){this.value=''}" />
</p>
My problem now is the hypen that will remain after clicking the textfield.
Anyone knows how to do that?
Thanks in advance.

I would recommend Masked Input Plugin.
http://digitalbush.com/projects/masked-input-plugin/
You can define your own type of mask by using the code:
jQuery(function($){
$("#myinput").mask("99-99-9999",{placeholder:" "});
});
Then you can define a placeholder to the input:
<input id='myinput' placeholder='dd-mm-yyyy'>

You can use the placeholder attribute.
<input placeholder=" - - " value="DD-MM-YYYY" />
You can continue to set the value to nothing when the element is focused. On blur set the value back to DD-MM-YYYY.
Note that this attribute isn't supported by all browsers.

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

How to block writing in input text?

I just creating a booking system and I want that the users will choose a date from the calender and it'll show in input text - that I did!
Now I want to block the writing in the input text (just bring to calender writes there when the user choose a date).
How do I do it? I guess JavaScript, but how? I dont know JS very wall..
Thank you very much!

Give your element the readonly attribute, this will disallow users to type anything into it. However, you will still be able to write to add through javascript for example when a date is chosen. Here is an example:
<input type="text" id="txt" readonly="readonly">
JavaScript:
var el = document.getElementById('txt');
el.value = "Testing......";
Working Demo

<input type="text" id="someId" disabled="disabled" />
The disabled property will prevent any user input, but you can still write to it via your javascript calendar method.

For those who wants to prevent typing but not having the disabled style, can try:
<input type="text" onkeypress="return false;"/>