bootstrap datepicker needs to reformat date but 2 jquery functions go at the same time? RRS feed

  • Question

  • User2142845853 posted
                        $('#Astr').on('click', function (e) {
                             var st = $('#Astr').val();   // document.getElementsByName('Astr').value;//(text.target).text(); alert(text);
                              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;
                            //st.value = mytxt;
                            //  document.getElementsByName("Astr").value = mytxt;
                              $('#Astr').datepicker().on('changeDate', function (e) {

    the goal is to change the format of the date from the word style like July 7, 2015 to 7/7/15   but when its clicked on it starts to reformat it, then the datepicker starts also, and it puts the wrong month in there.  why does the datapicker start before the other one finishes?

    Sunday, September 27, 2015 2:41 PM

All replies

  • User61956409 posted

    Hi rogersbr,

    We could specify date format for bootstrap datepicker via setting format option. The following sample is for your reference.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
        <script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
        <form id="form1" runat="server">
            <div class="container">
                <div class="row">
                    <div class='col-sm-6'>
                        <div class="form-group">
                            <div class='input-group date' id='datetimepicker1'>
                                <input type='text' class="form-control" />
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
    <script type="text/javascript">
        $(function () {
                useCurrent: true,
                format: 'MM/DD/YYYY'

    Best Regards,

    Fei Han

    Sunday, September 27, 2015 9:50 PM
  • User2142845853 posted

    HI Fei,

    thanks.  it does mostly what I hoped for, except the date comes out 0015 instead of 2015 or 0076 instead of 1976, but i will look at that closer.

    I meant to add the conditions which applied to my software, your changes look hopeful and will integrate, but the way it was  failing before,

    some textbox fields will already contain a date in the wrong format.  it will be July 7, 2015.  when clicking on the box, the function changes this to the right format, then, the date picker is supposed to show, with the correct date in there.  July = September??  if it says any written month, the datepicker cannot understand but it will get the day and year right, it always puts the current month, September, in the month field.  

    textbox says July 7, 2015.  click then click away, its now 9/7/2015.  wrong!!!!  i will try to integrate doing it this way as you show, although its MVC and has no asp server

    some textboxes will be blank.  if thats the case? the datepicker should take priority and whatever is selected is the date.  but, IF there already is a date, then format that in to the right formatting style 7/7/2015  (or leading zero's, fine) 07/07/2015


    Sunday, September 27, 2015 10:36 PM
  • User2142845853 posted

    HI Fei

    it does not work in my mvc project.  but why?  I create an asp.net web page and it works fine.   But in the MVC?  no,  i take out the asp references, move the javascript references to the top.  nothing

    using the inspect element in chrome it gives one error:

    Uncaught TypeError: $(...).datetimepicker is not a function

    is there any way to have visual studio or any add-in check why javascript or jquery add ins do not run?   what is the secret to making js or jquery work in visual studio?  the right kind of order of adding links to scripts?    the component has the id, the function references that id on some event.  but it does nothing at runtime, why?  is there no mechanism for finding hints about how to make js work?

    Now?  I think the solution will be to add some kind of little button next to the textbox that brings up the datepicker and then puts the value in, because unless im missing something the jquery cannot exexcute steps in sequence.  it should convert the format, then after, bring up the datepicker and use that converted date.  it doesnt.  it does both at the same time and has the wrong month in datepicker, so it always makes any month september.  this is bad because the date values are important.  

    clicking the glyphicon has no effect

    Monday, September 28, 2015 8:44 AM