I am using the Pikaday Data Picker. I am unable to override the default format to MM/DD/YYYY. I have included the Pikaday library and Moment.js but it still does not work.
<input id="datepicker" type="text" />
var picker = new Pikaday(
{
field: document.getElementById('datepicker'),
format : "MM/DD/YYYY",
firstDay: 1,
minDate: new Date('2000-01-01'),
maxDate: new Date(),
yearRange: [2000,2020]
});
Here is my fiddle:
http://jsfiddle.net/gfinzer/t046bqm2/2/
You are including moment.js after Pikaday — it needs to be the other way around.
<script type="application/javascript" src="moment.js"></script>
<script type="application/javascript" src="pikaday.js"></script>
(this code block is only here, because SO otherwise won't let me post the link to JSFiddle without it)
Updated example: http://jsfiddle.net/janfoeh/t046bqm2/3/
Related
I write a simple project in ASP.NET Core. I want a user to only pick Date and Hour without minutes part in datetime in view. I tried, but minute part is always shown and pickable! Any solution to not show minute part or disable it is acceptable.
This is what I wrote in the view model:
[DisplayFormat(ApplyFormatInEditMode = true,ConvertEmptyStringToNull =false,
DataFormatString = "{0:yyyy-MM-dd HH}")]
public DateTime StartDate { get; set; }
View is a get:
<input type="datetime-local" asp-for="StartDate" name="StartDate" id="StartDate" data-date-format="{0:yyyy-MM-dd HH}" asp-format="{0:yyyy-MM-dd HH}" class="form-control" />
Any solution to not show minute part or disable it is acceptable.
If you are using browser default datepicker widget as the screenshot you shared, which seems not enable us to customize and disable minute picker part within that default datepicker widget.
If possible, you can try to use some jQuery datepicker widget to achieving the requirement, like below.
<div class="input-append date form_datetime">
<input type="text" asp-for="StartDate" id="StartDate" class="form-control" readonly />
<span class="add-on"><i class="icon-th"></i></span>
</div>
Required references and js code
<link rel="stylesheet" href="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css" />
<script src="https://www.malot.fr/bootstrap-datetimepicker/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
<script>
$(function () {
$(".form_datetime").datetimepicker({
format: "yyyy-MM-dd HH:00",
minView:1,
autoclose:true
});
})
</script>
Test Result
The date tag in HTML5 (<input type="date">) always sends data in YYYY-MM-DD format, disregarding what format users might be using. That's great, but browser's default controls are usually ugly.
So, I'm trying to use bootstrap-datepicker to help users choosing dates. I launch it like this, and it opens correctly:
$('#expirationDate').datepicker({
format: "dd.mm.yyyy"
});
Unfortunately, bootstrap-datepicker seems to send to the server the chosen date in user's format (ie. DD/MM/YYYY). This is obviously a problem, since users might have different preferences.
Is bootstrap-datepicker capable of sending data in "YYYY-MM-DD" format, disregarding user's local format? To me, that's "common-sense" functionality, but I didn't find any documentation about it.
If the answer to above question is "no", can you please recommend another date picker that integrates well with Symfony 3 and Twig?
In PHP
mysql database needs date format in Y-m-d format so in case to insert this date format in the database you will need to change the date format that comes from datepicker.
Example:
$mydate = date("Y-m-d", strtotime($_POST['date']));
$("#Date").datepicker({
autoclose:true,
orientation: "bottom",
format: "dd-mm-yyyy"
})
$("#Date2").datepicker({
autoclose:true,
orientation: "bottom",
format: "yyyy-mm-dd"
})
$("#Date3").datepicker({
autoclose:true,
orientation: "bottom",
format: "yyyy-M-dd"
})
$("#Date4").datepicker({
autoclose:true,
orientation: "bottom",
format: "dd-M-yyyy"
})
$("#Date5").datepicker({
autoclose:true,
orientation: "bottom",
format: "dd/M/yyyy"
})
$("#Date6").datepicker({
autoclose:true,
orientation: "bottom",
format: "yyyy/M/dd"
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
1) dd-mm-yyyy : <input type="text" id="Date" placeholder="01-12-2016" />
<br><br>
2) yyyy-mm-dd : <input type="text" id="Date2" placeholder="2016-12-01" />
<br><br>
3) yyyy-M-dd : <input type="text" id="Date3" placeholder="2016-Dec-01" />
<br><br>
4) dd-M-yyyy : <input type="text" id="Date4" placeholder="01-Dec-2016" />
<br><br>
5) dd/M/yyyy : <input type="text" id="Date5" placeholder="01/Dec/2016" />
<br><br>
6) yyyy/M/dd : <input type="text" id="Date6" placeholder="2016/Dec/01" />
It seems that it is not possible without javascript or php processing. That's pretty sad, as this is a really common situation.
My solution was to use JQuery UI instead of bootstrap-datepicker. I created two fields:
a hidden field that stores the date in YYYY-MM-DD and whose value is processed in backend
a visible field that is used by DatePicker but it is not processed by backend.
On the second field, I used altField and altFormat to populate the first field:
$(function () {
$("#theDateUI").datepicker({
dateFormat: "dd.mm.yy",
altField: $("#theDate"),
altFormat: "yy-mm-dd"
});
});
inside the page which is belong to other model and here I need only one input which should have date picker. I don't want I select type in model but here in html, is there any helper or library?
You just have to add required jQuery files or libraries as below for jQuery DatePicker: (If you are using bundling in ASP.NET MVC, then use the following. By the way, bundling means to add all jQuery or CSS files in a single class for optimization)
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",
"~/Content/jquery-ui.css"));
Or simply without bundling, you can do the following as well:
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
In the head section:
<script >
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Then finally:
<p>Date: <input type="text" id="datepicker" /></p>
For more, you can check the below links:
Sample-jQuery-DatePicker-01
jQuery-Plugin-Samples
Sample-jQuery-DatePicker-02
I am new to struts. Iam developing applcation using struts.Can anyone help in the code for fullcalendar in struts with database ?
Sure just populate your bean with your json to populate the calendar. Then use a define tag on the page and use it to populate your calendar. Here is a simple example.
<bean:define id="calendarJson" name="formName" property="bean.calendarJson" />
<script>
$(document).ready(function() {
$('#calendar').fullCalendar(
<%= calendarJson %>
);
});
</script>
<div id="calendar" class="myFullCalendar"></div>
I am new to handlebars.js and I started to play around with it. However I am already stuck could you please explain what I am doing wrong?
This is in the head tag:
<script id="header" type="text/x-handlebars-template">
<div> {{ headerTitle }} </div>
Today is {{weekDay}}
</script>
and this in the body:
<script>
var theData = {headerTitle:"Shop Page", weekDay:"Wednesday"};
var theTemplateScript = $("#header").html();
var theTemplate = Handlebars.compile (theTemplateScript);
$(document).append (theTemplate (theData));
</script>
The page suppose to return the following:
Shop Page
Today is Wednesday
The template works, you just need to append the generated markup to an element.
$("body").append(theTemplate(theData));