How to implement input click select range - javascript

see my gif, I hope custom input type=datatime-local time format to "yy-mm-dd", so I hope impl datetime input similar click event, when click input value, select specific range, how to impl

There is a the same question:
Is there any way to change input type="date" format?

Related

Jquery. Detect changes on input type 'date'

on the mobile version of my site I am using input type=date instead of a jquery datepicker to allow for use of the devices inbuilt datepicker as it's generally much quicker and easier to use.
I am trying to detect when 1 date field has a value inputted/changed, to then update the min date attribute of a second datefield, and , submit the form using ajax.
I cannot correctly detect the input or change.
$('#mob-gig-date-gteq').blur(function() {
var date = $("#mob-gig-date-gteq").val();
console.log(date)
$(this).closest("form").submit();
});
(Using .change yields the same results)
If I select a date here nothing happens. On the computer if I select a date, press enter on one of the inputs (day/month/year) and THEN change the date again, the code fires.
On mobile nothing happens at all.
How can I detect the input change on a date field?
Thanks.
Try the jquery .change method. Blur will only fire when the input loses focus.
$('#mob-gig-date-gteq').change(function() {
var date = $(this).val();
console.log(date, 'change')
});
Code pen tested in chrome

Something like input type date

I need something like input type='date' when i'm clicking the input on mobile to appear the specific datepicker from phone.. Example for iphone
But I want to display the date how I want.. Exactly what I need is to display the date like this: dd/mm/yy
You can try this HTML5 tag:
<input type="date" value="YYYY-MM-DD"/>
where you can set "value" as the default date.
You can also use min="YYYY-MM-DD" and max="YYYY-MM-DD" for maximum and minimum dates.
and as for the mask "DD/MM/YYYY", I recommend using bootstrap-datepicker, where you can have tons of options to mask as you want.

dhtmlx calendar selecting time doesn't change input field

I'm using the dhtmlx calendar to select the date and time. But there's a problem when it comes to selecting the time, the user has to select the date again to 'confirm' the change in time. This is not a normal user behaviour. Is there any way to change the input field straight away when the user selects the time?
There's a onTimeChange method and onChange method but I can't seem to put the changed time into the input field.
Please, try to use the following code:
myCalendar.attachEvent("onTimeChange", function(d){
myCalendar.setDate(d);
myCalendar._updateInp();
});

Disabling the datepicker updates the date in input

Given an input, I initialise a datepicker and all is well. Note, however, that the value in the input is outside the allowed date range in the datepicker initialisation. The behaviour is as I expect: date picker will allow the date to be changed to something in the allowed range.
Then, I set the option "disabled" on the datepicker and it updates the value in the input (to the maximum value allowed in the datepicker initialisation).
Here is an example: http://jsfiddle.net/smrunjgm/4/
Is there a way to prevent option "disabled" from changing the value in the input?
Call the on blur event on the input
$("#date1").blur(function() {
$("#date1").datepicker( "option", "disabled", false);
});
JSFIDDLE

Setting the default date on jquery datepicker without populating the underlying input field

If I do:
$datePicker.datepicker('setDate', null);
the underlying input field does not get set to any specific date, but the datepicker widget selects the current date automatically.
jsfiddle
If I try:
$datePicker.datepicker('setDate', "01-01-2014");
it will populate the date field. The same goes for setting defaultDate on the datepicker options.
jsfiddle
Is there any way to set the widget to a date without having the field populated?
I updated your JSFiddle to work with a textbox rather than a div.
As per jqueryui documentation:
defaultDateType: Date or Number or String
Default: null
Set the date to highlight on first opening if the field is blank.
Which means:
$('#date').datepicker({ defaultDate: '01/01/2015' });

Categories