Setting default value in bootstrap datetimepicker results in NaN on popup - javascript

I am working on a project using Ruby + the Bootstrap framework, including the Bootstrap datetimepicker plugin.
I have a field in my form as thus:
<div class='datetimepicker-input input-group' id='logged_at'>
<input class='form-control' data-format='DD/MM/YYYY hh:mm A' name='logged_at' type='text' value='27/06/2014 05:08 PM'>
<span class='input-group-addon'>
<i class='fa fa-calendar'></i>
</span>
</input>
</div>
As you can see, I want my datetimepicker to use the DD/MM/YYYY hh:mm A formatting, however, when I enter a default date and time in the value attribute of the <INPUT> tag when generating the form, and then click on the calendar icon to pop up the picker, the picker window just gives me NaN in the heading and won't let me select a date or a time.
If however, I leave the value attribute blank when generating the form, the popup works just fine.
I have also noticed that if I type over the default date in the field, and swap the month and day around, i.e. asMM/DD/YYYY hh:mm A,the popup works fine, i.e. the calendar defaults to the right day, however when I choose a date, it displays in the input field as DD/MM/YYYY hh:mm A.
I am wondering if there is another way I have to set the default date/time in the field? Simply populating the value attribute seems to be confusing the plugin, as it appears to be wanting the initial date in mm/dd/yyyy..., but then happy to show it as dd/mm/yyyy... afterwards.

Ok, I think I have figured this one out. It appears to be related to moment.js which bootstrap-datetimepicker relies on for date parsing.
Without messing around with the language options, there was a line in bootstrap-datetimepicker.js (line 222) which had to be changed from:
if (dateStr) picker.date = moment(dateStr);
to
if (dateStr) picker.date = moment(dateStr, picker.format);
Basically we had to use the picker.format as the second parameter to force mention to parse the entered date using the supplied format that we had in the INPUT field.

Related

How to change the default time of the date input field to a fixed value

When we open any date input field it will show us the current date if the variable associated with the input field is null. Is there any way to configure the input field so that when we open the calendar popup instead of showing the current time it should show some other time, still keeping the value associated with the input field to be null
when it is initially loaded it should not display any value
When clicking on the calendar icon instead of showing current date (21/01/2022) it should be pointing some other configurable date (suppose 25/01/2022).
It might seem useless to achieve this, but i have to use this functionality in my task.
I think you could be looking for this:
from https://developer.mozilla.org:
You can set a default value for the input with a date inside the value attribute, like so:
<input type="date" value="2017-06-01">
If I understand correctly, you want a default value for the date picker.
Then this should do:
<input type="date" id="start" name="trip-start"
value="2018-07-22"
min="2018-01-01" max="2018-12-31">
source

I don't want datetimepicker setting default value on click

I have a text input to which I have applied a DateTimePicker plugin
But when I click on the input before opening the DateTimePicker, it sets default value as current date, I want the value to stay empty as long as the user selects it from the DateTimePicker.
$('.datepicker').datetimepicker({
format: 'DD/MM/YYYY',
});
The DateTimePicker Library which i am using is:
eonasdan.github.io/bootstrap-datetimepicker
I have mentioned the answer in the comments above but just posting it as an Answer for someone who might face the same issue in the future
Initialize the DateTimePicker with useCurrent as false as shown below:
$('.datepicker').datetimepicker({format: 'DD/MM/YYYY',useCurrent:false});

How to enable or allow user to manually enter the date in JQuery datepicker field?

I am building a webportal, where some of the text fields are date picker. When we click on datepicker, a date selection tab appears to select the date, but the field is not allowing to enter the date manually.
I require a way where the user can get both the option, select from date pop up or can enter manually.
Here is a simple code for same:
<input id="ae_point_2_date" placeholder="MM/DD/YYYY" class="fieldValue form-element hasDatepicker datePick datepickernew mandt">
Try this jquery example https://jqueryui.com/resources/demos/datepicker/default.html
you can enter the date manually like this
07/12/1993
You can find more information here -> https://jqueryui.com/datepicker/
I used this myself and I highly recommend it.

jQuery Datepicker .val() is blank however a date is displayed?

