I am running an Ajax call to get places available for a certain date.
I can get that date fairly comfortably with the following code :
$('.booking-date').datepicker(
{
beforeShowDay: enableAllTheseDays,
numberOfMonths: 2,
dateFormat: 'DD, d MM, yy',
showButtonPanel: true,
onSelect: function(dateText, inst) { }
}
I know the dateFormat is there, but I ideally want that to be in a nice neat format for the end user, Which produces something like : Sunday, 28 July, 2013
If I can switch the DateFormat for the dateText variable to a MySQL friendly date that would be even better.
Hope someone can help
Cheers
Solved by creating the following :
onSelect: function()
{
var dateText = $.datepicker.formatDate("yy-mm-dd", $(this).datepicker("getDate"));
$('.date_hidden').html(dateText);
}
Related
I have to set the datepicker date format like dateFormat: "yy-mm-dd", and this is because I am getting data from database in this format. Now I want to display any changes of datepicker in this format 'DD, d MM, yy' what I did was
onSelect: function(){
var formattedDate = $('#datepicker').datepicker({ dateFormat: 'DD, d MM, yy' }).val();
alert(formattedDate);
}
but the datepicker still returning the data in "yy-mm-dd" format. How can I fix this?
Demo
You just need to use the utility function:
$.datepicker.formatDate( format, date, options )
$.datepicker.parseDate( format, value, options )
See more: https://api.jqueryui.com/datepicker/
Working example: http://jsfiddle.net/Twisty/1ku4wLzf/5/
JavaScript
$("#datepicker").datepicker({
dateFormat: "yy-mm-dd",
minDate: 0,
maxDate: new Date('2019-10-31'),
onSelect: function(dStr, obj) {
var dt = $.datepicker.parseDate("yy-mm-dd", dStr);
var fdt = $.datepicker.formatDate("DD, d MM, yy", dt);
alert(fdt);
}
});
I have implemented a bootstrap datepicker for policy start, so that I want to show user to select dates from current month and next month only.
Can anyone tell me how is it possible in bootstrap datepicker?
$(".policy-start-dp").datepicker({
});
You need to set the minimum and maximum values of the date picker
//Get Current Date
var date = new Date();
//Create Variable for first day of current month
var firstDay = new Date(date.getFullYear(), date.getMonth(), 1);
//Create variable for last day of next month
var lastDay = new Date(date.getFullYear(), date.getMonth() + 2, 0);
$( "#datepicker" ).datepicker({
minDate: firstDay,
maxDate: lastDay
});
Hope that helps :)
no need to set start and end date just pust the "startDate" code is below.
var changeDateFormat = () => {
if ($(fileMonths).parent().parent().hasClass('sandbox-container')) {
$('#fileMonths').datepicker({
autoclose: true,
minViewMode: 1,
startDate: '0m',
format: "mm/yyyy"
});
}
};
date picker months
I am using below code to create anchor tag
#if (Model.History != null && Model.History.Count > 0)
{
foreach (var item in Model.History)
{
#item.Id - #item.Name - #item.CreatedOn
}
}
else
{
No Previous History Found
}
I want to apply date format as June 27, 2017 9:46 PM to #item.CreatedOn
I would like to use moment.js as well for showing local time.
Someone please help me.
The format you're looking for is: MMMM dd, yyyy hh:mm tt
In your example, just write:
#item.CreatedOn.ToString("MMMM dd, yyyy hh:mm tt")
The result for today will be: June 22, 2017 02:40 PM
You can use ToString("u", System.Globalization.CultureInfo.InvariantCulture)
to format your date with moment.js like following. "u" corresponds one of format specifier types. İf you are creating a moment from a string, you should check if the string matches known ISO 8601 formats.
.Net Format Specifier Reference: https://learn.microsoft.com/en-us/dotnet/standard/base-types/standard-date-and-time-format-strings#Sortable
.Moment Format Reference: http://momentjs.com/docs/#/displaying/format/
foreach (var item in Model.History)
{
#*displays like 2008-04-10 13:30:00Z*#
<a data-utc="#item.startDate.ToString("s", System.Globalization.CultureInfo.InvariantCulture)"
href="#Url.Action("Process", new {item.Id})"
class="list-group-item">#item.Id - #item.Name - #item.CreatedOn</a>
}
jquery with moment.js
<script type="text/javascript">
$(function () {
$('[data-utc]').each(function () {
var d = moment($(this).attr('data-utc'));
$(this).html(d.format());
});
});
</script>
I am using the Grails plugin, http://grails.org/plugin/jquery-date-time-picker
The date and datetime plugin works perfectly well. However, just time has an issue.
I tried to use time only for the datetimepicker. My Config.grovy is as below.
jqueryDateTimePicker {
format {
java {
datetime = "dd/MM/yyyy HH:mm"
date = "dd/MM/yyyy"
}
picker {
date = "'dd/mm/yy'"
time = "'hh:mm tt'"
}
}
}
My GSP code is something like.
<jqueryPicker:time name="openFrom" id="openFrom" value="${addressInstance?.openFrom}" pickerOptions="[dateFormat: '', timeOnly: true, hourGrid: '4', minuteGrid: '15', timeFormat: 'hh:mm tt']"/>
My Controller is
def addressInstance = new Address(params)
Here in the controller, i can see the params having the time as "7:00 am" but it never gets set in the addressInstance, i believe cause the date is missing.
The default Date binding takes the general date format as yyyy-MM-dd hh:mm:ss.S.
In order to to bind openForm date to addressInstance, you can explicitly set it as:
//where params.openForm is String like "7:00 AM"
addressInstance.openForm = Date.parse("h:mm a", params.openFrom)
Date.parse() parses the string as current format to return a Date object. In the aboved case(where you are only concerned about the time), you would end up with the epoch (Jan 1, 1970) with time as 7 AM.
def date = Date.parse("h:mm a", "7:00 AM")
//prints Thu Jan 01 07:00:00 EST 1970
//To get the time string from the date stored in db
date.format("h:mm a") //Prints 7:00 AM
You can also see if you can register a Custom property Editor as shown here to auto bind the date with customized format. You would not like to follow this if you do not want to apply the format to all date strings. In that case, I think the former approach will be useful and easy.
Currently this code is working but not as expected:
$("#start_date").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(_date, _datepicker)
{
var myDate = new Date(_date);
myDate.setDate(myDate.getDate()+8);
$('#estimated_hatching_date').text(myDate);
alert( myDate);
}
});
The first issue is, how the date is presented. Currently that code above alerts Fri Oct 01 2010 17:00:00 GMT-0700 (Pacific Daylight Time). I would like the output to be just the date, for example, 09/06/2010.
The second issue is, $('#estimated_hatching_date').text(myDate); does not change the text. When that code is fired nothing is changed. However if I do: $('#estimated_hatching_date').text('myDate'); myDate is placed into the #estimated_hatching_date div.
So, how do I just output the date and replace the "text" inside of #estimated_hatching_date div with just the date +7 days from when a date is selected?
Thank You,
Rich
jQuery UI Datepicker has a built in formatDate function. Please #dottedquad, don't use your self-made version, date math and formatting is harder than you imagine. The corner cases will make you tear your hair out.
onSelect: function(_date, _datepicker) {
var myDate = new Date(_date);
var myText = $.datepicker.formatDate('dd-mm-yy',myDate);
alert(myText);
}
I read over the ui datepicker manual again and figured it out.
$("#start_date").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(_date, _datepicker)
{
var myDate = new Date(_date);
myDate.setDate(myDate.getDate()+8);
var fullYear = myDate.getFullYear();
var month = ((myDate.getMonth()+1) < 10) ? ('0' + (myDate.getMonth()+1)) : myDate.getMonth()+1;
var day = (myDate.getDate() < 10) ? ('0' + myDate.getDate()) : myDate.getDate();
var myNewDate = fullYear + '-' + day + '-' + month;
$('#estimated_hatching_date').text(myNewDate);
alert(myNewDate);
}
});
That code works as expected. Anyone else have any more ideas that would get that job done differently?
-Thank You,
Rich
I had the same problem and used "altField" option with a hidden input. Hidden input's value is always formatted according to "dateFormat"