Hi
I'm somewhat new to jquery and trying to get familiar with
coding it. In my mvc app there is a bootstrap datepicker (not
datetimepicker which i couldnt make work)
The problem and challenge is this,
there are about 50 date fields. They are cast as string within
MVC. In some records some fields will have a date already there, most
will be blank. If there is already a date, it could be any format, if
blank the formatting should be 07/04/1776 and actually if should
always get converted down to that 07/04/1776 style, which i think is
mm/dd/yyyy ?
if you click in the textbox, i made a function to convert whats in
the textbox into this format,
- $('#Astr').on('click',
function (e) {
-
alert("clicked");
-
var st = $('#Astr').val();
-
var dt = new Date(st);
-
var day = dt.getDate();
-
// alert(day);
-
var year = dt.getFullYear();
-
var mi = dt.getMonth() + 1;
-
var mytxt = mi + '/' + day +
'/' + year;
-
$('#Astr').val(mytxt);
-
})
Trouble comes when i tried to add a button to the textbox area to
call the datepicker. It calls it but does not go away when an item is
clicked. it does not have a clear nor close button
- <script type="text/javascript">
-
function setCalendar()
-
{
-
alert("///");
-
//var date1;
-
//$('#date1').datepicker('show');
-
-
$('#Astr').datepicker('show',{
-
format: "MM d, yyyy",
-
clearBtn: true,
-
autoclose: true
-
}).on('changeDate', function (e) {
-
$.datepicker('hide')
-
});
-
-
$.fn.datepicker.dates['en'] = {
-
days: ["Sunday", "Monday",
"Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday", "Sunday"],
-
daysShort: ["Sun", "Mon",
"Tue", "Wed", "Thu",
"Fri", "Sat", "Sun"],
-
daysMin: ["Su", "Mo",
"Tu", "We", "Th", "Fr",
"Sa", "Su"],
-
months: ["January", "February",
"March", "April", "May",
"June", "July", "August",
"September", "October", "November", "December"],
-
monthsShort: ["Jan", "Feb",
"Mar", "Apr", "May",
"Jun", "Jul", "Aug",
"Sep", "Oct", "Nov", "Dec"]
-
};
-
}
-
</script>
-
-
And the textbox itself that is in the mvc view,
- <div class="form-group">
- @Html.LabelFor(model => model.Astr, new {
@class = "control-label col-md-3" })
- <div class="col-md-9">
- @Html.EditorFor(model => model.Astr, new
{ @class = "CreatedOn" })
- @Html.ValidationMessageFor(model => model.Astr)
-
- <button type="button"
class="btn-success" id="ddd" onclick="setCalendar()">
-
- </button>
- </div>
- </div>
I set the format type of this datepicker to MM d, yyyy because this
way it recognizes the month if its text eg. "July"
otherwise datepicker does not know July = 7 and always inserts the
current month, September in this case.
Also, the datepicker tends to force its output onto the textbox
irregardless, it needs to be blocked so that only if explicitly
clicked will its output modify the textbox, which is some important
date another user entered.
right now, or at least recently, if the datepicker appears? if you
click outside, if the textbox had: July 4, 1776? it fails to read the
month and inserts: 09/04/1776, which is what it shows, September 1776
with the day 4 highlighted.
any help or ideas are appreciated