This is my first question.
I have looked for an answer but my searches seem to bring back a lot of ways to enforce the datepicker value is empty, or being able to access the selected value which is not an option here.
Background to the problem
I have a table with a dynamic amount of rows, each row contains a few datepickers (we'll call them A datepicker, B datepicker, C datepicker). It also contains a child row that is hidden until the 'Expand for more details' button is clicked, at which point there are a few more fields appearing. One of those fields is a 'Comments' field.
The requirement I have is that when the A datepicker is changed that a 'Comment' MUST be required to go along with that. I am able to tell when the datepicker is changed and therefore to send a message via the validator of the 'Comments' telling the user that it is now required.
The requirement
When entering details into the comments section, I need to be able to check if there is a date selected in the A datepicker so that we can dynamically warn the user that the comments section needs to be X many characters IF there is a date in the A datepicker.
The problem
It appears that when the jQuery datepicker is changed that the .value is not updated. When the row is populated it is possible that the A datepicker can be empty, not all fields require that particular date to be set and therefore not all 'Comment' fields need to be set either.
So I can tell when the datepicker is changed and get the 'Comments' field to be required. However a user can then fill out the 'Comments' field with a blank entry or enter a value that doesn't meet the X amount of characters limit. This behaviour is OK for when there is not a date selected. So when a date is selected I need to enforce the rule.
My problem is that I can't tell if a date is selected or not!
In the example below I had a blank datepicker, I then chose a date and opened developer tools. In the overview of the web page we can see that the date is set to 20th Jan 2018.
Overview of the web page
however through the developer tools we can see that the value is actually empty.
Datepicker value is set to ""
This behaviour is also true when the datepicker was not initially blank, rather than the value being the new date it still retains the old date. In the example below I changed the date from the 23rd of December 2017 to the 31st of December 2017.
Pre-Populated datepicker
And in developer tools the value is still set to the previous value.
Changed to new date
Technicalities
I am using MVC and jQuery, I am not looking for a solution that involves having to go back to the controller as that usually requires the user having to press a submit button and my requirement is that it needs to be able to respond upon selecting the date and entering comments. I'd just like a way to be able to get the displayed date from the datepicker and not it's previous value.
This matters because if it's going from previously having a date into now a blank date, it affects the requirement so that comments are no longer required as there isn't a date. Vice versa if going from a blank date to a selected date.
Things I have tried
I am trying to write this into the OnChange method of 'Comments', so that I can check if there is a date selected or not.
I have tried directly calling it in my .js file with the below. For option 4 and 5 it's contained in a .each loop that goes through ALL the rows in my table and finds the row relating to the 'Comments' field that was changed.
(Please note that parentRow refers to the selected table row which contains the dates (the row that contains the comments field is the child row)).
1) var dateValue = $(parentRow).find("input[name$='datepicker_A']").datepicker("getDate");
2) var dateValue = $(parentRow).find("input[name$='datepicker_A']").val();
3) var datepicker_A = document.getElementById('datepicker_A');
var dateValue = datepicker_A.val();
4) var dateValue = $.datepicker.parseDate("d/M/y", $(this).find("input[name$='datepicker_A']").val());
5) var dateValue = $(this).find("input[name$='datepicker_A']").val();
All of the above return the previous value of the datepicker and not the newly selected one. So my question is.. how do I get it to recognise the new value?
TL:DR
jQuery datepicker doesn't seem to change the .val() property of the input field when selecting a new date, instead the .val() is always the previous value. How can I access the new value via javascript/jQuery?
Your code should look something like this:
<div>
Select date: <input id="thedate" type="text" class="date-pick" />
</div>
And your JavaScript (I am using jQuery 1.9.1 with jQuery UI 1.9.2 here too)
$(function() {
$('.date-pick').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(dateText, inst) {
alert(dateText); // Put your code in here
}
});
});
Here's a JsFiddle

HTML 5 - Input type date formatting on iOS

I am using an HTML 5 form on an iPhone. This form has an input element like the following:
<input id="birthdate" type="date" />
When a user clicks this field, the iOS date picker appears. After a user selects a date, it puts the date in the field displayed as something like: Apr 14, 2012.
My question is, is there a way to format this date so that it looks like 04-14-2012 in the text box? Or, preferably, is there an straight forward approach to converting the iOS date format to a JavaScript Date object?
I always thought the format was meant to be YYYY-MM-DD.
W3C spec & RFC3339.
Anyway, you could convert it with JavaScript.
var dateInput = document.getElementById('birthdate');
dateInput.addEventListener('change', function() {
dateInput.value = new Date(dateInput.value).toISOString().split('T')[0];
}, false);
No.
There are two formats at play:
displayed format
internal format exposed to JavaScript and sent to the server
You cannot change the display format. It's up to the browser to decide how the date is presented to the user (in practice it's determined by system's locale).
You cannot change the internal format either. It's always ISO8601, regardless of browser/locale.
I agree with #PorneL's answer, however, you can potentially do some work to simulate the results you want. I will stipulate that it's not the best way to do it.
In pseudo code:
Have two inputs, one of type date and another of text.
Make the date input either invisible or 1px x 1px in side, and make the input the size that of the date that you would like
On focus on the text input, set focus on the adjacent date input automatically.
At this point, the user will be editing the date input field
On change of the date field, grab the value and insert it into the text field using whatever formatting you prefer.
Again, it may not be the best solution, but it can work this way.
The following should do it.
$dat = new DateTime($_POST['MyDATE']);
$new_format = $dat->format('Y-m-d');

Categories

Resources