I'm currently retrieving data from a database over an API. The data comes back in this format:
2016-10-12T08:00:00
I would like to display the time portion of this in a time input field with AM and PM on my current webpage.
I have the following input:
<input type="time" name="StartTime" class="form-control" />
When the ajax call finishes successfully to the api i do the following:
$("#group-management #EditGroupModal [name=StartTime]").val(data.startTime);
data.StartTime is of course the string of datetime text seen above.
Which currently does not set the value of the time input on the page. I'm guessing it is because there is some formatting issue. I would like to parse the text string seen above and put it into the form field on the front end, but I am unsure of how to go about doing it. I have tried playing around with the Date object but no luck.
The time input only accepts a time as a valid value, as in 08:00:00
You can split your string, and pop of the time
var data = {startTime : "2016-10-12T08:00:00"}
var time = data.startTime.split('T').pop();
$("[name=StartTime]").val(time);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="time" name="StartTime" class="form-control" />
Use http://momentjs.com/
$(()=>{
$('#StartTime').val(moment('2016-10-12T08:00:00').format('HH:mm:ss'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.js"></script>
<input type="time" name="StartTime" id='StartTime' class="form-control" />
Maybe like this?:
var date = new Date('2016-10-12T08:00:00'); // replace the hardcoded time with your return value from Ajax call
$("#group-management #EditGroupModal [name=StartTime]").val(date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds());
Related
I have this input that I am using for dates.
<input id="txtsdate" class="form-control" type="text">
<script>
$('#txtsdate').data('datepicker').setStartDate(new Date(TimezoneDate()));
$('#txtsdate').data('datepicker').setEndDate(Infinity);
$('#txtsdate').data('datepicker').setDate(sFulllDate);
</script>
until this point my code works well and i set normally the date. But when i try to get the date from the input and i am using
var sDate = $('#txtsdate').data('datepicker').getDate();
am getting 'Invalid Date'.
I have read this article https://github.com/uxsolutions/bootstrap-datepicker/issues/923
but doesn't seems to help me.
Try This Simply code to get input value of any text box using jquery
var sDate = $("#txtsdate").val();
I have a form with datetime_local html5 datetime input so that mobile users can use their native datetime picker instead of a jquery substitute which is generally clunkier.
I want the user to be able to select multiple dates.
So far I'm using the onchange trigger to capture the selected datetime and add it to an array. I then try and paste the array into the datetime input so it can be sent with the form.
With one date, it pastes fine, with more than one the input goes blank.
var datearray = [];
$(document).on('change','#mobile_gig_date',function(){
var date = $("#mobile_gig_date").val();
datearray.push(date);
console.log(datearray.join('; '))
$("#mobile_gig_date").val(datearray);
});
The HTML element is;
<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">
Is there a way to add an array to a datetime input, and if so, in what format?
Since your input has the type datetime-local you can't put inside something that is not of that type.
Note that you also tried to put array inside an input - and you can't do this (what you can do is convert your array to string using JSON.stringify and use that value).
I added another hidden input and used it to save the data of your array.
var datearray = [];
$(document).on('change','#mobile_gig_date',function(){
var date = $("#mobile_gig_date").val();
datearray.push(date);
console.log(datearray.join('; '))
$("#mobile_gig_date_temp").val(JSON.stringify(datearray));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input min="2017-09-01T00:00:00" discard_seconds="true" placeholder="Enter the gig date" id="mobile_gig_date" type="datetime-local" name="gig[date]">
<input type="hidden" value="" name="gig[date_temp]" id="mobile_gig_date_temp" />
I have a problem. I use a date picker in my html page which I want to get value of input date using jquery. I used this :
var birthday_date = $("#birthday_date").val();
but it's not working. I checked the inspect code then realise when I used date picker, the input tag (which used for date) becomes to this :
<input id="textbox1"
name="birthday_date"
data-targetselector="#textbox1"
class="form-control"
data-mddatetimepicker="true"
placeholder="year/month/day"
data-placement="top"
maxlength="10"
data-mdpdatetimepicker=""
data-trigger="click"
data-enabletimepicker="false"
data-mdformat="yyyy/MM/dd"
data-mdpdatetimepickerselecteddatetime="
{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
data-original-title=""
title=""
data-mdpdatetimepickershowing="true"
aria-describedby="popover30621"
type="text">
the value of the date is this part:
mdpdatetimepickerselecteddatetime="{"Year":2011,"Month":8,"Day":2,"Hour":9,"Minute":13,"Second":14}"
the time is not matter, I just wanna date , google gave me nothing and I have no idea how can I get the value like this, any help? or something to help me?
If you are using datepicker, you can access the value like this:
var date = $('#textbox1').datepicker('getDate');
I am populating a hidden field with a UTC date/time value from a database. I am then using some jQuery and the moment library to convert the UTC date to local time and set the default date of a eonasdan-datetimepicker. I am also using the dp.change event of eonasdan-datetimepicker to convert dates that are picked via the widget back to UTC to bind back to the database via the hidden field. Here is my javascript - this works, but I do not like it.
$(".datepicker").each(function (index) {
var utcDateTime = moment.utc($("#" + $(this).data("utc-target")).val(), "MM/DD/YYYY h:mm A");
var localDateTime = moment.utc(utcDateTime).local().format("MM/DD/YYYY h:mm A");
$(this).find(">:first-child").val(localDateTime);
}).datetimepicker({
useCurrent: false,
}).on("dp.change", function (e) {
$("#" + $(this).data("utc-target")).val(moment.utc(e.date).format("MM/DD/YYYY h:mm A"));
});
HTML:
<label for="PublishedField">Date/Time Published</label>
<div class="input-group date datepicker" data-utc-target="PublishedUtcField">
<input name="PublishedField" type="text" id="PublishedField" class="form-control" />
<span class="input-group-addon"><span class="fa fa-calendar"> </span></span>
</div>
<input type="hidden" name="PublishedUtcField" id="PublishedUtcField" value="4/10/2015 5:16:00 PM" />
While this works, I'm not a fan of the each loop to set the initial value of the datetimepicker. I feel as though it would be cleaner to set it via the defaultDate property, but I am unable to set that property using an anonymous function. I think a dp.initialize or dp.setup event would be a nice solution, but the library does not support something like that, as far as I can tell. This could also be done using some kind of placeholder functionality, but I cannot find any similar scenarios in the docs or on GitHub.
Anybody know of a better way to do this? Is this kind of scenario supported somehow in a way I'm just not seeing or aware of? Am I missing something obvious?
I am using the jQuery date picker calendar in a form. Once submitted the form passes params along via the url to a third party site. Everything works fine, except for one thing.
If the value inserted into the date field by the datepicker calendar is subsequently deleted, or if the default date, that is in the form on page load, is deleted and the form is submitted I get the following error:
"Conversion from string "" to type 'Date' is not valid."
The solution to my problem is really simple, I want to validate the text field where the date is submitted and send out a default date (current date) if the field is empty for any reason. The problem is I am terrible at Javascript and cannot figure out how to do this.
Here is the form code for my date field.
[var('default_date' = date)]
<input type="text" id="datepicker" name="txtdate" value="[$default_date]" onfocus="if (this.value == '[$default_date]') this.value = '';" onchange="form.BeginDate.value = this.value; form.EndDate.value = this.value;" />
<input type="hidden" name="BeginDate" value="[$default_date]"/>
<input type="hidden" name="EndDate" value="[$default_date]"/>
This is really old and probably solved, but what the heck.
Simplest way to do this is to add a little more javascript to the input's onchange event.
onchange="if( this.value.length > 0 ) { form.BeginDate.value = form.EndDate.value = this.value; } else { form.BeginDate.value = form.EndDate.value = '[$default_date]'; } " />
of course their are still all sorts of other problems associated with date validation, but this is a straightforward way to check for a blank value and return a default based on your current code structure.