How to display/show only date value in bootstrap datetimepicker when binding data.
I have set the date format as "DD/MM/YYYY"
#Html.TextBox("BirthDate", Model.BirthDate, new { #class = "form-control", #data_date_format = "DD/MM/YYYY" })
and also decorated the viewmodel property with datatype date.
[DataType(DataType.Date)]
public DateTime? BirthDate { get; set; }
But when the date is binded the text box control shows the time(12:00:00 am) component as well along with date.
19/11/1945 12:00:00 a.m.
Any help is appreciated.
have a look at this thread. this has nothing to do with bootstrap datetimepicker.
it is with the datetime obj.
[DateTime - How to create a date time with month and day only. (No year)
Got it working by changing the #HTML.TextBox() to #HTML.TextBoxFor() and adding the display format
as below:
#Html.TextBoxFor(model => model.BirthDate, "{0:dd/MM/yyyy}", new { #class = "form-control", #data_date_format = "DD/MM/YYYY" })
Related
I am using vuejs-datepicker and I set datepicker (calendar) to today date by default like this:
<datepicker v-model="theDate" format="yyyy-MM-dd"></datepicker>
<!--shows yesterday date in calendar instead of today. "format" needed to get right format.-->
...
data() {
return {
myDate: null
}
},
...
created() {
this.myDate = this.$moment().format("YYYY-MM-DD")
console.log(this.myDate) //gives me today date in right format but no shows the same
}
...
This must be very basic and simple thing. But I don't really get why it is showing yesterday date and how to fix it.
Update: this describes my issue: https://github.com/charliekassel/vuejs-datepicker/issues/23
Finally, I found one solution here https://github.com/charliekassel/vuejs-datepicker/issues/158.
I want to change the language a date picker is displayed in based on a moment() locale. Not just a translation of the date chosen by the user, but the date picker itself.
I have a datepicker with the following date-formatter
<b-datepicker
:date-formatter="(date) => moment(date).locale('ar').format('YYYY-MM-DD')"
></b-datepicker>
But am unable to get the date picker to change language. I've made sure to import and set the moment locale before hand.
Set locale, then format the date and then return it.
moment(date).locale('ar').format('LLLL');
You can format the date in different formats.
UPDATE:
To change moment language just define reactive data property (for example lang):
export default {
data() {
return {
lang: "ar"
}
}
}
and in your template:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
></b-datepicker>
So whenever you change lang, your date will be reformatted accordingly to your selected language.
Use month-names and day-names to translate the date picker. See here.
With moment, you can do that way:
<b-datepicker
:date-formatter="(date) => moment(date).locale(lang).format('YYYY-MM-DD')"
:month-names="moment.locale(lang).month()"
:day-names="moment.locale(lang).weekdaysShort()"
/>
But you should define locale(lang) at a global scope instead in component template...
I need a bootstrap datepicker where the start date and enddate must be customizable like start date is 01-01-1950 and end date is todate-18 years. Secondly wanted to show the dropdown year and month on the calendar topbar to use easily rather than the default bootstrap calendar.
For your reference have attached an image which 'm using now without bootstrap.
Any idea/link is appreciated.
you can not put dropdown but can achieve same functionality by another way with new bootstrap version.
check out this link http://www.malot.fr/bootstrap-datetimepicker/
<script>
$(document).ready(function() {
$('#date_deb').daterangepicker({locale: {format: 'DD/MM/YYYY'},
showDropdowns: true,
minDate: '01/01/2016',
singleDatePicker: true,
singleClasses: "picker_2"
}, function(start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
});
});
</script>
I am using Bootstrap time Picker control and store data in DB in string format like 6:30 PM. Now I have an issue when I edit the form and put that value in Bootstrap time Picker control, I got an issue, Any one can help in this regard.
String format is ="6:30 PM" and want to set that string in Bootstrap time Picker control.
EDIT:
I am filling in below format.
blockHoursDetail.FillBlockHours(blockHoursDetail.params.BlockHoursId).done(function (response) {
if (response.status != false) {
var blockHours_detail = JSON.parse(response.BlockHoursFill_JSON);
var self = $("#blockHoursDetail");
utility.bindMyJSON(true, blockHours_detail, false, self);
if (blockHours_detail.chkActive == 'True')
$("#blockHoursDetail #chkActive").attr("checked", true);
else
$("#blockHoursDetail #chkActive").attr("checked", false);
blockHoursDetail.ValidateBlockHours();
$('#frmBlockHoursDetail').data('serialize', $('#frmBlockHoursDetail').serialize());
}
else {
utility.DisplayMessages(response.Message, 3);
}
});
When you return data from the db you should show it like that.
<?php echo date("h:i A",strtotime($time_from_db)); ?>
and if you are facing some problem in initializing of time picker the the specific format then you can use this
$('.timepicker').timepicker('setTime', "6:30 PM");
hope it will help you
The same question were asked in this thread The field 'Date' must be a date MVC 4 but I have slightly different problem.I got the error while using internet explorer 11, not able to figure it out.
Here is the property in my model
[Required]
[Display( Name = "Birth Date")]
[DataType(DataType.DateTime)]
public DateTime BirthDate { get; set; }
and jQuery is
$(function () {
dateFormat: $.datepicker.RFC_1123;
$('#BirthDate').attr('readonly', true);
$('#BirthDate').datepicker({ dateFormat: "d/M/yy" });
});
and code for textbox
#Html.TextBoxFor(model => model.RFI.BirthDate, "{0:dd/MMM/yyyy}", new { datepicker = true, #class = "textbox_medium", id = "BirthDate" })
to support this format I wrote the following code in jquery.validate.js file, in the function definition of "date: function (value, element)"
if ($.browser.webkit) {
//ES - Chrome does not use the locale when new Date objects instantiated:
var d = new Date();
return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
}
else {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
}
The mentioned code works correctly in Crome but doesn't works in internet explorer 11. Frstly it gives the error for webkit, then I changed the definition of a date function (replace code with previous definition) still it gives an error of "The Birthday must be date "
I did a full test of your scenario. The error occurs in IE in jquery.validate.js on the following check:
// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function( value, element ) {
return this.optional(element) || !/Invalid|NaN/.test(new Date(value).toString());
},
For quick prove you can try to write the following in Console in both IE and Chrome:
new Date('01/Jun/2001');
In Chrome you'll get a valid date and in IE invalid.
To fix the issue - change the format in your date picket to a default one "dd/mm/yy":
$('#BirthDate').datepicker({ dateFormat: "dd/mm/yy" });