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"
});
});
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
I'm writing a fun little project to build up my HTML/JS skills. I'm using Handlebars to render some forms, and I hit something I can't seem to get around.
I've registered this as a partial template named 'checkbox':
<label>
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true">
{{labelText}}
</label>
That did me well when I was making forms to add data, but now I'm making forms to edit data, so I want to make the checkbox checked if the current item already is checked. I can't figure out how to make this work.
The first thing I tried was something like this:
<label>
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
checked="{{isChecked}}">
{{labelText}}
</label>
But if I pass that values like isChecked=true I get a checked box every time, because I guess for that kind of attribute in HTML being present at all means 'true'. OK.
So I tried using the if helper:
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
{{#if isChecked}}checked{{/if}}>
{{labelText}}
This sort of works. If I omit the isChecked property entirely, the box is unchecked. If I hard-code a true or false value like this, it works:
{{> checkbox id="test" labelText="test" isChecked=true }}
But I can't seem to get what I want with a value there. For example, if I try:
{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}
It seems like the condition isn't properly being resolved because I always get the attribute in that case.
What am I missing? I feel like there should be a way to do this, but I'm running out of tricks.
You cannot put an expression inside of another expression:
{{> checkbox id="test" labelText="test" isChecked="{{someCondition}}" }}
From examples you wrote I assume the problem you are having is related to how you pass the context - id and labelText are hardcoded while isChecked is expected to be a variable of some sort. In reality all those should be variables. Consider the following example - HTML:
<div id="content"></div>
<script id="parent-template" type="text/x-handlebars-template">
{{#each checkboxes}}
{{> checkbox this }}<br>
{{/each}}
</script>
<script id="partial-template" type="text/x-handlebars-template">
<input
type="checkbox"
id="{{id}}"
name="{{id}}"
value="true"
{{#if isChecked}}checked{{/if}}>
{{labelText}}
</script>
JS:
var parentTemplate = Handlebars.compile($("#parent-template").html());
Handlebars.registerPartial({
checkbox: Handlebars.compile($("#partial-template").html())
});
$('#content').html(parentTemplate(
{checkboxes: [
{id: 1, labelText: "test 1", isChecked: true},
{id: 2, labelText: "test 2", isChecked: false},
]}
));
I have the following structure on wordpress:
<form method="post" action="https://gateway.payulatam.com/ppp-web-gateway/pb.zul" accept-charset="UTF-8">
<...>
<input name="amount" type="hidden" value="5000.00"/>
<...>
</form>
I need to change the value of the input name amount dinamically..
I have a variable that displays my price:
<span class="tourmaster-tour-booking-bar-total-price">$1,745,000</span>
But the "tourmaster-tour-booking-bar-total-price" changes in some web pages.
I want to read the "tourmaster-tour-booking-bar-total-price" variable and give this variable to the 'value' in my input amount.
Thank you very much!
I've been struggling with this. Please take a moment to help me, I'll appreciate
You can do this easily using jquery!
$(document).ready(function() {
var formPrice = $('.tourmaster-tour-booking-bar-total-price').html().replace(/[$,]/g, '');
$('form #input-price').val(formPrice);
});
I use react-datetime
let date = component.props.data.value;
return <div className={'datetime'}>
<Datetime locale="ru"
value={date}
onChange={setFilter}
closeOnSelect={true}
dateFormat='YYYY-MM-DD'
timeFormat='HH:mm'
inputProps={{ type: 'datetime-local' }}
/>
</div>;
so when I choose any date and time, I get value like value:
"2018-05-01 12:00". But input with type="datetime-local" requires yyyy-MM-ddThh:mm format to show.
Is there any way to format date the right way?
UPD
I've tried to use moment
let date = moment(component.props.data.value).format('YYYY-MM-DDTHH:mm');
But in this case I cannot choose any time, date works ok.
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/